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.