Assignments, Design

Web Page Layout



websketch1  websketch2

Process: First I sketched out my idea.  I had prepared the first sketch before visiting my instructors live demo session.  In her session she really emphasized designing asymmetrically, so I started the process over creating the second sketch with that in mind.  Throughout this semester, I have continued with the same theme and business – combining my personal fitness training with design projects.  My audience is to anyone interested in personal training, fitness information, fitness photography or fitness event graphic design.  Because fitness is a “strong” theme, I wanted to continue with a black and white monochromatic color scheme and add a little orange from my logo into the design to repeat color for visual flow.  I found good quality fitness images and made sure that the images also supported the flow of my page by their placement.  I wanted a strong repeated shape and I wanted it to look 3-D to support the overall feel of “strength” in the page.  After implementing the critiques that I received from below, I am very happy with my final web page layout.

Critiques: I posted my first draft on our class Facebook page on Monday, June 29th for critiques and received feedback from Travis Briggs.  He pointed out that my orange lines were not lining up (see original shape map) and it made the diamond of pictures look crooked. I had to use my ruler tools to line up the orange lines and then I had to reshape my diamond pictures.  That was a lot more difficult than it sounds.  It took some time, but made the final design not look skewed.  My instructor, Julie Peterson, also replied with critiques to make my navigation bar smaller to not crowd the logo. She also pointed out that the spacing in my footer bar between the words were a little uneven. I accidently had some extra spaces between the words.  I made those changes and submitted a second draft for a final critique to her.  The following Wednesday, she replied that she liked the changes but pointed out that my logo looked “pixelly.”  I had used a photo from another document to place in the logo.  It was small so I ended up recreating the logo in Photoshop to eliminate the pixel look.  My instructor also suggested the idea of adding texture for more interest.  I received other comments from classmates on Facebook to add more color to the page, so I found a rock texture with the repeating orange color to mask over my black rectangle.  I liked the added texture & subtle color change.

Color Scheme: Monochromatic color scheme; black, grey and white with repeating elements of orange contrast

Fonts: In the Logo – Abadi MT condensed (san serif) and Brush Script Medium (script).  In the Page – Bell Gothic Bold (san serif)

Links to image sources: 


3 thoughts on “Web Page Layout

  1. Well done Jess. I think your design works well for the intended audience and comes across very clean and crisp. Overall it is very professional. One thing that did strike me was that the background rock image might be have a little too much movement, causing me to draw focus away from the images. Perhaps something more along granite striations or steel would impart the ideas of ‘rock-solid’ & ‘strength’ without being distracting. I went with a primarily white backdrop on my site, check it out here:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

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