Grids in web design
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.
Grids in code, however, are a far newer technique than you might expect. For years we've had to use various different methods, all of which are still in use today - a fact I mention mainly to tell you that grids are not necessarily the easiest first method to learn. Do work with other methods as well and ease yourself into the various layout approaches.
essays on grid design
analyse layouts with
thinking in numbers?
How effective are grids?
The following three sites are driven by the written word and present a vast amount of content.
Take a look at the sites, their main sections and individual pages and use the two bookmarklet tools to explore the layouts' structure, hierarchy and effectiveness.
Discuss the outlined points in your groups and think of possible starting points for a new grid.
what are the strengths of the given grid layouts?
what are the weaknesses of the given grid layouts?
List 3 possible base units as starting point for a new grid design.
Velika • Roshini • Emma • Claire • Robert
Ashish • Sara • Gergana • Joanna
Nelly • Damla • Parisha • Nicholas • Prabin
To keep the conversation open, it would be great if your groups used the threads in Slack to discuss the points. We can then all have a read later ;)
If you prefer to chat privately, please do :) Via Slack and Jitsi, you could have your own group video conference. To start the meeting, go to the fitting channel, add
/jitsi followed by an
@mention for those invited. (
more on Jitsi)
Andy Clarke - Inspired by CSS Grid
Jen Simmons - Innovative & Practical Graphic Design with CSS Grid
implementing given layout
Your practical challenge today is to use your newly learnt layout skills to recreate 3 given layouts. This exercise comes in 2 phases. Today, we'll focus on the mobile first approach, working primarily on the typesetting for smaller screens.
We'll take this further next week when we'll extend the layout to larger screens and make it responsive.
The text quotes Dieter Rams, a widely recognised and respected German industrial and product designer whose work continues to be influential. In the 1970s, he wrote the now famous
ten principles for good design which have become even more relevant today. I hope you will enjoy reading and working with this text.
Good content inspires good layout :)
download source files
webpage files (HTML/CSS/JPG) FOLDER:
screenshots of layouts, today's version FOLDER:
screenshots of layouts, for next week FOLDER:
original text + photos Phase 1 task:
work with the given HTML
write the CSS required to implement the given 3 layouts, i.e. make copies of the existing CSS to edit for each of the layout versions
focus on typesetting and spacing - this will become the mobile version of the page
Phase 1 - mobile first layouts
Phase 2 - responsive layouts
Please note: this is only a preview of next week's updates :) Our aim today are the previous layouts.