While you are learning how to produce effective layouts you will come across many different views and practices. 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 at their essays “grids in webdesign”.
No session on grids or layout would be complete without mentioning “A Dao of Web Design” by John Allsopp – which of course you have read, and re-read by now? Right? – Right!! :) It will remind you not to get too hung up on the sheer technicalities – but to keep focused on creating a user-friendly and accessible design.
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
- 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
- design by grid
grid systems & tools
- gridinator [by Steffan Williams]
- 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]
- the square grid [by Avraham Cornfeld]
CSS Grids – covered by Rachel Andrew
- CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout
- Grid by example
- CSS Grid Ask Me Anything
- Start using CSS Grid Layout (video of talk @ Devvox conference, Belgium)
- newsletter: CSS Layout News
Rachel speaking at viewsource conference in Berlin:
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.
Comments are closed.