Graphics for the Web
Graphics for the Web
An old adage states that "a picture says a thousand words".
This is particularly true for web pages as surfers are impatient and generally have the attention span of a goldfish - about seven seconds! If they cannot see what they are looking for in this time they move on to another site. And a web page that is text-heavy will not get read. There are ways to improve the readability of text-only pages, and we will deal with this in another guide, but, for now, let us look at the use of graphics on your website.
What graphics can do for your site
In a nutshell - draw attention: to your page, your product, your service.
They can also create a pleasing visual experience which will encourage your visitors to go deeper into your site.
Also, professionally designed and applied graphics can convey a professional image to your business. The opposite is even truer - how often have you been to a site and gone "Yuk!" and quickly moved on to another? Poor graphics can destroy your credibility as the implications drawn are that you a) cannot afford to have a professional site and are probably strapped for cash and a business risk, b) lack taste and that your products are similarly tasteless and "cheap", and c) that you are not serious about your business or too amateurish or naive to take seriously.
What do we mean by "Graphics"?
Not just the images on your site - the photographs and "Buy Now" icons - but also every non-textual item on every page. Actually, text comes into it too, particularly where colour and font face are concerned, but we'll deal with this in the Text Guide. Your banner, menu column, the sidebar with advertisements or links, the trailer with the copyright and privacy policy links - these can all be considered graphics because the composite of these items, the web page as a whole, forms a graphical representation of your business image.
Style
So, how should your website look?
Well, there are several styles to be considered which can be summarised as either relevant or abstract. The relevant style will contain images which can easily be associated with your business, the abstract style will provide an artistic effect without any relevance to your business or your products. This latter style is currently fashionable for large corporate websites and, in the opinion of the writer, creates an artistic if rather sterile effect. There is no reason why an artistic effect should not also be relevant, though this involves more work in the acquisition and selection of images, and this is the ideal style for a website conveying elegance and a business message simultaneously. Colours also play an important part in style and should be chosen carefully to avoid tasteless clashes which have a negative effect, and should also reinforce the business's colour scheme as used in its signs, letterhead and logos.
Banners, Logos & Business Names
Logos, too, come in several flavours. The simplest is the stylised monogram using the first letters of the business or owner's name. These should be in the same font face as the business name itself to reinforce the branding, but can have additional features such as coloured or pictorial backgrounds, drop shadows, distortion etc. Relevant images are also popular as logos - a hair stylist, for example, might use a head with the face paled out to make the hair prominent. Abstracts are also popular, though frequently overdone - such as the ubiquitous "swish" which can be seen on almost every other site. Symbolism, too, is popular - circles, squares, stars, trees, waves, animals, birds (the Weaver Bird is the SiteSpinners symbol). See our portfolio page for examples of relevant and symbolic logos.
Banners allow space for more complex designs and can combine colour, symbolism, abstraction and relevance. Whatever combination is chosen, care should be taken to ensure that there is enough of a link between individual items for the overall effect to work. Also, the number of items should be limited to avoid a confused effect. Where banner advertising is used, this should be sufficiently spaced from the design to avoid conflict. Current trends place the advertisement above or below the actual site banner, or far to the right.
Business Names can be a problem if too long. This can be overcome by using just the initials or by "blocking" them vertically or diagonally, using a different colour for the first letters. This is just one of the possibilities. A relationship, pictorial or textual, between the Business Name and the Logo reinforces the image and makes them both more memorable.
Icons and Graphics
Icons can be used very effectively to draw attention to particular items, but should be used sparingly or they will be ignored as clutter. Where a large number of icons is necessary, it is a good idea to use different colours and designs (red star, yellow exclamation mark,etc.,) to categorise and separate the items being highlighted. Icons should also have few colours, two or three at the most, to be effective. The gif format will be adequate in most cases and will keep the icon small (20x20 pixels at most). Larger icons can detract from text. Where more complex icons are required, such as small (very small) photographs, the jpg (or jpeg) format will be more suitable. A border sometimes helps to make an icon more prominent.
Photographs
Photographs can enhance a website enormously - products and services can be clearly depicted, premises shown, and pictures of staff can increase the "personal contact" element. However, the indiscriminate use of photographs can also damage a site by causing slow loading which will result in surfers abandoning the site, or when used as a substitute for textual content which will result in poor Search Engine placement. When a high pictorial content is necessary, all photographs should be optimised for the web and should also carry "mouseover" TITLE and ALT tags (this is web designer speak, but you, the site owner, will need to submit descriptions of each of your photographs to your friendly web designer). There are two reasons for this: surfers will be able to see descriptions of the items in your photographs when they place the cursor (pointer) over the picture, and Search Engines will pick up the descriptions for classification. Another good reason is accessibilty - vision impaired users who use text-to-speech converters will be able to "see" your products and services.
Optimisation of a photograph for the web can involve many processes, but you can help the web designer (and save some money) if you resize your photographs before sending them - most digital cameras come with software which allows you not only to download and view your pictures on your PC, but also to enhance them. The "Image" menu will contain a "Resize" item which is used to shrink the picture to a smaller size (3"x5" max for e-mail transmission, particularly when several pictures are being sent to the designer). The photographs themselves should also be chosen carefully if costs are to be kept down - pics which are severely under- or over-exposed will take a lot of designer time to correct, as will pics shot at bad angles where the vertical and horizontal perspectives will need adjustment.
Portraits and self pics: These should not be overused. By all means put a pic of yourself on the "Contact" page, but avoid HomePage self-portraits unless you are an author, painter or celebrity of some sort. Carefully used pics can enhance the "personal contact" element of your site, but overuse smacks of ego - particularly when your business name is your personal name and your logo is a monogram of your initials! If you have employees, a "Meet the Team" page with pics of your staff and short biographies (if appropriate) or job function narrative will help create the personal element.
Top