While you are learning more about positioning – your next challenge will be to design effective layouts which present all content well. There are many different approaches and one prevailing and well established method is of course the use of grids.
A lot has been written and discussed about grids in design, from historic examples, architecture, graphic and web design. As an approach to design, this is a technique which is loved by many, loathed by some and under constant debate. There is no doubt that grids can be a fantastic tool to design your webpage layouts.
If you are new to grid design – it will be worth your time to read up and explore their principles as possible design methods. Our MA students from a few years ago have written essays about this topic – have a look: gallery of essays “grids in webdesign”
As you study and work on your web skills ~ remember your final goal, to produce good accessible design for the web. I recommend that you read this now famous article by John Allsop for A List Apart, if you have not done so already. Though it is 15 years old – it is an essential read for anyone working on the web:
Let’s have a closer look at the designing with grids and consider possible underlying structures – these 2 tools/bookmarklets will help us understand existing designs:
‘Wirify‘ will strip any page content and display a page’s structure as wireframe, very handy for analysing page layout :)
The ‘DESIGN‘ bookmarklet is one of my favourite tools which allow you to overlay grid, guides and measurements onto any webpage.
grids in action
on the grid
stop solving problems you don’t yet have
Grids in webdesign now cannot be discussed without a mention of the numerous frameworks out there, see the list below for examples. However, some of the frameworks are quite heavy and cumbersome, overkill for many sites. Make sure not to feel tempted to use a framework unless it really fits your project. Instead, explore these frameworks, try them out and experiment to learn and understand.
For some projects, these will work very well, for others, not so much. Stick to your principles of clean and semantic code, and only write as much code as necessary.
This point is clearly explained by Rachel in her blog post on the same topics as her slides. Definitely worth a read, a great insight from a professional and experienced developer ;)
→ Stop solving problems you don’t yet have
→ Responsibly Responsive: developing the Greenbelt website
Time for one final edit… ?
Using the lovely #grid tool from Analog – have a closer look at your profile page design and text layout.
Feel free to work on one final edit and send me your edited final as update.
- Thinking with Type – Grids, Ellen Lupton
- Grid Computing… and Design, Khoi Vinh
- Thinking Outside the Grid, Molly Holzschlag for ALA
- Five simple steps to designing grid systems, Mark Boulton
- Compose to a Vertical Rhythm, Richard Rutter for 24ways
- Making Modular Layout Systems, Jason Santa Maria for 24ways
- Fluid Grids, Ethan Marcotte for ALA
- There’s No Formula for Great Designs, Andy Clarke for 24ways
grid systems & tools
- gridpak [by erskine design]
- gridinator [by Steffan Williams]
- GridFox [Firefox addon by Eric Puidokas]
- grid designer [by Rasmus Schultz]
- Bootstrap [by @mdo and @fat for Twitter]
- 960 grid system [by Nathan Smith]
- fluid 960 grid system [based on 960GS, by Stephen Bau]
- Variable Grid System [based on 960GS, by sprysoft]
- the square grid [by Avraham Cornfeld]
- golden grid system [by Joni Korpi]
- framless [by Joni Korpi]
grid madness :-)
Complete your typographical experiments on the Seed Conference page from our last session by applying a grid to the page layout. Upload your final result and leave a comment including the link to it here.
✔ to do list
- check and edit HTML of source page
- typography to use one single typeface alone
- apply a grid to the layout structure and complete the page
- upload your final page
- submit your final by posting a link below
As always, feel free to comment below if you have any questions :)