Project 3

Final Project Type and Grid Exercise

The overall concept was a website that would either provide information about the variety of educational options in Milwaukee, or an online school for kids from Kindergarten through 12th Grade. For each of these three, I used the 960 grid again to keep things lined up nicely.

For the first design, I used a dark charcoal background to contrast the first-level navigation bar and brightly colored photos, with blues and yellow title bars. The blocks of large, differentiated white type, along with the photos, express the purpose of the website: to provide information mainly to Milwaukee parents of young students to help them make a decision about how to educate their children. The colors, "white space" and grid layout were intended to attract savvy, younger, well-educated parents who have at least moderate exposure to current internet trends. I included a footer with an extensive identifying statement.

The second design gives more real estate to the images, but also carefully considers the typographical grid to place the information within the remaining spaces. The background color is a light neutral tone, which pushes the darker colors and the bright pink out farther forward. The first and second level navigation are separated with a line and different sized type. Three sections use the same bright pink as the 3D logo: Member LOGIN, Home, and ENROLL NOW - I wanted to keep these three very visible among the other links. Within the second level navigation, the type color changes to a dark brown on hover over. This layout is less of a general information database and more of an online public school being advertised to parents.

The third design is geared more to an older audience, between 35 to 50 years old, more conservative, but provides the same information as the first website design. The colors are black, white and tans, highlighted by the brightly colored illustrations, which were meant to convey the idea of multiple ways / locations to learn. The header is very typically placed, followed by a large section that uses the mission statement and images, and then short explanatory articles at the bottom meant to give a hint at the type of content provided on the site. The footer is lean and centered. Spatially, the site is very centered, split almost right down the middle, with enough graphic elements and varied type to have movement across the halves.

'at random'

As an exploration in hierarchy, I made the titles of my pages very large in comparison to the rest of the text on my page. The titles are also set in a different typeface than the rest of the text, which helps contribute to hierarchy. My navigation is designed to be a left side flyout menu and is set in a different color than the rest of my page. In my navigation, I have made each main category in caps so it stands out more and flyout portion of the menu is set in regular text.

I feel that my pages are a bit plain, as I am implementing parts of this design for my actual web design project, but I also don't want to distract people with a lot of images, links, or unnecessary images.

Christopher Poff's Project 3 Designs

Visual Communication

Design 1

Design 2

Design 3

Instead of always relying on proximity to indicate a relationship I experimented with type size and color as well. In the third design I pulled colors from the night shot of Beale Street to associate the information to the image. I used lighter/brighter colors to signify importance. I used the same font but created hierarchy by using all caps and different font size. I also tried using semi-transparent blocks to place text over the images. It makes the information a layer on top of the main page to show it is an additional piece of the whole. The grid system also allows for variation with a degree of order.

I looked back at my original designs from the first site assignment and was surprised how much changed. The biggest lesson learned for me is using an editing eye to eliminate distractions and create a clear and concise page layout. I think my third design is my most successful. The page itself is integrated into the night scene of Memphis. The headline calls for you to “Meet me in Memphis.” Now the page makes you feel there and brings all the information “into the city”.

Three Layouts