Web Design Phase
-
Upload
ahsan-uddin-shan -
Category
Technology
-
view
3.419 -
download
0
description
Transcript of Web Design Phase
WEB DESIGN APPLICATIONSAhsan uddin Shan
School of Film & Media StudiesNgee 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)
designing for the user
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
designing for the user
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 user
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
logoshopping cart, helpabout us, contact ussite 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
Home Design Camera
Story Board This is also called a
site map (detailed site structure)
How many pages? Text based story
board
GQ // home page
fashion gearnews
urbanwire heatwavelatest
GQ home•News
•Latest•Urbanwire•heatwave
•Fashion•Gear
Detailed Sketcheshttp://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)