We are continually asked how to clean up our clients website designs, here are a few ideas..
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@Xcitedigital.co.uk
XciteDigital 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.
