Web Page MockUp Project

Screen Shot 2016-11-16 at 9.18.44 AM.png

DESCRIPTION
Using a grid design a web page layout.

PROCESS (Programs, Tools, Skills, FOCUS principles)

  1. I started by sketching some ideas of how the lay outs could look:

Screen Shot 2016-11-16 at 9.24.32 AM.pngScreen Shot 2016-11-16 at 9.24.50 AM.pngScreen Shot 2016-11-16 at 9.24.42 AM.png

 

2. I then created a wire layout in Adobe Photoshop:

 

Screen Shot 2016-11-14 at 11.10.02 PM.png

3. From there I continued to add social media icons, and photos and words that would be clickable.

4. I then had it critiqued and then finished up by fixing up what was suggested.

CRITIQUE PROCESS
I had my design critiqued by Sister Nugent and Broome Munoz from class. Both suggested to fix the logo at the top of my web page layout, as well as adding social media buttons and copy write information.

Facebook Critiques: I posted it and received a reply from Sariah Mudallar and Sister Nugent.
One-on-One Critique: Brooke Munoz
Instructor Critique: My instructor suggested making my logo on top bigger because it was too small and then I made it too big so I fixed it from there. I also was told to make sure and add the copyright information and social media buttons so I did!

MESSAGE
Shop our clothes and  adventure with Grand Elevation Company.

AUDIENCE

All outdoor fans that are looking for adventure and great clothing for those adventures!

TOP THING LEARNED
I learned how to get the grid off and on the design….command H

COLOR SCHEME & COLOR NAMES
Complementary // Teal and brick

TITLE FONT NAME & CATEGORY
Coachin // Sans Serif

COPY FONT NAME & CATEGORY
Birch Standard // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT
photo-1446108440972-3798c860067c (1).jpegphoto-1469026140142-cb239ea68152.jpegphoto-1426604966848-d7adac402bff (1).jpegScreen Shot 2016-11-15 at 8.29.23 PM.pngScreen Shot 2016-11-16 at 9.44.17 AM.png

SOURCE OF EACH IMAGE (website name and hyperlink)
Logo is my own.
The 3 outdoor photos came from Unsplash.com, here are the individual links:

https://unsplash.com/search/clothing?photo=uHJ-DIQtQwk

https://unsplash.com/?photo=ndN00KmbJ1c

https://unsplash.com/search/adventure?photo=5x4U6InVXpc

 

Here is the link to the social media icons:

https://www.google.com/search?q=social+media+icons&rlz=1C5CHFA_enUS714US714&espv=2&biw=1280&bih=726&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwjG3I_cr6zQAhUN5GMKHQwND-kQsAQIGg#imgrc=TXVlrxILTJZ3RM%3A

Advertisements

5 thoughts on “Web Page MockUp Project

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