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

Website with Grids

960 Grid System

Multi-Column

Single Column

Three Column

Single Column Layout

Three Column Layout

Multi-Column Layout

Composition

Three Website Designs Based on 960 px Grid

The first picture is my five - column website, the middle is three columns, and the bottom is one column. My two young sons are the inspiration: both have gone through "truck stages", as do many kids - a website about trucks seemed like a good idea.

I noticed that the most interesting layouts for me were loosely based on multiple (3 or more) columns, with some elements taken slightly off an equally divided grid. Some asymmetry is desirable, though in some parts, it can balance the rest of the composition visually. To me, the least aesthetically interesting layout is a single column that spans the page. Perhaps if it was a narrower fixed width it wouldn't bother me, but I didn't try a layout with that description for this same theme.

Grid Convert

Years ago when I took my first class in web design, we were taught to use Dreamweaver and table based layouts. Then I discovered Cascading Style Sheets (CSS) and converted to floating objects (and at times was driven to madness). Then within the last year, I stumbled across the 960 grid system along with application of the golden section in layout design. I died and went to heaven.

As an “information manager” I am an organizational freak. Tables, while limiting, were a great organizational tool. CSS was more flexible but at times just would not behave. With the application of grids, sanity has returned to layout design. We still “float” and style but with grids we now have an underlying structure that allow for flow while retaining balance.

I have collected some websites that may be of interest to those who wish to delve more into grid design.

http://www.noeticfront.com/blog/2010/01/22/grids-recondite-structures-of-design/

http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/

http://www.tripwiremagazine.com/2009/06/45-css-grid-systems-layout-generators-and-tutorials-that-every-designer-should-know.html

http://designshack.co.uk/articles/css/introducing-the-less-css-grid

http://cameronmoll.com/archives/2006/12/gridding_the_960/

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-4