website planning and design objectives plan and design a successful website use web design...
TRANSCRIPT
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