course notes 2016/17

layout design

Nov 16th 2016

featured photo by Rain Noe, lines & shapes added to original, © Rain Noe, core77

CSS Grid Ask Me AnythingWhile 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.

header of article

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

as seen on: STV, work by Stuff and Nonsense (Andrew Clarke).

stop solving problems you don’t yet have

as seen on: Greenbelt,
work by Edge of my Seat (Rachel Andrew)

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

useful reading

grid systems & tools

CSS Grids – covered by Rachel Andrew

Rachel speaking at viewsource conference in Berlin:

Time for one final edit… ?

TASK
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.