course notes 2019/20

layout visual

Layout design

Nov 6th 2019

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 ↗ is another great introduction – check out the section on grid ↗ specifically.


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.

I’d strongly recommend that you start studying web layouts in any way that suits you. The Inspect Element alone will give great insights into how web layouts have been put together, and importantly, how they adapt across screen widths (as we’ll look at closer next week).

useful reading

grid systems & tools

CSS Grids – covered by Rachel Andrew

Innovative & Practical Graphic Design with CSS Grid, Jen Simmons

view Jazz Poster page example ↗

Layout task, phase 1

Your practical challenge today 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

Comments are closed.