Website Planning and Design

1. Website Planning and Design Objectives • Plan anddesign a successful website • Use web design principles and tools

2. Website Lifecycle Plan Design Author Test Launch Maintenance

3. Website Lifecycle High cost when design errors not identified until later. Cost of fixing mistake found in test phase = 100 x cost if found in planning phase. Plan Design Author Test Launch Maintenance Design to minimise Maintenance costs

4. Plan, Design and Author Steps Plan • Establish site purpose & goals • Analyse target audience(s) Design • Content • Structure • Navigation • Visual design & layout Author Prototype • Build prototype • Test prototype

5. PlanIdentify purpose and goals ? suggestions

6. PlanIdentify purpose and goals • Training • Information • Teaching • Education • Reference • Entertainment • Sales • ……..

7. Plan Analyse Target Audience • Who are your target audiences and what do they need? Consider: • Ranges of skills/interests • Age • Network speed • Available hardware/software • Information needs (ref: Target Audience Checklist)

8. PlanUser-Centered Design “The goal is to provide for the needs of all of your potential users, adapting Web technology to their expectations, and never requiring the reader to simply conform to an interface that puts unnecessary obstacles in their paths” -Yale Style Guide

9. DesignContent • The heart of a web site is the content • When choosing content: • only what the audience needs • group logically for the audience • break text into manageable chunks (“chunking”) • use lists • many headings

10. DesignStructure • Sequence • Hierarchy • Web Graphic Credit: Yale Style Guide, http://info.med.yale.edu/caim/manual/contents.html

11. Design Tool • Site map • hierarchical diagram showing relationships between sections and/or pages

12. Sitemap Available on all pages

13. DesignNavigation • Navigation Submenus • buttons, pop-up menus, links, text equivalents • www.johnlewis.co.uk • www.amazon.co.uk • www.ibm.com

14. DesignNavigation • Clarity • visual clues to inform your user about their location withinyour web site • breadcrumbs, consistent page naming, link/non-active link colours on navigation bars • provide easy return to the homepage • use “navigation bars” which are easily understood • provide overview • sitemap

15. DesignCommon Navigation Problems • Avoid inconsistency • establish a visual hierarchy • put navigation elements in consistent position • Avoid dead-end (orphan) pages (no link to other website pages) • primary/secondary navigation bars • links • take opportunity to draw users into other sections

16. DesignVisual design and page layout • some design conventions exist for placement of elements • navigation • top and left of page(with text links repeated at bottom) • header and footer links • logo top left or centre (maybe link to home page)

17. DesignVisual design and page layout • Analyse page design grids • Recommended reading Yale Style Guide: http://info.med.yale.edu/caim/manual/contents.

18. DesignVisual design and page layout • short web pages • home pages • documents to be browsed or read on-line • pages with large images • long web pages • easier to maintain • easier to download or print • similar to paper structure

19. DesignVisual design and page layout • 3 layout techniques • stylesheets • frames (out of date) • tables (XHTML only permitted for data not layout) • 2 page width options • fixed width • variable width – fluid layout *

20. DesignImages • Acceptable use • not distracting • not gratuitous • images provide information • images complement/relate tocontent • images provide ‘brand’ identity • no text in image (avoid accessibility/localisation problems) • Speed issues - download & render • Consistency

21. DesignImages • Graphic file types: JPEG, GIF, PNG • Advantages of GIF • All graphic web viewers support GIFs • GIF supports transparency and interlacing • Advantages of JPEG • Faster to download due to compression • Supports full-colour images (24-bit “true colour”) • Advantages of PNG • No royalty due to Unisys • Increasingly popular particularly with open source

22. DesignColour • Choose high contrast text/background colours • Keep colours to a minimum • Use colour to unify elements • Use white space to separate elements • Symbolism in colour • Global audiences and colour • Disability and colour (10% of men are red/green colour blind)

23. DesignTypography - content • Style for online documents • Be concise and consistent • Use lists where possible • Make printing easy

24. DesignTypography - legibility • Line length optimal for print is 30-40 chars – line across web page is too long • Increase line spacing by 25-50% • Limit no of fonts used per page • Design for browser independent use of fonts • Readability of centred text is 60% worse than left justified so avoid centering • Justified text less legible on screen so avoid • CAPITALS ARE HARDER TO READ SO AVOID

25. DesignTypography – cross-platform • Different sizes of ‘standard fonts’ • left column is PC • right column is Mac • Win fonts appear 1-2 pt large than Mac • Use font family not just single font

26. DesignPage Layout • content should dominate (50-80%) • important info “above the fold” • place common page elements according to user expectations and conventions

27. DesignPage Layout • Simplify and be consistent • pages (or sections) share the same basic layout • themes • editorial conventions • hierarchies of organisation

28. DesignPage Layout • Simplify and be consistent • Headers • Image/Logo • Navigational Links • Footers • Origin of page • Age of page • Address http://www.redenvelope.com

29. DesignTools • Storyboard – from TV/advertising - diagram often hand-drawn explaining what a page will look like and demonstrating the ‘look and feel’ • Sample proformas storyboardproforma.xls

30. AuthoringAuthor and test prototype • Important to identify design faults before full-scale production

31. AuthoringTest design using prototype Your aim as a web designer is to make a site accessible to • your target audience(s) • widest audience possible

32. Authoring Test design using prototype • User standards • HTML/XHTML/CSS • Web Content Accessibility Guidelines • Validate • HTML – http://validator.w3.org • CSS – http://jigsaw.w3.org/css-validator/ • Accessibility – http://cast.org/bobby

33. Authoring Test design using prototype Test your prototype in • different graphical browser types IE, Mozilla Firefox, Netscape, Opera • different browser versions • text browsers Lynx • multiple platforms – Windows, Mac, Unix

34. Web Design Resources • Yale Style Guide http://info.med.yale.edu/caim/manual/contents.html • WebMonkey http://hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial1.html • Builder.com http://builder.cnet.com/webbuilding/pages/Graphics/CTips2/ss13.html • HTML Bad Style Pagehttp://www.webpagesthatsuck.com/ • Jacob Nielsen - Top Ten Mistakes in Web Designhttp://www.useit.com/alertbox/9605.html • Web Page Design for Designers http://www.wpdfd.com/index.htm • HTML Helphttp://www.htmlhelp.com/

35. Web Design Resources Testing tools W3 HTML Validationhttp://validator.w3.org/ Usability Testing Checklisthttp://www.bbk.ac.uk/ita/s10/usactivity.doc Accessibility - Bobbyhttp://bobby.watchfire.com/bobby/html/en/index.jsp Text Only - LynxViewhttp://www.delorie.com/web/lynxview.html Vischeckhttp://www.vischeck.com/

36. Web Design Tools • Target audience analysis checklist • Site map • Storyboard • Prototype