course notes 2018/19

layout visual

Layout design

Nov 7th 2018

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.

[The Sage] accepts the ebb and flow of things, nurtures them, but does not own them.

Tao Te Ching; 2 Abstraction – as quoted in “A Dao of Web Design” by John Allsopp

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 students from a few years ago have written essays about this topic – have a read: “grids in webdesign”.
Ellen Lupton’s website thinkingwithtype.com ↗ is another great introduction – check out the section on grid ↗ specifically.

grid study

Wirify ↗ by Volkside Pty Ltd:
analyse existing layout via automated wireframe overlay

design ↗ by SpryMedia ↗:
browser bookmarklet with utilities for grid layout, measurement and alignment

Before getting stuck in yourself – let’s have a look at a few websites to understand their structure and page layout.

Layout task, phase 1

Today’s challenge is to use the different CSS methods to develop given layouts as single webpages. The text quotes designer Dieter Rams and his famous principles for good design. Good content inspires good layout :)

Download the source files and work on the layout of the given text.
↓ download files

layout example

useful reading

grid systems & tools

CSS Grids – covered by Rachel Andrew

Innovative & Practical Graphic Design with CSS Grid, Jen Simmons

Leave a comment