Revising the template

At the beginning of this project, Rob and I were both sure that blogging as we worked would definitely make for a better website, and after the quality of the feedback we've got so far, we're feeling pretty vindicated - the comments have largely positive, but there have been some really salient points raised.

I've incorporated the feedback into a new revision below, and I'll briefly outline what's changed from the previous mockup:

What's changed here then?

Titles and lead-ins

One of the recurring points that came out from the feedback was the placement and size of the title on the page - in the first version, the title, breadcrumbs and menu all ran into each other, and it was hard to know where to look first.

I've upped the size of the title, and given it some more space to breathe, and increased the font-weight, to give the page a clearer visual hierarchy. The lead-in para has been given similar treatment.

Baselines

Something else raised was the inconsistency of the sizes of images currently in use on the website, and whether anything was being done about this. This is a bug bear of mine too, and in print problems like this are often solved by working to a grid, and setting a baseline height for all elements to use as a basis when working out their size.

Why do this? Keeping to multiples like this gives all the elements on a page a better sense of proportion in relation to the main body text, which is a fairly standard 12px in size.

To keep the page looking light, and readable, we're using a line-height* of 1.5 times the height of the type - it may be helpful to think of how double spacing text in papers and essays makes it easier to read.

Multiplying font-size by line height gives us our baseline height to design to:

In other words:

font-size (12 pixels) x line-height (1.5 ) = baseline (18px)

Apologies for the design geek jargon here - it's hard to explain this without slipping into it sometimes, but hopefully this image here with the baselines overlaid should help shed light. The bottom of the lines of copy, and the images bottom of the photograph lines up with the horizontal rows - sticking to a vertical rhythm.



* Line-height is basically CSS/web jargon for leading if you're coming from the world print jargon. If you're not from either, it basically means 'space between each line'.

Columns

Another trick that helps keep proportion, is dividing up space into columns. I'm working to an assumed page width of 950px. We now need to work out how many columns this space should be divided into, and how much space there should be between each column. The main aim here is finding a balance between flexibility, allowing for as many layouts as possible, and and simplicity, keeping something that's maintainable, and easy enough to follow.

I'm using a 24 columns here, each 30px wide, and a space (gutter) between each column of 10px. This gives loads of layout possibilities for future designs, while staying inside a framework that keeps layouts in proportion to each other.

The images below shows the site with the grid and baseline superimposed, to help illustrate how the elements line up, then one with a 4 column layout being used as a basis for the current page. The final image shows just a few of the different layout options a 24 column layout offers - this flexibility will be useful when designing the front pages over the next few weeks of the project.


24 columns overlaid



24 columns, merged into 4 columns



24 columns divided to show different layout potions



There's another reason for using a 24 column grid - it's tried and tested already online, and it's used by Blueprint, a web developement framework that was designed precisely to make designing for the web less hassle than it is at present.

Breadcrumbs

One other thing mentioned was the placement of the breadcrumbs - these have moved out of the main content well, and up where they're more obviously part of the nav.

That's it for now

There are a few other tweaks we've made here to the layout (updated text, rounded corners, fiddled with gradients etc.) and there's plenty more to talk about, but I'll have to save that for another post.

Thanks everyone for your comments, in particular Kathryn, Alan, Mike, Haulah, Oliver and Roberta - hopefully seeing these changes made here should show that your input really is helping create a stronger design for a future wmin.ac.uk.

As ever, please don't be shy with the feedback!