Web Page Layout Project




Process: Once I decided on a business to create a website for, I began by drawing several sketches of layout ideas. I considered my audience, which would be mainly mothers and women looking for baby gifts, and then narrowed it down to the sketch I thought would showcase the product the best, which was one picture of all the products together with navigational links for each separate product for my audience to browse through. I wanted my message to be one of warmth and light, which is why I chose the company name ‘Shine’. Once this process was complete, I created a shape map in Photoshop with layers for each individual part. I then pulled in my edited image and began to establish my color scheme. I utilized the eyedropper tool to capture colors which would match the main areas of the photo, and worked forward from there. I chose two contrasting fonts, and used two styles from each of the fonts. I also used a symbol from a font as the design element. Once all the pieces were in place, I combined all the layers and saved the final website page view as a JPEG.

Critique: When I was finished with my shape map, I emailed it to my instructor for some feedback. She suggested I create a little more asymmetry with the bottom right half of my page since the circle and copyright information didn’t really line up with anything. My husband also commented that the circle looked out of place, so I replaced it with a rectangle in the final page, and I created another visual diagonal line with the elements in the area  my instructor pointed out. When my page was completed, I shared it with our class Facebook group. Nicole Stock mentioned that the dark background of the picture seemed out of place with the lighter background and the bright colors in the rest of the website.  I added some darker elements to the page to tie in the dark background in the photo.

Image source: Photo of blankets and baby items: taken by myself

Font names & categories: Segoe Script Regular & Segoe Script Bold/Decorative; Gill Sans MT Regular & Gill Sans MT Condensed Regular/Sans Serif; (design element was the * symbol from Century Gothic Regular/Sans Serif)

Color scheme: Complimentary; blue and orange


3 thoughts on “Web Page Layout 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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s