Colour means different things to different people and evokes emotional responses. Use colour for emphasis and to help deliver the message. Faith Inkubators uses purple sparingly for emphasis and it works nicely. A Film uses pink and a particular headline motif to great effect.
Sometimes unexpected colours can be equally effective, The Times’ acid green isn’t obvious for a serious newspaper, but it works. Some other sites may take a colour from a photo or logo and use this to add emphasis.
Visual hierarchy should reflect the underlying semantics of headingd hierarchy. It will give users a sense of what’s important and what’s not in the page. Use a focal point to grab attention and drive home the message. Providing variety can also lead the viewer through a page.
Whitespace is often something designers are afraid of – but used effectively, the “nothing” can be just as important as the “something” it surrounds. Also, optimum line length is 66 characters (anything between 45-75 is OK) for easy reading. The longer the line length, the more leading is required for better legibility.
Organisation – Grids
Grids can be liberating rather than restrictive. But giving users a solid framework can mean they will find it easier to get around your site – less time investment is required to “learn” the grid. He showed us maps of Philadelphia and London and asked us which we would be happier in negotiating as a tourist:
Even when using a grid, there are many ways of breaking the rigid order and still getting interesting designs. These three screenshots are from Australian agency Trout:
Having said all that, make sure that alignment happens and doesn’t fall down – subliminal effects can be powerful and if something doesn’t quite line up, it will still look “wrong” without the user being able to put their finger on why.
It’s easy to jump into the finished product right from the start. Step back and plan! Keep a sketchbook to jot down ideas – they may all come together at a much later date, but you have them to hand.
[Jason's sketch book showing early doodles for the A List Apart design]
Design should be an iterative process. Grey box comping can help you decide the best weight for various layouts. Jason doesn’t show these grey box comps to clients, but just uses them for his own purposes. He would then expect a PSD comp to show to clients, and perhaps 1-2 iterations round the loop before they are happy. The whole process can take a couple of months.
Strive For Clarity
Storytelling gives people hooks and things to remember, they will come back!
Use fonts in such a way to give some extra interest to the page. sIFR can be a useful method of delivering certain fonts if they are mandatory branding requirements.
The all-important step that is often overlooked. A style guide is best kept short, under 10 pages, and provide a dummy template for each type of page, so that other people can look after the site going forward.
We all know what he means. But if you find your client is trying to steamroller you, set up a meeting and let them know you are the expert. Try to convince them of you design, as long as it conveys their message and isn’t just kudos for your portfolio.