Website Mockup

website mock up with layers 3

desk mockup

DESCRIPTION: Create a mockup for a website for the Diamond Florist company.

PROCESS (Programs, Tools, Skills, FOCUS principles):  

My first step was to draw out some sketches of possible site layouts.

Scan0010 Scan0011

Then I made a digital wireframe.

wireframe

I used Photoshop to design my wireframe layout and mockup. I used Illustrator to create a few of the elements I used on the page, like the order button and social media buttons. I used the knowledge I’ve acquired in this class and previous classes to work in Illustrator and Photoshop. I used contrast in color, type and size to create hierarchy throughout my site. The call to action button is larger than the photo titles. The footer menu is the smallest.

CRITIQUE PROCESS:
The first feed back I received from my instructor was to make the titles of my pictures stand out a little more. I made them a darker shade of the purple in my logo and increased the opacity a bit of the white bar behind them. I also needed to make sure my media buttons were consistent. So I downloaded some buttons that someone else created and matched them to my dark purple color. She also suggested working on the alignment of my logo and company name.

Natalie said to adjust the CROWNS picture so the word didn’t cover the girls’ eyes. I ultimately chose a different image so that my pictures would match more- no people in any of them.

My husband did a one-on-one in person critique with me and helped me place the logo and title on the left side of the header (so that I wouldn’t have unequal spacing issues on either side.) I also filled the new empty space with an Order button.

MESSAGE:
Diamond Florist is the best place to find beautiful flower arrangements for whatever occasion you need.

AUDIENCE:
Anyone needing to buy flowers.

TOP THING LEARNED:
Photoshop is a powerful designing program, and I’m just scratching the surface with what I know how to do. I’m learning more about how layers work, and it was convenient to be able to group them for organization.

COLOR SCHEME & COLOR NAMES:
Complementary: Purple and green

TITLE FONT NAME & CATEGORY: Satisfy / Cursive

COPY FONT NAME & CATEGORY: Baskerville / Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

4th of july flowers bouquet-of-flowers-1149099_1920 flower crown flowers-260894_1280

 

Advertisements

2 thoughts on “Website Mockup

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s