Friday, April 29, 2011
Saturday, April 23, 2011
Friday, April 22, 2011
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
Grid Layout System
Thursday, April 21, 2011
Composition Exercise: 12 Column 960 pix Grid
Stage 1:
Stage 2:
Stage 3:
Evaluation:
The grid system was helpful in moving elements around the page so they were still structured, but seemingly more free form. As more columns of text were required, it was evident how useful that would become when using more complex hierarchies of information on a page. It also seems to help users interact with the page - it breaks up large amounts of information into "digestible" pieces, keeps the eye moving and allows the user to move around the page and explore, adding an element of play that will hopefully keep them there longer. I can also see from the first iteration through the final, three plus column design how it evolved and become more complex visually, but easier to comprehend.
Stage 2:
The grid system was helpful in moving elements around the page so they were still structured, but seemingly more free form. As more columns of text were required, it was evident how useful that would become when using more complex hierarchies of information on a page. It also seems to help users interact with the page - it breaks up large amounts of information into "digestible" pieces, keeps the eye moving and allows the user to move around the page and explore, adding an element of play that will hopefully keep them there longer. I can also see from the first iteration through the final, three plus column design how it evolved and become more complex visually, but easier to comprehend.
Subscribe to:
Posts (Atom)