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.
Wirify ↗ by Volkside Pty Ltd:
analyse existing layout via automated wireframe overlay
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).
- 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]
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
- watch Rachel speaking at viewsource conference in Berlin (2016)
Innovative & Practical Graphic Design with CSS Grid, Jen Simmons
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.