Website Planning and Design

Objectives

Plan and design a successful website Use web design principles and tools

Website Lifecycle

PlanDesignAuthorTestLaunchMaintenance

Website Lifecycle

PlanDesignAuthorTestLaunchMaintenance

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.

Design to minimise Maintenance costs

Plan, Design and Author StepsPlan

Establish site purpose & goals Analyse target audience(s)

Design Content Structure Navigation Visual design & layout

Author Prototype Build prototype Test prototype

PlanIdentify purpose and goals

? suggestions

PlanIdentify purpose and goals

TrainingInformationTeachingEducationReferenceEntertainmentSales ……..

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)

PlanUser-Centered Design

“The goal is to provide for the needs of all

of your potential users, adapting Webtechnology to their expectations, andnever requiring the reader to simplyconform to an interface that putsunnecessary obstacles in their paths”

-Yale Style Guide

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

DesignStructure

Sequence

Hierarchy

Web

Graphic Credit: Yale Style Guide, http://info.med.yale.edu/caim/manual/contents.html

Design Tool

Site map hierarchical diagram showing

relationships between sections and/or pages

Sitemap

S IT E M A P S E A R C H

JU IC E S

S T A R T E R S P A S T A P IZ ZA

M E NU C O N T A C T

H O M E

Available on all pages

DesignNavigation

Navigation Submenus buttons, pop-up menus, links, text

equivalents www.johnlewis.co.uk www.amazon.co.uk www.ibm.com

DesignNavigation

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

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

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)

DesignVisual design and page layout

Analyse page design gridsRecommended reading Yale Style Guide: http://info.med.yale.edu/caim/manual/contents.

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

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 *

DesignImages

Acceptable use 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 & renderConsistency

DesignImages

Graphic file types: JPEG, GIF, PNGAdvantages 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

DesignColour

Choose high contrast text/background coloursKeep colours to a minimumUse colour to unify elementsUse white space to separate elementsSymbolism in colourGlobal audiences and colourDisability and colour (10% of men are red/green colour blind)

DesignTypography - content

Style for online documents Be concise and consistent Use lists where possible

Make printing easy

DesignTypography - legibility

Line length optimal for print is 30-40 chars – line across web page is too longIncrease line spacing by 25-50%Limit no of fonts used per pageDesign for browser independent use of fonts Readability of centred text is 60% worse than left justified so avoid centeringJustified text less legible on screen so avoidCAPITALS ARE HARDER TO READ SO AVOID

DesignTypography – cross-platform

Different sizes of ‘standard fonts’ left column is PC right column is Mac

Win fonts appear 1-2 pt large than MacUse font family not just single font

DesignPage Layout

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

DesignPage Layout

Simplify and be consistent pages (or sections) share the same

basic layout themes editorial conventions hierarchies of organisation

DesignPage Layout

Simplify and be consistent Headers Image/Logo Navigational Links Footers Origin of page Age of page Addresshttp://www.redenvelope.com

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

AuthoringAuthor and test prototype

Important to identify design faults before full-scale production

AuthoringTest 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

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

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 ResourcesYale 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.htmlWeb Page Design for Designershttp://www.wpdfd.com/index.htm

HTML Help

http://www.htmlhelp.com/

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/

Web Design Tools

Target audience analysis checklistSite mapStoryboardPrototype