1. Planning and Designing a Website Session 8

2. Designing a Website Like all technical artefacts a website needs to be carefully planned and designed to be successful. In professional web design, most of the work is done in the planning and design phase, not the coding phase. Planning and design should incorporate the following activities: –Analysis of the business/organisational context of the proposed site –Analysis of the target audience for the site –Selection of appropriate technologies (e.g. XHTML, JavaScript, Flash) –Design of the information architecture of the site –Design of the business processes –Design of the user-interfaces –Design of the site content

3. The Business/Organisational Context The first stage in designing a website is understanding the business/organisational context you are designing for. –What is the mission of the business/organisation? How will the site help realise that mission? –What are the key activities of the business/organisation? Which activities will be included in the site (e.g. marketing, customer services, recruitment, sales)? –How does the business/organisation brand/identify itself? To what extent will the site fit in with, enhance, or extend, the current brand?

4. The Target Audience Understanding the target audience is key to designing a site that people want to use. –Who will the users of the site be? The general public? Academics? English speakers? Children? –What kind of connections will they have? Broadband? Dial-up? –What level of expertise with the technologies/processes you intend to include will your users have? Low? High? A broad range? –What special needs might they have? Visual impairment? colour-blindness? Poor literacy?

5. Selecting Appropriate Technologies The choice of technology should always be determined by the extent to which it promotes accessibility. –XHTML rather than HTML –CSS menus rather than JavaScript menus –gif or jpg rather than Flash If something can be done with simple text use text. If it cannot be done with text, consider an image. If text will not suffice, nor a simple image, then, and only then, should you consider using less accessible technologies like video or Flash movies.

6. Designing the Information Architecture Getting the information architecture (site structure) right is crucial to the navigation of the site. A poorly thought-through architecture will lead to poor navigation and confused users. The first stage in the design of the site structure is to identify each individual page in a site. When all the pages have been identified, they can then be sorted vertically into levels. Finally, pages need to be sorted horizontally. Horizontal sorting uses weighting (order of importance) to find the correct order for the pages. Digital tools (e.g. Visio) or paper sort cards can be used to create and refine site structure diagrams.

7. Designing the Information Architecture Site structure diagram

8. Designing the User Interfaces Web interfaces are designed with storyboards. Storyboards should communicate the finished look and feel of a web page to a customer. They should show: –page layout –colours to be used –formatting information (e.g. Fonts, font-sizes) –images to be used –indicative content They can also show technical information, such as the width and height of elements. Storyboards are best drawn with a professional drawing package like Visio or Illustrator Using a grid helps position elements effectively on the page.

9. Designing the User Interfaces Storyboard (Note: This is not a screenshot of the finished site! It is a design document).

10. Creating the Site Content Writing for the web is different than writing for other purposes. Because reading from a screen is 25% slower than reading from the printed page, web users tend to skim and scan more than read in depth. Thus, textual content should: –Be significantly (50%) shorter than printed media. –Use simple grammar and vocabulary where possible. –Should be clearly structured using different levels of heading and lists. Complex data should be presented in tables. –Should be ‘chunked’ and structured as hypertext.

11. Creating the Site Content There are several matters that need to be taken into consideration when writing for the Web. The first of these is brevity. Refrain from using overlong terms where much shorter ones will suffice. Bear in mind that the purpose of your website is to provide people with information. Thus, you should aspire to simplicity and brevity. You should always, at all costs, avoid the use of difficult grammatical structures, specialist vocabulary and acronyms. A further consideration when writing for the Web is consistency. A writing style guide needs to be consulted and used to ensure ones writing follows convention. The results of this will inevitably be superior navigation and a site that appears more professional. One final consideration is the use of bold, italics and capitals. At no point should any of these conventions be over- deployed. It is worth remembering that almost all browsers have a default setting that underlines links on the page, so underlining text that is not a link will inevitably cause confusion. Finally, remember too, that copious quantities of text in either bold or italics are difficult to make out on screen. Printed Media Version

12. Creating the Site Content Use simple language Don't use long words where short ones will do. The purpose of your website is to provide people with information - make it easy for them. Avoid difficult grammar and words, specialist vocabulary and abbreviations. Be consistent Follow a writing style guide. A consistent approach to writing will help people navigate your site, and make the site look more professional. Don’t overuse bold and italics. Never underline or type in CAPITALS Most default browser settings underline links on the page, so underlining text that is not a link causes confusion. Remember too, that large amounts of text in bold or italics are difficult to read on screen. Typing in CAPITALS makes it seem that you are shouting. Web Version

13. Hands-on exercises Now do –Hands-on 12, Planning and Designing a Website