Exhibit Ten

Website Home Page: The Road Home

Before Revision

REVISION NOTE

  • Upon Revision, for proximity the boy was flipped to be facing into the page and towards the words that would be clicked on and viewed

  • In addition, for both proximity and alignment the boy was cropped to alleviate the awkward white space after The Road Home name on the bottom right. There is still plenty of white space in the design. Having white space and the boy looking off in the original design might leave the user wondering if there is a reason to scroll to the right.

Background:

This design could be used as a home page for a redesign for a Home Page and branding for an organization. This portfolio highlights a lot of The Road Home's work as the designer works for this agency. This piece pitches an alternative color scheme and font choice. The images are meant to represent both the homeless services the agency provides and the housing services - making it simple, clear, concise, and modern. It keeps an above the fold presence, not needing a scroll function intentionally to drag the consumer deeper into the website.

Design:

  • Repetition: Color is the main repetition element in this design with the color of the text being represented in both images. The other main element of repetition is the hard square angles and rectangles, only broken by the Roboto font.

  • Alignment: The alignment in this piece is squared angles. It begins with a hard left border and a clear left top aligned navigation pane. But the two pieces of art break up the name of the organization with the navigation pane "The Road Home". The alignment of the name of the organization hugs the image on the right to assist in proximity to help the consumer know the information goes together and ties in the color of the image. In addition, since the home page is selected the rectangle is aligned with "home" in this example.

  • Color: This piece uses a simple color scheme with a lot of white space to direct the user to the main navigation pain. The colors reflected are the teal and orange in the photographs, fonts, and rectangles.

  • Contrast: The main contrast in this piece is the orange and teal colors and also the sans/sans serif fonts. Which are also both complementary to each other. In addition, there is contrast in the use of capitalization of words and lowercase letters.

  • Font Choice: Roboto Regular; Engravers MT Regular a serif font to contrast with the sans serif of Roboto

Photoshop Skills Used:

  • Rectangles to create the edge and emphasis on "home"

  • Multiple text boxes and fonts for each tab layout and logo

  • Cropping, flipping feature and layers to place photos on the artboard for overall layout effect

  • Eyedropper to align colors

Credits:

Original Photo

Original Photo