As I mentioned in my last update on what I’m doing, I really 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 really 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, which is a set of sketch sheets, HTML layout generator and CSS with consistent measurements that helps streamline web development from design through to coding.

Sketching

With a content plan for the portfolio already in place, my first step was to sketch out the key page templates required using Nathan Smith’s sketch sheets:

• Home page
• About page
• Portfolio index
• Portfolio item
• Blog index
• Blog post
• Contact

Home page sketch (view full size scan on flickr)

Portfolio item sketches (view full size scan on flickr)

Wireframes

Next, I grabbed the 12 column 960 template psd, opened it in Pixelmator and drew wireframes of each page template.

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 down nicely into 3 columns of 320px each. With a 10px gutter either side of each column, you now have 300px wide blocks for your content, which, again, is a perfect number to further sub-divide by 3 (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 3 columns, each block 300px wide and 300px high:

In summary

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 whitespace, you’re simplifying the visual design process. Separating layout from, say, colour and typography, reduces the number of design elements and choices you make at any one time. You can see the effect of small changes more easily and adjust as you work along.

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 whitespace makes it easier to deal with these problems. Something doesn’t feel right? Check your units of measurement and re-align it. Does it ‘feel’ right 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.

This current design is the fifth version of gavinwray.com, and reflects the positioning and thinking I’ve been doing this year. The core of the design comes from some detailed study of grid layouts and through trying out a new approach to content strategy on myself. This made for some odd conversations (with myself), as both client and designer, but interesting and valuable nonetheless.

I’ll write some separate posts documenting the process I’ve worked through (much of which is new), from the strategy, wireframing and design, through to building a bespoke WordPress theme.

For now, I’m just pleased to launch the site. I hope you like it. As ever, any feedback, suggestions or ideas would be appreciated.

Design

These are a mix of web design-focused magazine and tutorial sites alongside a couple of broader design blogs.

Blog.SpoonGraphics

This is one big inspiration feed. The creator Chris Spooner, a UK based graphic and web designer, writes great tutorials at on design projects typically focused on Photoshop, Illustrator, CSS and WordPress.

Web Designer Wall

Covers design ideas and trends as well as providing tutorials on the more technical aspects of web design. The complete WordPress theme guide is one of the best introductions I’ve found so far on how to install and customise your own WordPress site.

Design solutions

Gustavo Pimenta created this collection of screenshots using flickr, organising them into user interface elements, styles and tasks. This collection is handy when you’re facing a creative block.

DesignM.ag

A resource for designers (focussed on the web side) with tutorials, articles and site galleries.

iLT: I love Typography

For all things type.

Things of Random Coolness

An interesting blog covering design, fashion, film, technology and interiors.

Portfolio sites

I’m completely hooked on portfolio sites. When I worked for friends of ED as an editor, a great part of the job was browsing portfolio sites to commission new authors to write about web design.

While it’s easy to get hung up thinking that your own portfolio sucks, portfolio sites can often be the most inspiring. Here are three of my favourites:

Piotr Kulczycki travel photography

As well as the actual photo content and an aesthetically-attractive site, I like the way Piotr uses tags and sets to make his portfolio straightforward to browse.

Eleven3

George Huff’s portfolio is a nice example of a highly-customised WordPress site with some nifty scripting. I love the retro background images, footer design and clever sidebar navigation.

Marius Roosendaal

Beautifully-presented work in a clever one-page site design making use of a simple, intuitive navigation.

2Advanced Studios

Personally, I was saturated by too many Flash-based portfolios several years ago. However, for high visual impact, Hollywood standard production, all guns blazing, jaw-dropping Flash magicianry, 2Advanced Studios still surprise me. This is web design as an experience; it’s way beyond information communication.

Twitterverse and Birmingham Bloggers

After a failed attempt in 2007, combined with some encouragement from a vocal group of Twitter enthusiasts at WordCampUK, I started using Twitter to meet other web types based in Birmingham. It’s been a revelation.

Twitter

Twitter wallpaper by Honkiat.com

Twitter is a “micro-blogging” tool where individuals post a note up to 140 characters long answering the question “what are you doing?”

Starting out on Twitter can feel strange; it didn’t make sense for me until I “followed” a sizeable number of people (following other people means that you see their updates). Finding others to follow can be difficult but fortunately Stef Lewandowski brought everyone together in 50+ Birmingham Twitter users you need to follow.

You can follow me on Twitter @gavinwray.

Paradise Circus

As a result of Twitter, I discovered a whole new community of people blogging about or in Birmingham: commentators, artists, consultants, technologists, musicians… oh, and a few web designers too!

Social media and the public sector

In July 2008 I helped to launch Observations, a new blog for the West Midlands Regional Observatory where I work as the Web & Data Officer. In tandem with this new project, I’ve been looking for individuals working in, and examples of, social media in a public sector context.

DavePress

Dave Briggs works as a “digital enabler for the public sector.” His blog has been helpful in learning about the world of digital technology in communities, local government and other public sector contexts, specifically:

• Public sector bloggers
• The UKGovWeb Twitterverse

Podnosh

Nick Booth is a “social media doer, teacher and consultant”. As well as attending a couple of Nick’s presentations introducing social media, I’ve been reading his informative blog on how social media is being used – and its potential – in community contexts in Birmingham.

There are some areas that I’ll tweak further over the coming weeks, such as designing the comments in a more interesting way.

This is also an opportunity to start writing my own blog (well overdue, I know!), in addition to showing examples of my web and email design work. I’m planning to write about web and email design, tinkering with WordPress and other adventures in maintaining websites and web content.

This updated portfolio design, the fourth version, sticks with the green colour palette of version 3 yet makes heavier use of the green elements. The green and white palette is mainly taken from the British racing green Mini Cooper, with some influence drawn from the twilight woods in Guillermo del Toro’s film Pan’s Labyrinth.

Photo of Mini Cooper courtesy of Toni Viemerö

I’ve also chosen to use a dark background to provide some contrast and shape to the blog, while keeping the bulk of the actual content on a white background.

The portfolio navigation in the sidebar to browse by project type or style makes use of WordPress’ categories.

So, here it is. Time to stop the CSS tinkering — I’ve gone as far as I am prepared to in making the site compatible back to Internet Explorer 6 — and time to go live.

I’d really appreciate any feedback on the new look and navigation. Please do add a comment or get in touch.

Hillu’s site runs on WordPress, which I ‘skinned’ with a custom WordPress theme. The bulk of the site content is contained within seven image galleries of Hillu’s textile work. The archive of gallery images was edited in Photoshop for levels, colour, contrast and sharpening.

View the live site at www.hilluliebelt.com.

Home page design

Photo gallery design

Credits and plugs

The image galleries are built on the Popup Image Gallery WordPress plugin by Andy Staines.