With my new portfolio design finished and live, it’s time to catch up on writing posts. This post documents the design process I worked through in creating this website.
As I mentioned in my last update on what I’m doing, I wanted to up my wider design knowledge and put this knowledge into practice. So, I spent some time studying grid layouts and typography, getting stuck into two books in particular:
- Grid Systems: Principles of Organizing Type by Kimberly Elam
- A Practical Guide to Designing for the Web by Mark Boulton
These two books forced me to consider the portfolio layout in detail. Elam’s book is quite theoretical, which is a good thing when you’re learning a new subject, while Boulton helped me consider the grid theory in terms of the web.
Page 43, Kimberley Elam’s Grid Systems
Specifically, Boulton’s chapter on layout helped me to consider grid layouts that work aesthetically yet always keeping in mind that I’d eventually have to turn the grid design into code for a WordPress theme.
Page 235 in Mark Boulton’s A Practical Guide to Designing for the Web
To work through this process, I chose the grid960.gs system. This contains sketch sheets, an HTML layout generator and CSS with consistent measurements to help streamline web development from design through to coding.
With a content plan for the portfolio already in place, my first step was to sketch the page templates required using Nathan Smith’s sketch sheets:
- Home page
- About page
- Portfolio index
- Portfolio item
- Blog index
- Blog post
Home page sketch (view full size image on flickr)
Portfolio item sketches (view full size image on flickr)
Back using Boulton’s chapter on layout, I used his advice on the Rule of Thirds:
“Photographers have used the Rule of Thirds for years, who borrowed it from, yet again, classical artists and architects. The theory is simple – which is why it’s easy to apply in your day-to-day design work. Divide any workspace, or layout, into thirds horizontally and vertically, and align key focus points of your composition to where the lines intersect.”
A web design at 960px wide breaks nicely into three columns of 320px each. With a 10px gutter either side of each column, you now have 300px wide blocks for the content, which, again, is a perfect number to further sub-divide by three (giving 100px blocks).
In this closeup of the home page’s top left corner, I used the rule of thirds on the horizontal spacing. You can see the different elements – title, navigation bar, summary text in bold and the call to action buttons – aligned to the grid at units of 50px or 100px.
You can also see the content blocks on the portfolio page arranged in three columns, each block 300px wide and 300px high:
You may wonder why it’s worth going through this detailed grid design process. Is it too detailed? Should you just fire up your image editor and dive in?
Everyone has different ways of working – and this is a personal braindump of the thought processes I’ve worked through – but I think using grids is a valuable exercise, particularly if you find the visual side of web design difficult.
By using grids, and thereby focusing purely on layout, alignment and white space, you simplify the visual design process. Separating layout from, say, colour and typography, reduces the number of design elements and choices to make at any one time. You can see the effect of small changes more easily and adjust as you work.
Ever have those times when you stare at your design and think ‘this doesn’t look right’ but you struggle to identify the cause? Focusing on layout and white space makes it easier to deal with these problems. Something doesn’t feel right? Check your units of measurement and re-align. Does it ‘feel’ better now?
An organised layout based on grids, using consistent measurements, can begin to feel like a good web design, even before you introduce colour and type.