Website Design: Some Really Important DOs

Websites With Obvious Visuals

This website for a Gascony chateau uses a split design of visuals and text to create a slightly staggered masthead section. The stone archway illustrates up front one of the chateau's unique selling points (the "historic charm" mentioned in the masthead text) whilst the swimming pool tells users at a glance that a pool is available - no need to clutter the masthead with unnecessary claims when a visual does the job "at a glance".

Make the Visuals Tell a Story

We created this design for a Nursery Bury St Edmunds . The top photo of the happy smiling children says at a glance than children have fun at this nursery - the website slogan can therefore concentrate on stressing that the nusery is a safe and caring environment. The supporting photos of the children engaged in interesting tasks tell parents - without then having to read lots of text - that children are stimulated at the nursery; these photos are far more effective than formal photos of children sitting in a straight line.

Use Background Visuals

In this design for a Bury St Edmunds Driving School, the design is brought to life by the background visual of the road that lies behind the main website.





Websites With No Obvious Visuals

When a website has no obvius visuals - as for this Suffolk charity for alcoholics website - you can always try an abstract image. For this website, we used a photo of candles of different shapes and sizes glowing in the darkness to symbolically represent people of all backgrounds coming together to create hope in a dark spell. The master candle is repeated in the shaded sidebar to provide a linking visual with inspirational text.


For this Gnostic UK website (which also had no obious visuals), we again used an abstract image but we then created further visual interest by using religious phrases in a script typeface for the body of the website and then took a small section of the main visual and stretched it to provide a visual interest for the menu options and quotations.

Modern website design is all about texture. For this website in development for a London holiday flat, the use of texture - and the semi-opaque content section that allows the underlying texture to be partially seen - brings the design to life; the colour or background textures were chosen to compliment the pine furniture in the holiday flat..


This Airport Transfers Suffolk website uses a plain grey background but this is brought to life by the white sheen that highlights the main page heading and - more subtly - the top website slogan.

Shading: Separating Text and/or Pictures

For this Ipswich rentals website, we used white shading to immediately draw the eye to the current flats to rent in Ipswich; this saves the reader from having to read the whole page of text.






As the Gascony Chateau website shows, more subtle shading can also be used effectively to separate chunks of text and also to link each chunk of text to the corresponding pictures.






Shading: Linking the Website Together
In this bathrooms Bury St Edmunds website for a bathroom company in our home town of Bury St Edmunds, the semi-opaque shading in the masthead forms a visual line down to the white shading in the main content, thus adding visual cohesion to the website,


In the design for Etica NHS Consultancy, a Suffolk company offering a range of services from NHS Consultancy to project management, the line down the page was again kept via semi-opaque grey shading overlying the top visual.


Shading: Highlighting Important Information
To go back to the driving school website above, shading is used to draw the eye to important strengths of the driving school - and to separate each point. It is also used to draw the eye to the testimonial on the right.

Borders

Sometimes, borders can look a bit dated - as with this Theatre Winches website that we did a few years ago. The borders do, however, draw the website together.






A more modern approach, is to use thin borders - or just a change of colour between the background and foreground.








Drop Shadows
Many modern website (like the nursery website above) make use of subtle - or pronounced - drop shadows to add visual interest.

A slogan should tell a browser at a glance WHAT you do and WHY you are different from your competitors. Create ONE slogan that will catch the eye - don't muddy the waters by creating competing slogans or adding too much detail that diverts attention away from your main message.

Our own website - Affordable Web Design Bury St Edmunds offers small businesses in the Bury St Edmunds area high-quality, websites that are pleasing to look at AND that are affordable as well. Our slogan "Attractive, Affordable Websites" says it all in three simple words. The fact that our web design business is based in the Bury St Edmunds area is stated in the headings below the masthead - it doesn't need to clutter up the masthead.

Note that our company name is well to the left and doesn't compete with the slogan - unless you are a well-known brand, you need to make people interested in your product/service before they care who you are. The main justification for having your company name so prominent that it competes with your slogan is if the name fulfills the telling people WHAT you do part of the slogan.

Subheadings help browsers to quickly assess what information a page contains; they also help break the text up and make it look less daunting.

For anyone interested in SEO, use h1 tags for the main page heading and h2 - h6 tags for the other subheadings. For this Website Design Suffolk page, we are targetting the terms "Website Design Suffolk" - hence the h1 tag (which is THE most important in SEO terms) says "Website Design Suffolk" and the h2 tags repeat these keywords in various ways - eg "Quality Website Design Suffolk and South Norfolk" or "Last Suffolk Website Design" and "Previous Suffolk Website Design". Don't overdo this however or you could get penalised for spamming - we do use some subheadings that are not keyword rich.

This Airport Transfers Suffolk website uses tick boxes to highlight different selling features. Whilst these sales points are brought out in the text, the tick boxes give the user an "at a glance" view - and they also provide visual interest.