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)