Creating Video

You are here : HomeCreating Graphics for the WebCreate Navigation Buttons

introduction4.1 Navigation buttons


As you have already realised when researching web graphics for section 1, navigation buttons often make use of very clear simple icons for instant recognition: for example, a house to take you back to a homepage, or a lowercase letter ‘i’  to link to information, while a question mark often denotes a help page and online shopping sites use a stylized shopping basket or trolley. Easily recognisable icons such as these allow the site visitor to understand immediately what each button does.

Ideally each button should have a text label in addition to the icon. Sometimes the text is actually a graphic that uses text within it. This gives the designer greater control over how the text looks, and means that they do not have to rely on the visitor having that particular font installed on their computer. Images are always optimised to make the file size as small as possible without losing quality.

Increasingly, websites are using Adobe® Flash to create more interesting, animated buttons. Like navigation bars in Section 3, navigation buttons often make use of contrasting or complimentary colours, especially on rollover effects. Refer to Section 2 for more on colours and contrast.

Below are some examples of navigation buttons.

Brands Hatch Race Track

Brands Hatch

These buttons are taken from the website for Brands Hatch race track. The site is manly aimed at adults who are interested in motor racing. The buttons form part of a longer, scrollable navigation area. Each button is the same shape, and includes a photograph and text. Each button has a very different style. There are no rollover effects.

Each button is a PNG file of 165 x 190 pixels and is approximately 48KB.



The buttons above are taken from the Newsround website. The site is aimed at children from the ages of 6-12 who are viewers of the Newsround television showl. Each button is a mix of both text and graphics. The icons, clearly show the sections of the website they will take the visitor to when clicked. Each button is the same style, dark purple with a white icon and text. The circle changes colour on mouseover. Each button is 110x 100 pixels.

Essex and Suffolk Water

Essex water

The buttons above are taken from Essex and Suffolk Water.  This is a corporate website aimed at adults, so the design is clear and fuctional, rather than fun. The buttons are simple graphics with text that explains what each button does.

A very subtle rollover effect changes the shading on the button when the user moves the mouse over it. The buttons fit the house style for the site, which uses the blue of the company logo.

Previous PageMain Site Indexsection indexNext page