Description

Design a web page mockup using Adobe Photoshop.

Process

The process I went through is as follows:

  • I decided which company I wanted to do the layout for. The company website I chose to do is one that I will be building latter this year.
  • I sketched out three different layouts from other website I have seen recently.
  • I then chose the layout I wanted to make in Photoshop and gathered the images I wanted to put in it.
  • I opened Photoshop and opened up a 16 column grid for this layout and started to wireframe the layout.
  • After I did the wireframe, I started to add the content to each box.
  • My final design was slightly different than the wireframe once I saw all the content on the page.

Here is my sketch and wireframe I used

 

Critique Process

My first critique came from the teach on Tuesday morning. I applied the things that he said.

Facebook Critiques: Robert Wagner, Marci Grimaud, Audrey Finlayson Spjut, and Angie Worley Coates One-on-One Critique: Jay Jorgensen Instructor Critique: My instructor reminded me to add images that represents what the business does and to double check spelling.

MESSAGE

This is a new business that is a smartphone app that allows professionals and clients/patients communicate much easier. This site is to educate the people on the app and to gather sign-ups etc.

AUDIENCE

The audience is two fold. The first is for the professional and the second is the professionals clients. Basically anyone over the age of 14.

TOP THING LEARNED

When working with web page layouts in Photoshop, you have to make sure that all your images are sized the correct way so that you can place them correctly within Photoshop. This will make it easier to put the images on the web.

COLOR SCHEME & COLOR NAMES

The page color scheme is a monochromatic blue

Primary color: #00054a

Secondary color: White

Third color: #363636 - Grey shade

Text color is either black, the primary blue or white.

The outside boarder color is: #ddf2b8

FONTS

TITLE FONT NAME & CATEGORY

The logo font and Heading font

Handel Gothic / Sans Serif

COPY FONT NAME & CATEGORY

All other text will be

Minion Pro / Serif

Images

Some images cam from Graphic Stock https://graphicstock.com.

The other images where created by me.