Web Design Suffolk

The easiest way to make an attractive, attention-getting website is to use good visual(s). Visuals can be photos or illustrations or sometimes just even gradients in shading.

1 How to Use Visuals in the Masthead

A large visual the width of the masthead is a simple (though not compulsory) way to make your website look professional.



If you want to have different, smaller visuals then consider putting them into an evenly spaced “grid” and covering the joins with evenly-spaced “gridlines”. For best effect, ensure that the colours in the visuals are compatible with each other – and preferably with the colour scheme in the rest of the website. As this Welding and Fabrication Services website shows, this can turn a simple collage into a more edgy, compelling affair:



Where appropriate, make the visuals tell a story. If your hotel has a swimming pool or is on a safe, sandy beach or is surrounded by rolling, green fields or has cosy log fires and oldie oak beams, then don’t just mention this somewhere tucked away in paragraphs of text: show it up front in the visual.

2 How to Use Visuals in the Content

When using visuals in the content, it is often most effective to intersperse them with the text so that they illustrate and validate what is being said rather than sticking them all in a group at the top or bottom. In this website for an Armagnac Chateau, we carefully selected the photos to illustrate the “rural tranquillity” and “historic charm” and used very subtle shading to tie the visuals and the paragraph together.



3 How to Use Visuals in the Left-hand Column or Sidebar

In a two column design, the smaller column can be used to provide general visual interest. For our own Suffolk Web Design site, we used the left-hand column to display examples of designs that we have done for previous customers; this provides examples of our work for people to see as they read the site.



4 How to Find Sources of Visuals
For some websites, the customers can supply you with photos of their establishment (hotel, pub, restaurant, health centre etc) or their portfolio of work (carpentry, gardening, tiling, building, engineering sites etc). For others, you may need to look elsewhere. For an online source of free photos check out (but read the individual terms and conditions before using):
www.sxc.hu/
office.microsoft.com/en-us/clipart/default.aspx
www.flickr.com/
www.geograph.org.uk/
www.freefoto.com/index.jsp

For a good source of cheap photos (often just £1-£3 per photo!) try:
www.stockxpert.com/
www.istockphoto.com/index.php

5 How to Create Visual Interest When There are No Obvious Visuals

If your website has got no obvious visuals, then don’t despair. Look in one of the internet visual libraries above, and find a picture that represents the key business operations. For example, for the Project Management page, we used a photo (from a stock photo library) of two people looking at a computer screen containing figures and graphs:

For our own website design site, we decided to use an abstract image as the top visual:



For this UK Gnostic website, we used another stock photo to represent the religious books (leaving it as a gif file rather than the jpeg more normally used for photos gave it a grainy look and feel, thus adding to the slightly mystical feel of the photo) and then took a small section of this photo and stretched it to provide additional visual interest for the menu options and the quotes. We also created a background visual for the body section by typing various religious phrases (supplied by the customer) in different script fonts, sizes and coordinating colours and then varying the opacity, blurring some scripts etc:



Another technique that can be useful is to take key points (for example, your key selling points) from your text and turn them into a visual by simply putting them in a bold typeface on a different coloured background. In this Suffolk Quick House Sale site, the key selling points were put on boxes on the left – thus saving us having to clutter up the main text:



If you only have one visual and you would like more, then consider homing in on small section(s) of the main visual throughout the page. We used this technique to effect in the AA Suffolk site:



6 How to Reduce the File Size of Visuals

The file size of your visuals affects how long your website takes to load.

ALWAYS reduce a photo/visual down to the required size using a package such as Adobe Photoshop or Macromedia Fireworks and then save this reduced size visual. NEVER use your html code to size the visual.

Generally, save photos as .jpeg files and textual images as .gif files – when using Macromedia, NEVER use the default .png extension (a 37kb .jpeg file equates to a 620kb .png file!!)

If the above steps are not enough, then consider using a tool to optimise your graphics. An example is:
www.netmechanic.com/GIFBot/optimize-graphic.htm

7 How to Create Special Visual Effects

As a very brief overview, experiment with different free software for creating image slideshows. Two examples are:

www.lokeshdhakar.com/projects/lightbox2/
www.dynamicdrive.com/dynamicindex14/index.html

To create a video-effect (for example, zooming in and out of photos), experiment with:

www.microsoft.com/windowsxp/downloads/updates/moviemaker2.mspx