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

\ 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

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)

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

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

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

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

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 ?

1. where am I ?

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

1

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

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

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

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

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

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

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

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

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

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

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

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 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 site two or more distinct groups of users with different goals and interests

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

use this when your user speak different languages

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 either the date or order of elements is essential to user understanding

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

use this only when you are designing intranet site

mel

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

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

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

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

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

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

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

This is also called a site map (detailed site structure)

How many pages?

Text based story board

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

what your site offers

how is your site organized

where they are within your site

how to find what they are looking for

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

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

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

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

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

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

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

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)

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)