Clean up your Website Design!

We are continually asked how to clean up our clients website designs, here are a few ideas..

When designing a site there are usually 2 phases - Layout and Polish.
The layout phase usually involves placing the elements of the design on the page, finishing with something that appears relatively complete. Then would come the second stage - the Polish – this involves a reworking of the design, adjusting colours, type treatments, shadows, layers, adding gradients and generally cleaning it all up.

Step 1 - Clarity:
When designing for the web, one of your aims should always be to keep things sharp and clean.

1. Text Clarity
When laying out text you should give thought to what Anti-Aliasing you use. You can choose between None Sharp Crisp Strong. For editable text on a page you would usually use the setting ‘None’, but for text that appears within an image it is usually best to smooth it using one of the Anti-Aliasing settings.

2. Lining
Adding a 1px line between a lighter and darker section of the design can mimick the effect of the sharpening filter. This emphises the border and contrast between the two colours and gives the design more impact and clarity

3. Colouring
Colour makes a big difference in sharpening things up. The background colour that you choose for the design can play a intrinsic role in the way the elements infront appear. You should always choose a colour that enhances and intensifies the content of the page above.

4. Cleaning Up Objects
Sometimes with objects such as logos you will see that an edge can look slightly blurry. This can be fixed by using the Polygonal Lasso Tool (L) to remove any rogue pixels. Of course this isn't essential but it can be a good idea to think about the details and make sure everything is nice and crisp!

Step 2 - Light and Shade:
Some designers would say that gradients are the hallmark of web 2.0 design.In Shadows and gradients are a powerful tool for giving your designs more depth and prominence. Adding shadows and gradients to backgrounds, boxes, headers and even text titles can give your design that extra ‘shine’ and professional feel that lifts it above the competition. Subtle highlights used with shadows and gradients can lift elements up from the background and pull attention to sections of the page you wish to drive traffic to.

Step 3 - Precedence:
Precedence is the single most important visual aspect of information design. There will be information in your design that you wish the user to look at first, then second and so on, using visual precedence correctly will help you to create a user friendly site that delivers the information that is required efficiently.

Visual precedence is a mix of factors:

1. Size
You can be sure that a large element on the page is going to take precedence over something small. The main titles usually have top precedence to draw a user to the information that is needed. In the same way, home page calls to action can be a powerful tool for filtering users to the sections they require. When you look at the page the first thing you should notice are those two elements.

2. Colour
Colour also creates precedence. Using high contrast colours for areas of importance make them stand out against the other areas of the site. Less important sections can be designed with colours that blend into the design a little more.

3. Background Colour
With both background colour and colour the important thing is not so much what specific colour something is, as what colours everything else is in relation. This is integral in controllling the precedence of elements within the design and influencing the way a user will navigate around a site.

4. Position
Positioning in a layout makes a difference in how items are perceived. Having the important elements higher up usually gives more precedence, as does having something further left. The important sections and information should always be above the fold of the page.

Step 4 - Simplify
Sometimes during the polish you may change the actual information on the page. Tweaking the content can lead to an improved experience, sometimes elements can be simplified to improve the impact and usability of a design
And there you have it!

There are many ways that you can improve and enhance a design during the ‘polish’ stage and it is often the case that this is where a site will really come to life. Remember to use all these tools to their full potential and get the most out of your designs!

For more inspiration please email Robert Walker rob@bluhalo.com who runs our Dreams division.

Dreams has been set up to help provide a fast effective turnaround for our small to medium sized clients, giving all of our clients the same level of care and attention.