Download - Web Design Phase
![Page 1: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/1.jpg)
WEB DESIGN APPLICATIONSAhsan uddin Shan
School of Film & Media StudiesNgee Ann Polytechnic
Week 5: Web Design – design
![Page 2: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/2.jpg)
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
![Page 3: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/3.jpg)
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
![Page 4: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/4.jpg)
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)
![Page 5: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/5.jpg)
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
![Page 6: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/6.jpg)
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
![Page 7: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/7.jpg)
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
![Page 8: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/8.jpg)
designing for the web conventions
4 kinds of web conventions navigation systems icons and other visual elements placement on the page color
![Page 9: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/9.jpg)
how people see your web sites
1. where am I ?
3. what else is here ?
2. what else is here ?
![Page 10: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/10.jpg)
where users expect things to be
1
6 6
2 3
4 5
logoshopping cart, helpabout us, contact ussite navigation bar
![Page 11: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/11.jpg)
visual convention on (and off) the web
don’t need to be explained
![Page 12: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/12.jpg)
Sketch the essential features & look
![Page 13: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/13.jpg)
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
![Page 14: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/14.jpg)
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
![Page 15: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/15.jpg)
designing for different systems
design differences arises from: platform browser plug-ins monitor color capability
![Page 16: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/16.jpg)
6 steps to cross-platform design:
identify your target audience choose a single browser research the differences accept the differences target different browser test
![Page 17: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/17.jpg)
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
![Page 18: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/18.jpg)
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
![Page 19: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/19.jpg)
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
![Page 20: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/20.jpg)
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
![Page 21: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/21.jpg)
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
![Page 22: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/22.jpg)
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
![Page 23: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/23.jpg)
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
![Page 24: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/24.jpg)
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
![Page 25: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/25.jpg)
use this when your user speak different languages
6 ways to organize your site: by language location
![Page 26: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/26.jpg)
use this either the date or order of elements is essential to user understanding
6 ways to organize your site: by date or order
![Page 27: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/27.jpg)
use this only when you are designing intranet site
mel
6 ways to organize your site: by corporate department
![Page 28: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/28.jpg)
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
![Page 29: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/29.jpg)
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
![Page 30: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/30.jpg)
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
![Page 31: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/31.jpg)
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
![Page 32: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/32.jpg)
Detailed Sketcheshttp://ela10b.dev.kcdc.ca/~greentela10/unit1/racial/lesson3/sstoryboard.html
![Page 33: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/33.jpg)
![Page 34: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/34.jpg)
![Page 35: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/35.jpg)
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
![Page 36: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/36.jpg)
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
![Page 37: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/37.jpg)
12 navigation systems
tabs left-hand panel page-top nav bar breadcrumbs folders & files hub & spokes
![Page 38: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/38.jpg)
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
![Page 39: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/39.jpg)
12 navigation systems
linear path multipage path pull-down menus the search box image maps lists of links
![Page 40: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/40.jpg)
naming site sections
short consistent clear jargon-free
acronyms double entenders formal or technical words industry terms
![Page 41: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/41.jpg)
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
![Page 42: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/42.jpg)
![Page 43: Web Design Phase](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bcd16b4c905706a8b48bd/html5/thumbnails/43.jpg)
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)