Design a web page mockup using Adobe Photoshop.
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
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.
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.
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
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
Some images cam from Graphic Stock https://graphicstock.com.
The other images where created by me.