10A Web Page Mockup Project

mockupdraft2DESCRIPTION
Design a website homepage using a grid.

PROCESS (Programs, Tools, Skills, FOCUS principles)
The first thing I did was find a topic. I saw a Guinness World Record book at the library and thought it would be fun to do a site dedicated to a record holder, so  I did some research and decided to do my mockup on the world’s largest paint covered baseball. After I chose my topic  I drew three planning sketches for how I might tentatively plan my web page. Then I chose the one that I thought would work best. I opened up Photoshop, placed a 12 column grid, and created my wireframe.

3wireframe

Afterward  I began looking for pictures that I could use in my design. I looked for pictures that I thought would work in my layout. As I began placing the images I realized my layout would not work with the images that I had, so I adjusted my wireframe a little to accommodate the pictures. After I finished placing the pictures and adding text I saved it as a JPEG and uploaded it to Facebook for critiques

CRITIQUE PROCESS
I received critiques on Facebook from Toni Norman and Megan Headley. Toni and Megan both suggested adding more white space. Megan also suggested adding some contrast in the sizes of my headings. My instructor suggested I add some more contrast between my headings and my body text by making my large text larger and my small text smaller. She also suggested I increase the width of my page and add some more content so I had a more clear message. My one-on-one critique was done my friend Hannah. She suggested I change the color I had originally, increase the size of my main heading so it stands out more with the paint background, and add some punctuation.

MESSAGE
You can come see the record setting baseball covered with the most layers of paint.

AUDIENCE
Anyone interested in a record breaking oddity.

TOP THING LEARNED
How to use clipping masks to place images right into your wireframe.

COLOR SCHEME & COLOR NAMES
Monochromatic – Blue and White


TITLE FONT NAME & CATEGORY
Follow Your Dreams // Decorative

COPY FONT NAME & CATEGORY
Gotham // Sans Serif

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

balls

http://americanprofile.com/articles/americas-superlatives/

cross

http://www.trover.com/discoveries/wall?d=Pgmj

paint-acrylic-colors-texture-4645

https://w-dog.net/wallpaper/paint-acrylic-colors-texture-paint/id/356655/

painting

http://www.trover.com/d/zHTg-worlds-largest-ball-of-paint-madison-county-indiana

facebook

https://commons.wikimedia.org/wiki/File:Facebook_icon.jpg#file

instagram

https://commons.wikimedia.org/wiki/File:Instagram_icon.png#file

pinterest

https://commons.wikimedia.org/wiki/File:Pinterest_Shiny_Icon.svg

twitter

https://wisdomwayofknowing.org/resource-directory/the-cost-of-true-love/

 

 

Advertisements

2 thoughts on “10A 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