Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools

Internet Communications and Websites Website Lifecycle Plan Design Author Test Launch Maintenance This presentation will focus on several areas that are important to consider when starting to design web pages and web sites – these are outlined on the slide. siteplan.ppt

Internet Communications and Websites 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 This presentation will focus on several areas that are important to consider when starting to design web pages and web sites – these are outlined on the slide. Design to minimise Maintenance costs siteplan.ppt

Plan, Design and Author Steps Internet Communications and Websites 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 This presentation will focus on several areas that are important to consider when starting to design web pages and web sites – these are outlined on the slide. siteplan.ppt

Plan Identify purpose and goals ? suggestions

Plan Identify purpose and goals Training Information Teaching Education Reference Entertainment Sales ……..

Plan Analyse Target Audience Internet Communications and Websites 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) A web site is generally created for a specific purpose and for a specific audience. The purpose and audience will affect the design of the site. It is important to consider the identity and characteristics of your intended audience, so the design matches the expectations of your users. This includes evaluating the type of hardware and software available to the 'typical' users of your site. For example, if users are likely to be accessing the site via a modem (e.g. distance learning students), they may be unwilling to wait for large images or videos to download. The technical skill levels of your users will determine whether you can include advanced design features and internet technologies on your web site, or whether you make the whole site as straightforward and unchallenging as possible. The content of your web site should be understandable, unambiguous and appropriate to the intended users. This may be influenced by their subject specialism, language or culture e.g. 03/04/99 = 4th March in the USA, but 3rd April in the UK. The first page - the home page - should immediately show what the site is about, what type of information it contains, and how to get to that information. It should also clearly indicate who the site belongs to. At the same time, it should attract the user and motivate him/her to start using the site (and hopefully return to the site on future occasions). The contents of the home page should reflect the key topic categories of the site and should contain links to those categories. siteplan.ppt

Plan User-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

Design Content 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

Internet Communications and Websites Design Structure Sequence Hierarchy Web Sequences Sequential - The simplest way to organize information is to place it in a sequence. Sequential ordering may be chronological, a logical series of topics progressing from the general to the specific, or alphabetical, as in indexes, encyclopedias, and glossaries. Straight sequences are the most appropriate organization for training sites, for example, in which the reader is expected to go through a fixed set of material and the only links are those that support the linear navigation path. Hierarchies Information hierarchies are the best way to organize most complex bodies of information. Because Web sites are usually organized around a single home page, hierarchical schemes are particularly suited to Web site organization. Hierarchical diagrams are very familiar in corporate and institutional life, so most users find this structure easy to understand. Webs Weblike organizational structures pose few restrictions on the pattern of information use. In this structure the goal is often to mimic associative thought and the free flow of ideas, allowing users to follow their interests in a unique, heuristic, idiosyncratic pattern. This organizational pattern develops with dense links both to information elsewhere in the site and to information at other sites. Although the goal of this organization is to exploit the Web's power of linkage and association to the fullest, weblike structures can just as easily propagate confusion. Ironically, associative organizational schemes are often the most impractical structure for Web sites because they are so hard for the user to understand and predict. Webs work best for small sites dominated by lists of links and for sites aimed at highly educated or experienced users looking for further education or enrichment and not for a basic understanding of a topic. Graphic Credit: Yale Style Guide, http://info.med.yale.edu/caim/manual/contents.html siteplan.ppt

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

Sitemap Available on all pages

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

Design Navigation Clarity visual clues to inform your user about their location within your 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

Design Common 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

Design Visual 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)

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

Design Visual 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

Design Visual design and page layout Internet Communications and Websites Design Visual 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 * 3 layout techniques: Stylesheets - technically the ‘right’ way: separates content from presentation allows content to be accessible on multiple devices and browsers however: problem with legacy browsers & different browser implementations Frames - Commonly used for layout, to maintain navigation bar on screen. Often poorly implemented: orphan pages frames too small for content bookmarking problems external link problems Tables- Commonly used for layout can slow page download often badly coded (nesting) not accessible to all browsers siteplan.ppt

Design Images Acceptable use Speed issues - download & render not distracting not gratuitous images provide information images complement/relate to content images provide ‘brand’ identity no text in image (avoid accessibility/localisation problems) Speed issues - download & render Consistency

Design Images 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

Design Colour 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)

Design Typography - content Style for online documents Be concise and consistent Use lists where possible Make printing easy

Design Typography - 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

Design Typography – 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

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

Design Page Layout Simplify and be consistent pages (or sections) share the same basic layout themes editorial conventions hierarchies of organisation

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

Design Tools 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

Authoring Author and test prototype Important to identify design faults before full-scale production

Authoring Test design using prototype Your aim as a web designer is to make a site accessible to your target audience(s) widest audience possible

Authoring Test design using prototype Internet Communications and Websites 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 siteplan.ppt

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

Web Design Resources Yale Style Guide WebMonkey Builder.com 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 Page http://www.webpagesthatsuck.com/ Jacob Nielsen - Top Ten Mistakes in Web Design http://www.useit.com/alertbox/9605.html Web Page Design for Designers http://www.wpdfd.com/index.htm HTML Help http://www.htmlhelp.com/

Internet Communications and Websites Web Design Resources Testing tools W3 HTML Validation http://validator.w3.org/ Usability Testing Checklist http://www.bbk.ac.uk/ita/s10/usactivity.doc Accessibility - Bobby http://bobby.watchfire.com/bobby/html/en/index.jsp Text Only - LynxView http://www.delorie.com/web/lynxview.html Vischeck http://www.vischeck.com/ W3C HTML Validation Validate your HTML code using the World Wide Web Consortium's Markup Validation Service. http://validator.w3.org/   Usability Testing Usability Testing allows you to see your website through the eyes of your users. You can test a prototype of your web site or an already existing web site to see what type of improvements are needed to make the site more effective for your users. http://www.bbk.ac.uk/ita/s10/usability_exercise.pdf Accessibility - Bobby Bobby is a validation tool that will check your HTML code and suggests changes in order for your website to conform to universal accessibility standards. http://bobby.watchfire.com/bobby/html/en/index.jsp Text Only - LynxView If you do not have lynx (a non-graphical browser) on your server, to test your pages, use this site to produce a document simulating how your page would be viewed in Lynx (a text only browser). http://www.delorie.com/web/lynxview.html Vischeck Vischeck can show you what your image looks like to people who are colour blind, people with glaucoma or macular degeneration, elders and children. Specifically you can submit a URL and it produces a copy of your site as it would appear to someone with red/green colour blindness. http://www.vischeck.com/ siteplan.ppt

Internet Communications and Websites Web Design Tools Target audience analysis checklist Site map Storyboard Prototype siteplan.ppt