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

2. 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

3. 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

4. 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

5. Plan Identify purpose and goals
? suggestions

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

7. 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

8. 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

9. 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

10. 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,
siteplan.ppt

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

12. Sitemap
Available on all pages

13. Design Navigation Navigation Submenus
buttons, pop-up menus, links, text equivalents

14. 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

15. 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

16. 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)

17. Design Visual design and page layout
Analyse page design grids
Recommended reading Yale Style Guide:

18. 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

19. 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

20. 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

21. 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

22. 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)

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

24. Design Typography - legibility
Line length optimal for print is 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. 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

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

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

28. Design Page Layout Simplify and be consistent Headers Image/Logo
Navigational Links
Footers
Origin of page
Age of page
Address

29. 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

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

31. 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

32. 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 –
CSS –
Accessibility –
siteplan.ppt

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 WebMonkey Builder.com
WebMonkey
Builder.com
HTML Bad Style Page
Jacob Nielsen - Top Ten Mistakes in Web Design
Web Page Design for Designers
HTML Help

35. Internet Communications and Websites
Web Design Resources
Testing tools
W3 HTML Validation
Usability Testing Checklist
Accessibility - Bobby
Text Only - LynxView
Vischeck
W3C HTML Validation Validate your HTML code using the World Wide Web Consortium's Markup Validation Service.
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.
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.
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).
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.
siteplan.ppt

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