Define the audience of your website

Your audience can be:

• People logging on to your website at home: It is safe to assume that people may have a slower modem connection at home so the design of the website should be simple with less of flash files and animations that take time to upload.
• Fans of a rock group: Given the target audience, the website design would require the use of high-end technology such as animations and flash files for that special experience.
• People looking for constant updates on services: Your target audience can be people looking for the latest news updates on the stock market. The design of the website should be such that it makes updating simple, fast and effective.

Based on the purpose of the website, write and design the content such that it makes for easy navigation, is user-friendly and attractive to look at. Your aim should be to provide all information the client is looking for within the first three clicks of the mouse. The content and design should be able to make the right impact in the first twenty seconds; if they cannot, the viewer is likely to move to another website providing the same set of services that you are doing.

It is mandatory for all companies in the UK to clearly state the company registration number, place of registration and registered office address on their website/s. Paper Hat suggests the best place to put it is in the "About us" or "Legal info" page of the site.

Basic framework for your website

Once you have decided on the purpose and the target audience of your website, your next step should be to create a flowchart for content presentation and navigation. You can do this through a popular website framing technique known as wireframing. Wireframe is nothing but a visual guide that helps you design your content interface. You can draw a wireframe using packages such as Microsoft Word, PowerPoint or Adobe Illustrator. Once the skeleton is ready, you can show it to your client for his or her feedback. Then again, discuss it with your content and design team so that they are on the same page as to the functionality and look of the website. You can also create a wireframe to define the levels of navigation.

Right technology for your website

Web technology: The technology you use for your website will depend on your purpose and target audience. Apart from this, keep in mind that the technology should be fully compatible with all previous and updated versions of commonly used browsers such as Mozilla Firefox, Netscape Navigator, Microsoft Internet Explorer, Safari and Opera. Paper Hat recommends that you avoid technologies such as Javascript, HTML frames, Flash and AJAX as they may not be picked up by all browsers.

Screen resolutions: Keep your screen resolution to the commonly accepted resolution ratios: 640 x 480, 800 x 600 and 1024 x 768. Use a higher resolution when you have a limited audience and you know for sure that they have access to technology that allows for screening high resolution text and images.

Special effects: It is better not to use too many special effects in website design, unless they specifically serve a purpose. There are many people who surf the Internet from their homes and do not use high speed modems. So if your page doesn't load within the first ten seconds, chances are that they would move on to another website.

Design your website

The design of the website should highlight the messages you want to convey and should not take the focus away from them. Keep the following points in mind while designing your website.

Content presentation

• Create separate buttons for all the products and services you offer.
• Use linked text and separate pages for descriptions.
• Write short, clear and concise text to aid online reading.v
• Where possible, provide information in bulleted points rather than in paragraphs.
• Prioritize and rank information to maintain logic and flow.
• Maintain the right contrast between the foreground and background colours for easy reading.
• Keep the imagery simple for easy readability and faster browsing.
Web typography
• Use a font that people are most likely to have on their computers.
• Use different font sizes to differentiate between page headings, section headings and body text.
• You can also use separate colours for fonts to differentiate between headings, section headings, and paragraph text.
• It is harder to read on screen than on paper; keep the size of the font big enough for comfortable reading.
Navigation
• Develop a simple and consistent navigation scheme.
• Use hyperlinks to make navigation easy.
• Present links clearly and use clear, concise words or images relevant to the information they lead to.
• Provide navigation bars on each page to enable easy movement.

Locating information

• Include a sitemap and a search facility to locate information on the website.
• Use hypertext to provide contextual linking to related information and content.
• Ideally, the user should be able to locate the information within three clicks of the mouse.

The perfect browsing experience for your website

Visual effects: Give your website a clean, uncluttered look. Packaging is important but remember people visit your website for a specific purpose and that is what the visuals should help showcase. There should be a perfect combination of content and design to highlight and focus on the marketing and communication objective of your website.

Branding: The effective and systematic use of colour, imagery, typography and graphic symbols plays an important role in highlighting the key messages and creating a brand statement that defines your website.

Consistency: Maintain a consistency in the design and placement of content for a smooth browsing experience. A person going from one page to another should have to look around for the navigation buttons; if they are at the top in the home page then they should be at the same position in the following pages. The same should be the case with the use of fonts. Choose an easily readable and the same font type on each page for a uniform look.

White space: Use white space effectively to give volume to your page and focus on the content on it. White space is an effective tool to structure and separate content.