Unit 14 Website Design

Introduction

Aim

To enable learners to understand the concepts of website design and apply their own creativity in designing and developing interactive websites.

Unit abstract

The internet is perhaps the most important IT development of the last few decades; it provides new ways to communicate and share information. It has also revolutionised the way people and businesses use IT. Businesses can now take part in a global marketplace, widening their scope for potential customers, all from a local base and with relatively low start-up costs. The need for good web designers and developers continues to grow as more and more companies realise they must develop a web presence and keep it maintained and updated. As web technologies develop, there is an increasing need for websites to be interactive. This allows two-way communication between the user and the website. The number of websites on the world wide web has increased dramatically and competition is very fierce. This means that designers must employ increasingly sophisticated techniques to capture interest, as well as ensuring that an appropriate company image is presented. Usability issues, such as navigation methods, must be considered carefully. A poorly-designed structure could result in users becoming confused or frustrated and navigating away from the website. Learners will begin this unit by evaluating existing websites, in the context of cross-platforms,range of browsers, and design features. Designing websites, which are accessible to all types of users is a fundamental aspect of any website design. This unit also considers the whole process from identification of need, design, implementation, testing, maintenance and review. It is important that learners do not just develop skills in specific techniques but are also able to select when and where they are most appropriate, basing this decision on client and user needs. As with any field of IT, a comprehensive understanding of the relevant legislation and guidelines is always fundamental.

Learning outcomes

1 Understand website design concepts

Users: types eg expert, regular, occasional, novice, special needs; requirements eg psychological, cultural, social and environmental, health and safety, education and work.
Site analysis: purpose eg communication, real-time information, commercial, government, education, business, entertainment, downloading/uploading, web storage; fit for purpose eg meets organisational and site objectives; planning eg storyboarding, structure, hypermedia linkage, search engine key words, graphical design, user interface, audio/video sources, animation, text design; maintenance eg plans, logs, disaster recovery, testing.
Accessibility: features eg alternative text, resizable fonts, support for screen readers,adjustable fonts; current standards and legislation eg Disability Discrimination Act, Data Protection Act, e-Commerce Regulations Act, Computer Misuse Act, W3C validation, copyright and intellectual property rights
Design: rules and heuristics for good website design; accessibility; functionality eg timings,navigation, ease of use, user-friendliness; evaluation tools eg W3C Mark-up Validation Service
Environment: features eg Uniform Resource Locators (URL), Hypertext Mark-up Language (HTML), Dynamic Hypertext Mark-up Language (DHTML), Extensible Mark-up Language (XML), JavaScript, Java Applets, plug-ins, client and server-side scripting languages; multimedia eg animation, sound/visual effects; hardware and software requirements eg computer platforms, operating systems, application software; browser behaviour eg execute scripting languages, display Cascading Style Sheets (CSS), applets, Common Gateway Interface (CGI).

2 Be able to design interactive websites

Identification of need: nature of interactivity eg online transactions, static versus dynamic; client needs and user needs eg image, level of security, development timescales, maintenance contracts, costs, search engine visibility; end user need eg appropriateness of graphics, complexity of site, delivery of content
Design tools: concept designs eg mood boards, story boards; layout techniques eg frames,tables, block level containers, inline containers; templates; colour schemes; screen designs.

3 Be able to implement interactive websites

Structure: layout of pages; navigation; format of content; Cascading Style Sheets (CSS); page elements, eg headings, rules, frames, buttons, text and list boxes, hyperlinks/anchors, graphical images, clickable images/maps; interactive features eg product catalogue,shopping cart; images and animation
Content: correct and appropriate; reliability of information source; structured for purpose eg prose, bullets, tables
Development: mark-up languages eg (HTML), (XHTML), (DHTML); client side scripting languages eg JavaScript, Visual Basic (VB) script; features and advantages of software languages; web authoring software tools
Tools and techniques: navigation diagram eg linear, hierarchy or matrix; building interactivity tools eg pseudo-code for client-server scripting; adding animation and audio/visual elements;ensuring compliance with W3C; meta-tagging; cascading style sheets.

4 Be able to test interactive websites

Review: functionality testing (user environments, links and navigation); content; check user requirements; user acceptance; audit trail of changes
Mechanisms: types eg browser compatibility testing, platform testing, script-language testing; valid (HTML) code; checking functionality against requirements, check internal and external hyperlinks (web files, web documents, images), error detection, error messages, dry running.
Supportive documentation: test plan; test results; programmer guidance; user guidance: onscreen Help.

Resources

McFarland D – CSS: The Missing Manual, second edition (Pogue Press, 2009) ISBN 9780596802448
McFarland D – Dreamweaver CS4: The Missing Manual (Pogue Press, 2009) ISBN 9780596522926