Web page design

1. Web page design For Learning Resource Centre Staff

2. Web Page Design Aim To deliver tips and techniques to improve the web page design skills of LRC staff • Objectives • To become aware of basic web page design elements • To recognise and understand basic navigation techniques • To be able to plan a web page • To be aware of accessibility issues • To recognise and understand layout techniques.

3. Introduction Learning Resources staffplan and design their own web pages to provide access to a wide range of resources. Effective planning and designing aids the learners in accessing and retrieving the resources. This is not a technical guide to developing a web page but an overview of the elements which you need to consider.

4. What is a Web Page? • Web pages are what you look at on the internet. • Web pages are made up of either HTML (Hypertext Markup Language) or Web Authoring tools e.g. FrontPage or Dreamweaver. Flash is another way of creating web pages and movies. • It is easy to be confused by all the web jargon.

5. Planning Process The first stage is the planning process. • Set objectives: Why do you need a web page? What do you want to achieve? • Identify the potential readers of your web page so that you can structure the page design to meet their needs and expectations e.g. teaching staff, learners, support staff. • Remember that building a web page is part of an ongoing process, not a one-time project with static content.

6. Information Design • The design of the information must be user-centred. • What do you want it to look and feel like? • College • LRC • Catalogue • Does it need to confirm to an established design e.g. an in-house college design. • The key words for all elements of the design are simple and consistency: • Colour: dark colours make a web page look less accessible than light colours • Layout: complicated layouts confuse your readers • Structure: simple and well organised • Graphics: a few rather than many

7. Tips for Writing • Make sure your writing style is appropriate for the intended audience and adapt it for the web. • Break up the text. A wall of text is both boring and intimidating. • Use: • A smaller number of words • Sub-headings • Bulleted lists • Highlighted keywords • Short paragraphs • A simple writing style • Simple language without jargon. • More information on writing for the web.

8. Navigation • Navigation is the pathway users take to move through your web pages. • Make sure the page is easy to navigate and for users to find what they want, or they will go somewhere else. • Users want to find information quickly. • Navigation must be easy and intuitive to use.

9. Navigational Aids Navigational aids include: • Buttons • Menus • What's new pages • Tables of contents • Internal linking between pages • Search features • Remember: as few clicks as possible to reach the information required.

10. Graphics and Multimedia • Make effective and selective use of graphics; consider what you want them to communicate. • A few well chosen graphics are preferable to a lot of irrelevant graphics. • Embed graphics as part of the text. • Avoid graphics that have no relation to the surrounding text. • Use animations with care so that they do not become irritating. • Add sound and video clips in moderation and include transcripts.

11. Layout • A consistent layout and organisation is vital to getting users to read your web page. • Remember the useable area of typical computer screens is smaller than most magazine and book pages, limiting the information you can deliver on a Web page without scrolling. • The web page should be clearly laid out with logical and well organised sub-sections. • Provide links to other websites or pages only if they are relevant. • Do you need a search option for users? This is important if the site is too large for users to access and read all the information.

12. Updating • Check the information regularly to make sure the contents are up to date. • Check any links are still working. Find and fix broken links • Put a date on the page so users know how current the information is and change this every time you update the page.

13. Accessibility 1 • Accessible design is good design. • Web pages that are accessible to users with special needs (the partially-sighted, for example) will also be accessible to users with slow modem connections, older computers, text-only web browsers, and so on. • Choose your colour schemes carefully: • Make sure there is good contrast between text and background colours. • Avoid strongly patterned backgrounds.

14. Accessibility 2 • Use alternative text (alt tags) for images. This helps people using special software to read the page aloud • If you are using audio and video in your web pages, make sure you provide text transcripts and descriptions. • Validate your pages by using a web-based service that analyses web pages for accessibility to people with disabilities as well as their compatibility with various browsers • Web Accessibility Initiative

15. Further information and help • Page design • Accessible web design • Designing websites

16. Activity Complete the quiz to test some of the things you have learnt.