Before:
After:
These images warrants some explanation of the main points.
This template is designed to perform a few tasks:
1) Help the user find their way around
2) Get out of the way of the content
3) Not break when more than just text is used
1) Help the user find their way around
Having consistent page furniture helps a user tell where they are in a site, and allows the user how to get back to the 'home' page quickly. One of the reasons the current site is hard to navigate is that as a user, you're forced to learn a load of different navigation schemes just to find your way around. Moreover, it's often very difficult to work out the path you've taken through the site as well, when using it (I didn't really appreiciate how bad this really was, until I tried to create a hierarchy of navigation in illustrator for the mockup in this post...)
In this comp, we're using some consistent anchors, like ever-present top level navigation, breadcrumbs, and predictable sidebar behaviour makes it much easier to move back to familiar areas if you do get lost.
2) Get out of the way of the content
This template will frame content on hundreds of pages in the university, and as a result the design really has to get out of the way, whilst still providing a pleasant, consistent environment to spend time browsing. To this end, we're using a fairly subdued palette for the nav elements, but we're seeing how some careful use of colour (as covered in a previous post) gives clues as to which part of the site the user is in, and we've tried to open up the design too, adding a load more whitespace around the main well of content.
3) Not break when more than just text is used
Since the university website was least designed, the minimum laptop/desktop display resolution has increased from 800 by 600 pixels to something like 1024 by 768 pixels, giving us more space to place elements on a page. Also, browsers have got better displaying more sophisticated page layouts, and we're now in a position where lots of techniques that were traditionally only used by the print world can now be used on screen. This design works on a 24 column gird, that leaves lots of scope for different layouts, and I'm trying to incorporate some vertical rhythm to the design - typically a technique used in the print world to help guide the eye down a page in a predictable and comfortable manner, which I'll be writing about this in more detail in a future post.
This isn't simply about making the content section wider (though there's about 20% more horizontal space now than before); the emphasis is about providing some suggested sizes for images and other elements, that 'fit the grid', and complement, rather than conflict with the rest of the design. This should help people looking after the site make the most of the images available to them, and by applying a few simple rules, know that the images they use will look good on screen, and appear in proportion to the rest of the page.
It's important to remember that this is an early version of the design, and that the goal of this project isn't to reinvent the wheel with regards the university's online brand, but to make a website that is easier to use, helps people the access the info the need as quickly and efficiently as possible. If the site looks prettier as a result of this work, then that's a happy by-product of the exercise, but at this stage, we're very big on form following function.
Having said that, there's no doubt that what we've got here can only be improved by having as many eyes cast over it as possible, so please, don't be shy with your feedback.
Please e-mail webmanager@wmin.ac.uk, and your comments will be added to the blog when we get our comments option enabled! Invitees to the web strategy workshop on Feb 11 will be made aware that feedback arising from that session will also be integrated in to this work.
