Web Design Phase

WEB DESIGN APPLICATIONS Ahsan uddin Shan School of Film & Media Studies Ngee Ann Polytechnic Week 5: Web Design – design

Objectives
What this session will cover
designing for the user
4 steps to user-centered design
4 kinds of web conventions
designing for different systems
designing for speed
site organization

Design Phase
Function
What’s the logical way to organize information for the customer
Define the product, partners, content, and how that content is used to fulfill customer goals

Design Phase
How will the site will look to the customer?
Define the style and organization of visual elements
Simple usability testing (user’s experience when interacting with the web site)

web sites must be used – not just viewed
you have to consider:
usability
technology
how things render on the page
the flow from one page to another

people have to understand what – almost immediately—what your site is, what they can do there, and how they can find what they’re looking for

4 steps to user-centered design:
focus should be on the user and the user’s goal
provide intuitive pathways through the site
follow interface conventions
test!

designing for the web conventions
4 kinds of web conventions
navigation systems
icons and other visual elements
placement on the page
color

how people see your web sites
1. where am I ?
3. what else is here ? 2. what else is here ?

where users expect things to be
1
6 6 2 3 4 5 logo shopping cart, help about us, contact us site navigation bar

visual convention on (and off) the web
don’t need to be explained

Sketch the essential features & look

Sketch the essential features & look
Overall page structure and proportions
Level 1 navigation (your sections)
Other global navigation (like login/out, site map, help, footer navigation)- available from all pages of the website
Any key graphical elements

choosing software for web design
html: learn the limitation and surrender some control
HTML editing softwares
other page layout softwares
site-mapping software: Microsoft visio, smart draw
graphics software
animation software

designing for different systems
design differences arises from:
platform
browser
plug-ins
monitor
color capability

6 steps to cross-platform design:
identify your target audience
choose a single browser
research the differences
accept the differences
target different browser
test

designing for speed
simpler the better
remove everything extraneous
depends on product, focus, and audience
what slows down your
images and multimedia
page construction
poor organization and non-standard design

8 tricks to designing for speed
surrender some control
eliminate extras
compress all images and multimedia
replace images of words with words: images of text. not accessible and usable, searchable
repeat images throughout the site
mind the details of HTML: should specify attributes, such as image height and width.
switch to stylesheets
follow design conventions

the well-organized site
a logical structure
make immediate sense to the user
similar tasks should be grouped together
consistent navigation
users rely heavily on site navigation for orientation (where am I?), context (what else is here?), and direction (how do I get there?)
clear labels
helping users to find information

site organization
site organization is based on
user goals
business goals
must address your organizational goals, emphasizing features, products
classification system for the content
grouping of content, folders and sub folders

structuring your site
4 steps to structuring your site:
take stock of what you have
decide what’s most important
choose an organizing principle: by date, name, or by category
categorize the content

6 ways to organize your site: by category
use this when all your visitors have the same basic task in mind
research a topic, buy product, or discuss an issue

6 ways to organize your site: by task
use this when your site allows users to accomplish several tasks which may or may no be related to each other.
wiki, youtube

use this when your site two or more distinct groups of users with different goals and interests
6 ways to organize your site: by user

use this when your user speak different languages
6 ways to organize your site: by language location

use this either the date or order of elements is essential to user understanding
6 ways to organize your site: by date or order

use this only when you are designing intranet site
mel
6 ways to organize your site: by corporate department

3 ways to visualize the site structure
the site map: the organization of site sections
the user path: user flow or flow chart.
screen by screen experience
the page schematic: wire frame or story board, shows all the elements that will appear on the page, and roughly where they will appear
documenting the site structure

A sketch will typically feature:
Stars showing how a user arrives at the site (entry points) - home page
Circles showing actions, views or places (which may eventually become pages) - pages
Arrows showing how users may move around the site - navigation
the user path

Story Board
A story board is used to organize your thoughts and ideas
Use paper to draw boxes and curves or lines, or
a simple rough sketch of the web page
Indesign, Illustrator, powerpoint
boxes = curves + square
Each square has a main title to indicate what the page is about
Camera Home Design

Story Board
This is also called a site map (detailed site structure)
How many pages?
Text based story board
GQ // home page fashion gear news urbanwire heatwave latest
GQ home
News
Latest
Urbanwire
heatwave
Fashion
Gear

Detailed Sketches http://ela10b.dev.kcdc.ca/~greentela10/unit1/racial/lesson3/sstoryboard.html

what your site offers
how is your site organized
where they are within your site
how to find what they are looking for
what users learn from your navigation

8 bad ideas for site navigation
pull down menus
home-made icons
color coding
visual metaphors
cute, clever, names
navigation elements that move around
navigation elements in unexpected places
flying, floating things

12 navigation systems
tabs
left-hand panel
page-top nav bar
breadcrumbs
folders & files
hub & spokes

global and local navigation
global navigation shows users where they are within the site
local navigation picks up where global navigation leaves off
network navigation displays links to other sites within a larger network

12 navigation systems
linear path
multipage path
pull-down menus
the search box
image maps
lists of links

naming site sections
short
consistent
clear
jargon-free
acronyms
double entenders
formal or technical words
industry terms

Things to think about:
Think what global or top-level links really need to be available on every page. Test your assumptions
Create enough sections that it will be easy to focus on what you want
Organize views into a site map

References
Cnet.com
designWHYS by Shayne Bowman
Useit.com
the unusually useful web book
web design applications
Web design from scratch ( http://www.webdesignfromscratch.com/colour.cfm )
http://www.le.ac.uk (for navigation section)

http://designerdot.blogspot.com	189
http://designerdot.blogspot.sg	35
http://designerdot.blogspot.com.br	8
http://www.designerbloke.com	4
http://www.slideshare.net	3
http://designerdot.blogspot.co.uk	3
http://designerdot.blogspot.hk	2
http://designerdot.blogspot.in	2
http://designerdot.blogspot.de	2
http://designerdot.blogspot.hu	2
http://www.designerdot.blogspot.com	2
http://designerdot.blogspot.ie	1
http://translate.googleusercontent.com	1
http://designerdot.blogspot.se	1
http://designerdot.blogspot.nl	1
http://designerdot.blogspot.ca	1
http://designerdot.blogspot.com.au	1

Web Design Phase

by Ahsan Uddin Shan on Nov 10, 2008

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 258

Statistics

Web Design Phase Presentation Transcript