![Page 1: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/1.jpg)
Website Planning and Design
Objectives
Plan and design a successful website Use web design principles and tools
![Page 2: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/2.jpg)
Website Lifecycle
PlanDesignAuthorTestLaunchMaintenance
![Page 3: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/3.jpg)
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
![Page 4: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/4.jpg)
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
![Page 5: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/5.jpg)
PlanIdentify purpose and goals
? suggestions
![Page 6: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/6.jpg)
PlanIdentify purpose and goals
TrainingInformationTeachingEducationReferenceEntertainmentSales ……..
![Page 7: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/7.jpg)
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)
![Page 8: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/8.jpg)
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
![Page 9: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/9.jpg)
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
![Page 10: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/10.jpg)
DesignStructure
Sequence
Hierarchy
Web
Graphic Credit: Yale Style Guide, http://info.med.yale.edu/caim/manual/contents.html
![Page 11: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/11.jpg)
Design Tool
Site map hierarchical diagram showing
relationships between sections and/or pages
![Page 12: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/12.jpg)
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
![Page 13: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/13.jpg)
DesignNavigation
Navigation Submenus buttons, pop-up menus, links, text
equivalents www.johnlewis.co.uk www.amazon.co.uk www.ibm.com
![Page 14: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/14.jpg)
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
![Page 15: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/15.jpg)
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
![Page 16: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/16.jpg)
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)
![Page 17: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/17.jpg)
DesignVisual design and page layout
Analyse page design gridsRecommended reading Yale Style Guide: http://info.med.yale.edu/caim/manual/contents.
![Page 18: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/18.jpg)
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
![Page 19: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/19.jpg)
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 *
![Page 20: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/20.jpg)
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
![Page 21: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/21.jpg)
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
![Page 22: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/22.jpg)
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)
![Page 23: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/23.jpg)
DesignTypography - content
Style for online documents Be concise and consistent Use lists where possible
Make printing easy
![Page 24: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/24.jpg)
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
![Page 25: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/25.jpg)
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
![Page 26: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/26.jpg)
DesignPage Layout
content should dominate (50-80%) important info “above the fold” place common page elements according to user expectations and conventions
![Page 27: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/27.jpg)
DesignPage Layout
Simplify and be consistent pages (or sections) share the same
basic layout themes editorial conventions hierarchies of organisation
![Page 28: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/28.jpg)
DesignPage Layout
Simplify and be consistent Headers Image/Logo Navigational Links Footers Origin of page Age of page Addresshttp://www.redenvelope.com
![Page 29: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/29.jpg)
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
![Page 30: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/30.jpg)
AuthoringAuthor and test prototype
Important to identify design faults before full-scale production
![Page 31: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/31.jpg)
AuthoringTest design using prototype
Your aim as a web designer is to make a site accessible to your target audience(s) widest audience possible
![Page 32: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/32.jpg)
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
![Page 33: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/33.jpg)
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
![Page 34: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/34.jpg)
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/
![Page 35: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/35.jpg)
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/
![Page 36: Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools](https://reader030.vdocument.in/reader030/viewer/2022032707/56649e3f5503460f94b30000/html5/thumbnails/36.jpg)
Web Design Tools
Target audience analysis checklistSite mapStoryboardPrototype