Design your websites with purpose

It’s a web designers job to make things look good. While I have no doubt that all designers try very hard to do exactly that, it’s very easy to get bogged down in the details.

Just as a project manager might use a model such as the SDLC to ensure a project is complete and on time, web designers too can have their own systems and models to ensure the processes don’t get confused with the bigger picture. I’m not going to pretend there’s on system that fit’s all, however over the years I’ve found a few basic methods that help me get from start to finish in the straightest line possible.

A word can speak a thousand pictures

One neat trick I learnt when investigating the fundamentals of logo design, involved word association to better describe the brand or message you’re trying to convey. Take the words a client has given you to describe their brand or message (3-5 words), and then try to find 5 synonyms or closely related words for each one e.g. Grass might have related words such as green, fresh, outdoor, healthy etc.

Do this again for each of the new words (you may only achieve 1-3 words the second time around), and in 5-10 min you should have somewhere between 50-100 words on paper.

Now when you start your design, it’s amazing how the ideas start popping into your head, and how much clearer your own visualisation of the end product will be.

Get the content in before dabbling in detail

More often than not, a new website design begins in Photoshop (or similar Graphics program). We might throw in in a background image, add some containers for content and mess around with logos, menus and so on, however if we’re not replicating an existing style or design, it’s only once the content goes in do we start fully understanding what the site really needs.

Next time you start on a new design, by all means, get the fundamentals down on screen, but ensure you have some real content, including images, logos, slogans and text to play with before locking in your layout as it might surprise you how the content can dictate the design.

Don’t use visual effects just for the sake of it !

More often now than ever we’re seeing heavy use of CSS3 and it’s array of neat visual effects in production websites. Drop shadows, gradients, rounded corners and even animation is now all possible with CSS3, and gone are the days of dodgy background images, cryptic CSS and convoluted javascript to achieve a desired effect.

However with new capabilities comes new responsibility. It seems all too often that these new tools are being abused, with many developers and designers using them simply because they’re there. Here are a couple of tips to make sure your visual effects add value to the site your working on.

• Be consistent with your effects. If you’re going to apply a gradient background to a button, do it site-wide, and make sure all your gradients have the same grade (difference between light and dark).
• Think about whether you need to round off the corners for a given element. Honestly, I see far too many designs where the rounding is done simply because it’s a habit to do so, and it can have a significant impact on the overall feel of the site.
• Consider whether you really need text-shadows before using them. If the foreground / background colour combination lacks distinction and simply can’t be changed, have you considered changing the size, weight or typeface?
• Use drop shadows by all means, but use them wisely. This generally means that a more subtle shadow is a better and more realistic shadow. Aslo try to remember that the depth of your shadow implies the distance between objects, so ensure your “distances” make sense, especially when dealing with multiple layers and their respective shadows.

Visual effects are a great tool and I love using them, but I find I get more value out of my effects, and tend to use them less often when I leave them as the last component of my design.

Choose your colours first, not last

A good colour pallete is often overlooked as a fundamental design element. We all know it, and we all understand the role that consistency of colour plays in our design, but how many of us begin with the colours and then move onto the design?

In web design, building your colour pallette will include background colours, contrast colours (for sidebar titles and buttons etc.), regular text, highlighted elements, anchor links, buttons, bullets and borders, and of course all our regular H1, H2 tags and so on. Given these are all super easy to represent on a page, don’t be afraid to use a good old stylesheet and simply dump all your standard elements onto a page to begin with, and then move onto your design after you’re happy with the pallette.

There will inevitably be exceptions to your base colours, but having this very basic predetermined stylesheet will improve your focus, speed up development time and result in a better website for all.