Transcript What`s the purpose of the web site?

Design Basic, Design Rules,
and prototyping
Dr. Liu
INSY211
Design Basic

Getting ready with



Texts
Graphics
Answer the following questions:





What’s the purpose of the web site?
Who are the users?
What are they going to do there?
How does a user visit this site?
Sketch the site structures.
What’s the purpose of the web
site?







Information
Entertainments
Search engine / dictionary of links:
Specify the user group as, classes,
employees, customers, etc.
Artistic expression
Personal profile
Other purposes
What’s the purpose of the web
site?

Information / academic

http://www.irs.gov/

http://www.apple.com


Entertainments or Web for Kids


http://toyota.com
http://kids.nationalgeographic.com/
Search engine / dictionary of links:







http://en.wikipedia.org/
http://www.Google.com
http://freeIQ.com
Specify the user group as, classes, employees, customers, etc.

http://www.jxjtech.com/contact_us_other.asp

www.mercer.edu

www.comcast.net
Artistic expression: http://www.metmuseum.org/ http://web.hit.bg/galleryval/
Personal profile: http://www.marionscottgallery.com/
Other purposes
Site objective: case 1

Academic discussion group:







Latest News
Calendar : conference/event
members
Related knowledge
Examples:
www.siggraph.org
Related links
http://www.siggraph.org/s2
007/
Industrial Companies
http://slashdot.org/
Forum
http://www.phpbb.com/
Google blogger
Site objective : case 2

Entertainment



audiences need to be attracted immediately by
compelling graphic and text presentations
Slate's sophisticated mix of political commentary
and social criticism depends heavily on clever,
well-written headlines and teasers.
derived entirely from presentation styles used in
political and current affairs magazines

Kids education:
http://www.fieldmuseum.org/evolvingplanet/
http://home.disney.go.com/index
Site objective : case 3

E-commerce
 Flash/video?....too fancy things which take too much time?--- oh
NO!
 Pay more attention on PAY procedure




TELL user where they are… before they quit!
News: more like newspaper
INTERNET: intranet
Examples:
 http://www.nvidia.com/
 http://www.kohls.com/
 www.walmart.com
 http://www.amazon.com/
 http://www.expedia.com/

Searching sites:


http://www.google.com/
More complex query: FMLS

Design site:

Education institute





http://www.scad.edu/
http://www.stanford.edu/
http://www.mcmaster.ca/
http://www.gsu.edu/
Online Tutorial

http://www.w3schools.com/

Analysis the following sample sites:



http://www.princeton.edu/main/
http://www.mercer.edu
http://www.yale.edu




http://www.yale.edu/evst/
http://www.yale.edu/ycias/
http://www.yale.edu/yalecollege/publications/ycps/cha
pter_iv/erm.html
….
Site objective : case 4 …

Non-profit Org:







News! : attractive to user
Keep updated data (for all
kinds of site!)
Calendar : conference/event
Cases study
Knowledge site links
Donation
Examples:
 http://www.lakewood.cc/site/
PageServer?pagename=cp_
stephen
 http://www.adventist.org/
Who is the user?




Be as specific as possible.
Think about the user, act as real-person is
using your system.
Decide how you going to present information.
How you communicate with users.
How user visit this site?

User’s access port: speed?


Dial-up / bandwidth/ T-1…
Checking each of the interaction part does
work.
Site Elements








Home page: Master page layout grid
Menus and sub-sites Resource lists, "other related
sites" pages
Site map
News! / latest update time
Search
Contact information/directions
FAQ pages / user feedback
(Bibliographies and appendixes)
Homepage:

Menu home page



Image menu: image map
Text based menu: easy change
News-oriented home page


http://www.CNN.com
Path  home page:



Divide user from the very first home page
HTTP://WWW.GSU.EDU
http://home.americanexpress.com/home/mt_personal_cm.
shtml
Are we going to have a Graphics
Home Page?

Really Depends:


Academics….
Museum/ gallery :



http://www.fieldmuseum.org/evolvingplanet/
+ your users
Home Page layout Don’t have to be same as
internal pages

Constructing a layout grid usually begins by
analyzing the content structure you have worked
out and deciding what (besides the all-important
home page link) you will need for the most
general navigation purposes.

Establish what links will be present and generally
useful on every page of your Web site.

How your particular site fits into the larger context
of the other Web sites in your enterprise.


what links, logos, and other graphic and functional
elements reflecting your place in the larger enterprise
should be present on all of your pages.
choose your words carefully for links and titles, and
solicit comments and feedback
Homepage
layout grid
Site map

Table contents or site indexes
Page Design
Contrast
Clarity
Order
Trustworthiness
Visual hierarchy

Important elements are emphasized:
emphasis everything = emphasis nothing.


Do not bold all the content
Do not use underline for emphasizing purpose



Confuse to hyperlink
Content is organized logically and predictably
Contrast is essential
Page Design Grid

Consistency and predictability

A consistent approach to layout and navigation
allows readers to adapt quickly to your design and
to confidently predict the location of information
and navigation controls across the pages of your
site.
Step before real design

Framing and storyboarding your web site



Sketch homepage layout (page level design)
Draw a picture of relationship between pages (site
level design – site hierarchy)
Tools


Low-end: Lines, boxes, word, piece of paper
High-end: digital version with computer
Sample of New Frontier for
Learning in Retirement
Page layout issue

Using template for all the pages
Title area
navigation bar
Graphics
Content Body
Footer
Sub-page
Links
Page layout issue (example
demo)

Using template



Template is a grid can be used as guideline to layout your
page elements
Create and use template enable you to align elements and
create a consistent throughout the pages. Your template
need to be design according to your user needed
Using upper-left corner as the eyes of you site, so
that users can easily know if they are on the right
site. Make sure user can navigate with your page 
navigation bar need to be viewed.
Web page dimension

Survey of Sep 2005 from counter.com





1024X768: 56% of users
800X600: 23%
 Time for move to it safely!
640x 480 < 1%
How to view different resolution on
your computer?
Safe Design dimension: 750 x450
pixels
Site level structure sample
Home
About NFLR
Calendar
gallery
registration
courses
classes
event
Mailing list
student
instructors
Design principles

Avoid blinking text and unnecessary animation.
Use simple rollover effect for buttons.

Doing research: Search similar sites to see what's
out there, and make your site unique. By looking at
the similar or related sites, you can also get ideas
and add something you missed

Content Keep content fresh, simple, and smart.

Avoid using too many high-tech features or you'll
lose the majority of your viewers.

Ensure that your page downloads as quickly as possible;
10 second is the MAX.

Functional element should serve as a purpose.

Avoid using too much of any element or technique: Too
much emphasis = no emphasis.

Don't automatically enable sound files. Make user control it
Verify that your page looks good in Internet Explorer
and FireFox (at a minimum) at various resolutions on
Windows and Macintosh systems.


White space Create eye relief and visual space with
strategically placed blank areas (white space).
Compare two designs
http://creationguide.com/nflr1/
http://creationguide.com/nflr-new/
Example2
 SEFF

site redesign
http://www.koolflightsystems.com/seff.htm
Color




216 safe color for the web
http://creationguide.com/colorchart.html
Use contrast colors especially if you use a
colored background:
Limited the number of the colors no more
than 3 complementary color.


http://creationguide.com/colorwheel/
Choose color fit for your content- ski site
Navigation bar, buttons and
logos

Navigation bar




Buttons





Consistent
Same dimension, color scheme
Name buttons clearly
Use template when design
Logo





meaningful description
Simple
Logic information chunks
Use logo as graphics interchange format (gif) with web-safe color
High quality resolution
Give a small or part of logo on the sub-pages
Make logo simple and readable for both color and w/b printout
Hyperlink color should be modified according to your fonts color
and BG color
Texts and graphics

Texts




Sans-Serif is better for read online: Arial, Veranda
…
Rather than Serif crisp, clean, uncluttered lines:
Time new man
Be careful underlining the unlinked text
Graphics


Include alternative name of the picture
Create consistency throughout the website based
on your color scheme
Standard credibility components








Attribution
Contact information
Copyright
Up-to-date content with last modification time
Personal information of the site, like a club president
Special interest
Spelling and grammar check!!
Webmaster links
Planning your website




Why do you want a website
What’s the immediately goal?
What’s the long-term goal?
Timeline
Start planning your Files
Structure

Organize your files



Main directory
Image folders
Keep file name
simple and avoid
space ,symbol and
punctuation during
name your files.
Summery of getting into the
first step of the design









User and task analysis
Research on existing sites.
Content logic analysis
Structure of the content
Structure of the site
Choose color scheme
Master page design
Result with the prototype
Rest will be adding content of each page and make
sure function right.
Reference

http://creationguide.com/