Visual Basic 2005 CHAPTER 2 Program and Graphical User Interface Design.
Graphical Interface Design for the Web
description
Transcript of Graphical Interface Design for the Web
![Page 1: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/1.jpg)
Graphical Interface Designfor the WebLouisa Lambregts, Algonquin College, [email protected]
![Page 2: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/2.jpg)
Activity: Group DiscussionIn your group, introduce yourselves
and answer the following 3 questions:
1) What do you hope to get out of this course?(name 2 things)
2) Have you used Photoshop? How much?
3) Have you used Fireworks? How much?
Designate a speaker for your group to share a summary of responses.
![Page 3: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/3.jpg)
Course Topics
Design Basics Principles and Elements of Design Colour Theory Layout Typography
Usability Translating Design into Web
Functionality Understanding Form versus Function
![Page 4: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/4.jpg)
What is Good Web Design?
Web Design Gone Horribly Wrong
http://www.esupersoft.com/lips/
http://www.evangelcathedral.net/welcome.htm
![Page 5: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/5.jpg)
What is Good Design?
1. Aesthetically engaging
2. Functionality works
3. Content is easy to find and understand
4. Meets need of client*
![Page 6: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/6.jpg)
Form vs Function
Form ever follows function.
Architect Louis Henri Sullivan , 1896
![Page 7: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/7.jpg)
Form vs Function
MOMA vs Kevin Lucius
MOMA – Museum of Modern Arthttp://www.moma.org/interactives/exhibitions/2008/elasticmind/
Kevin Lucius – Portfolio Sitehttp://www.kevinlucius.com/
![Page 8: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/8.jpg)
Form vs Function
Need to balance form and function.
But how?
![Page 9: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/9.jpg)
Form vs Function
“Have a strong purpose and to follow that to the end.”
http://www.digital-web.com/articles/form_vs_function/
![Page 10: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/10.jpg)
Form vs Function
Key Questions
http://www.digital-web.com/articles/form_vs_function/
What will the site do and how will it work?
Who will use it?
What will the end result be?
What technologies will be used to produce that functionality Will everyone be able to access and understand it?
![Page 11: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/11.jpg)
Two Key Questions
1. What are the goals of the site?
2. Who is the target audience?
These 2 questions should guide every website design decision.
![Page 12: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/12.jpg)
Every design element on a website must have a purpose.
Otherwise, it is clutter!
![Page 13: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/13.jpg)
Every design element on a website must have a
purpose.Otherwise, it is clutter!
![Page 14: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/14.jpg)
“Graphic design is visual information management using the tools of layout,
typography, and illustration to lead the reader's eye through the page.”
![Page 15: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/15.jpg)
Graphic Design for the Web is alsoabout designing the emotional impactyou want to have on people.
![Page 16: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/16.jpg)
Graphic Design for the Web is also about designing the emotional impact that you want people to have.
![Page 17: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/17.jpg)
Graphic Design for the Web is alsoabout designing the emotional impact that you want people to have.
![Page 18: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/18.jpg)
Graphic Design for the Web is alsoabout designing the emotional impactyou want people to have.
![Page 19: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/19.jpg)
What Good Web Design DoesIt helps people to
To find something.
To do something.Usability is about how easy an interface is to use.
![Page 20: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/20.jpg)
The Elements of Interface Design 1) Usability
2) Visualization
3) Functionality
4) Accessibility
![Page 21: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/21.jpg)
The Elements of Interface Design 1) Usability
-how “useable” a site is
2) Visualization-the visual experience of a site
3) Functionality-interactive features that takes sites beyond just providing information
4) Accessibility-removing barriers to accessing content or completing tasks
![Page 22: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/22.jpg)
The Elements of Interface Design
Usability
What is Usability
![Page 23: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/23.jpg)
The Elements of Interface Design
Usability
Ease with which someone can navigate through a site to find information and do what they need to do.
![Page 24: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/24.jpg)
The Elements of Interface Design
5 E’s of Usability
Effective Efficient Engaging Error Tolerant Easy to Learn
![Page 25: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/25.jpg)
Activity: Group DiscussionUsability Web Search
Find 1 example of a site with poor usability and one with good usability.
Evaluate these sites according to the 5 E’s.
Designate a speaker for your group to share a summary of responses.
![Page 26: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/26.jpg)
Ten Usability Heuristics
Jakob Nielsen1) Feedback: What is happening?
2) Metaphor: Familiarity. Matches real world conventions.
3) Navigation: User control and freedom. Yet provides a way back .
4) Consistency: Apply standards and conventions
5) Error Prevention:
![Page 27: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/27.jpg)
Ten Usability Heuristics
Jakob Nielsen6) Memory Rather than Recall: Reduce memory load of users.
7) Efficiency: People can quickly find and do what need to regardless of experience.
6) Design: Minimalistic and simple.Respects the principles of contrast, repetition, alignment, and proximity.
9) Recovery: help users recover from errors.
10) Help: Simple communicate the error and what to do about it.
![Page 28: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/28.jpg)
Principles of Effective Web Design
1. Start With a Purpose: Determine Your Goals
Types of Websites
Commercial (small business and large enterprise) Personal (blogs, personal website) Educational Organizational (advocacy) Entertainment Informational (news, special interest) Social Networking Hybrid (e.g. Martha Stewart)
![Page 29: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/29.jpg)
Principles of Effective Web Design2. Understand How Users Behave On the Web
People scan rather than read
Are impatient
![Page 30: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/30.jpg)
Principles of Effective Web Design2. Understand How Users Behave On the Web
Click rather than think
▪ “first reasonable option”
![Page 31: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/31.jpg)
Principles of Effective Web Design2. Understand How Users Behave On the Web
Users want control
▪ to know where they are and how to get back▪ consistent presentation of information
![Page 32: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/32.jpg)
Principles of Effective Web Design2. Content is More Important than Design
People will tolerate bad design if the content is good
“Coolness” will quickly lose its novelty
Craig’s List
![Page 33: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/33.jpg)
Principles of Effective Web Design4. Apply Website Conventions
Past surfing creates expectations of how websites should work
Quick learning curve for site navigation
http://www.hikano.com/
MOMA Color Chart
![Page 34: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/34.jpg)
As of the 1999 baseball season, the batted ball exit velocity is not to exceed 93 miles per hour, and the weight and size specs of bats (other than wood) will change.
![Page 35: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/35.jpg)
Principles of Effective Web Design5. Write Concisely
In response to the concerns, the NCAA announced that the baseball rules committee will recommend a maximum batted-ball exit velocity of 93 mph and a change in the size and weight specs of non-wooden bats beginning with the 1999 season.
![Page 36: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/36.jpg)
Principles of Effective Web Design5. Write Concisely
Responding to the concerns, the NCAA announced new recommendations from the baseball rules committee, to begin with the 1999 season:
Batted-ball exit speed maximum of 93 mph
Change in size and weight specifications for non-wooden bats
![Page 37: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/37.jpg)
Principles of Effective Web Design5. Write Concisely
NCAA Suggests Batting Changes
Growing concerns over size and weights of bats has resulted in the following changes:
Batted-ball exit speed maximum of 93 mph
Change in size and weight specifications for non-wooden bats
![Page 38: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/38.jpg)
Principles of Effective Web Design6. Keep It Simple
Less is more Trying to clarify too much is confusing!
http://www.playfood.ca/
Click here to see and print our
brochureBrochure
![Page 39: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/39.jpg)
What is a Good Interface?
Users like the design but are drawn to the content
Design “interfaces” the user with the content.
Bus Full of Hippies Template
Visuals are appealing Lead the eye to the content Does not interfere with finding information
![Page 40: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/40.jpg)
What is a Good Interface?
Users can easily move around intuitive via navigation
User knows where they are and how to get to where they want to go.
http://www.socialvibe.com/
Main navigation block is prominent and easy to see Roll-overs show hover and active states Secondary navigation and search not dominant yet easy
to find
![Page 41: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/41.jpg)
What is a Good Interface?
Writing is concise and graphics support main message.
http://secondandpark.com/
Design supports goals of site Design elements and written words carefully selected Personality of individual clearly comes through
![Page 42: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/42.jpg)
What is a Good Interface?
“Less is More”
http://www.lachlanbailey.com/
Thoughtful decision-making about elements toinclude and leave out
Spacious and uncluttered
![Page 43: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/43.jpg)
The Elements of Interface Design
1) Usability
2) VisualizationColour, design principles,
typography, layout.
3) Functionality
4) Accessibility
![Page 44: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/44.jpg)
Principles for Effective Graphic Design1) Guide the Eye
Colour Position Contrast Size Repetition and Patterns Movement
![Page 45: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/45.jpg)
2) Use Spacing
Padding White Space Line Spacing
Principles for Effective Graphic Design
![Page 46: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/46.jpg)
3) Use Effective Typography
Font Choice Font Size Line Length Paragraphing (justified vs left-justified)
Principles for Effective Graphic Design
![Page 47: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/47.jpg)
4) Alignment
Elements line up consistently Grid Layout
Principles for Effective Graphic Design
![Page 48: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/48.jpg)
5) Consistency
Graphic elements Colours Headers Font Main and sub-pages are graphically tied
together
Principles for Effective Graphic Design
![Page 49: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/49.jpg)
Principles and Elements of DesignActivity
Work through the following interactive tutorial:
http://www.artsconnected.org/toolkit/explore.cfm
Google search “artsconnected toolkit”
1)
2)Review Article #1 on the Wiki: Principles of Design
http://www.digital-web.com/articles/principles_of_design/
![Page 50: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/50.jpg)
Principles and Elements of Design
BalanceRhythmProportionDominanceAlignmentUnityContinuance
LineFormColourTextureSymmetrySimilarity/ProximityClosure
Terminology
![Page 51: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/51.jpg)
Principles and Elements of DesignWhat Principles Apply?
![Page 52: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/52.jpg)
Principles and Elements of DesignWhat Principles Apply?
![Page 53: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/53.jpg)
Principles and Elements of DesignWhat Principles Apply?
![Page 54: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/54.jpg)
Principles and Elements of DesignWhat Principles Apply?
Movement
![Page 55: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/55.jpg)
Principles and Elements of DesignWhat Principles Apply?
![Page 56: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/56.jpg)
Principles and Elements of DesignWhat Principles Apply?
![Page 57: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/57.jpg)
Principles and Elements of DesignWhat Principles Apply?
![Page 58: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/58.jpg)
Principles and Elements of DesignWhat Principles Apply?
![Page 59: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/59.jpg)
Principles and Elements of DesignOther Principles
![Page 60: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/60.jpg)
Principles and Elements of DesignOther Principles
![Page 61: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/61.jpg)
Principles and Elements of DesignOther Principles
![Page 62: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/62.jpg)
Principles and Elements of DesignOther Principles
![Page 63: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/63.jpg)
Principles and Elements of DesignOther Principles
![Page 64: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/64.jpg)
Principles and Elements of DesignOther Principles
![Page 65: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/65.jpg)
Principles and Elements of DesignOther Principles
![Page 66: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/66.jpg)
Principles and Elements of DesignExploring Examples
In your groups, explore the following web sites and identify the principlesand elements of design at work:
Group 1) http://www.plantwithpurpose.org/
Group 2) Subway: http://www.csszengarden.com/?cssfile=/152/152.css&page=4z
Group 3) http://khahoang.com/
Group 4) Museum: http://www.csszengarden.com/?cssfile=/148/148.css&page=4
Group 5) Manhattan Experience: http://www.csszengarden.com/?cssfile=/185/185.css&page=0
Group 6) Centrefold: http://www.csszengarden.com/?cssfile=/122/122.css&page=7
![Page 67: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/67.jpg)
Principles and Elements of DesignVisual Metaphor
Interface Design Trends: Article 13Web Design Trends: Real-Life Metaphors and CSS3 Adaption
Visual Metaphors in Web Design: Article 14http://nikhilmisal.com/using-visual-metaphors-in-web-design-part-1/
![Page 68: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/68.jpg)
Text as Block Layout Items
Balance, Unity, and Focus
http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml
![Page 69: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/69.jpg)
Text as Block Layout Items
Balance, Unity, and Focus
![Page 70: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/70.jpg)
Text as Block Layout Items
The importance of padding and discretecontent sections
![Page 71: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/71.jpg)
Text as Block Layout Items
Being Aware of Graphic Distractions
http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml
![Page 72: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/72.jpg)
A Bit About Typography
Serif vs Sans-Serif
Times Roman Arial
Georgia Century Gothic
![Page 73: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/73.jpg)
Text Format
Other Dimensions
ItalicBold
K e r n i n g
Line Spacing
The space that is left betweensentences in a paragraph.The space that is left betweensentences in a paragraph.
![Page 74: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/74.jpg)
Typography
Units of Measure
www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/#
1em = 12pt = 16px = 100%.
Fixed vs Relative sizing
![Page 75: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/75.jpg)
Activity
Design Trends for 2009
In your groups, browse the following articles:
Article 9: Trends for 2009 Article 10: Current Web Design Trends for 2009
Article 11: Trends for 2010Article 12: Web Design Trends for 2010
![Page 76: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/76.jpg)
Design Trends for 2009
Shneiderman’s Mantra
”convey big picture first, reveal details later”
![Page 77: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/77.jpg)
Design Trends for 2009
Speaking Box Navigation
![Page 78: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/78.jpg)
Web Site LayoutContainer
Logo Banner
Side Navigation
Navigation Bar
Content
Footer
![Page 79: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/79.jpg)
Web Site LayoutGrid Theory and the Rule of Thirds
![Page 80: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/80.jpg)
Web Site LayoutGrid Theory and the Rule of Thirds
From the Article: Principles of Beautiful Web DesignBy Jason Beaird
![Page 81: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/81.jpg)
Web Site LayoutGrid Theory and the Rule of Thirds
![Page 82: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/82.jpg)
Web Site Layout
Example of Layout Based on Grid Theory
http://rubberdesign.com/
Others on wiki
![Page 83: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/83.jpg)
Web 2.0 StyleExamples
http://www.webdesignfromscratch.com/web-design/web-2-0-design-style-guide/
![Page 84: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/84.jpg)
The Elements of Interface Design
1) Usability
2) Visualization
3) Functionality
4) Accessibility
![Page 85: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/85.jpg)
The Elements of Interface Design
Functionality
Web sites no longer just provide content – they offer interactivity and value-add functionality
![Page 86: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/86.jpg)
The Elements of Interface Design
Functionality
Web 1.0 vs Web 2.0
![Page 87: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/87.jpg)
The Elements of Interface Design
Functionality
Web 1.0 vs Web 2.0
Static content
Passive experience
One-way broadcastof information
Dynamic/Changing Active/Collaborative experience Two-way
Users can now:
•publish own content•socialize/interact with people•be entertained via multimedia•purchase things•manage their life……
![Page 88: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/88.jpg)
The Elements of Interface Design
Functionality
Widgets: http://www.widgetbox.com/
Scripting: javascriptAjax and Javascript Techniques
Flash Interactive elementsExample of a Flash Learning Object
![Page 89: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/89.jpg)
The Elements of Interface Design
1) Usability
2) Visualization
3) Functionality (add-on applications)
4) Accessibility
![Page 90: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/90.jpg)
Working with Images
Images
What are 4 main image formats??
![Page 91: Graphical Interface Design for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062520/56815e5c550346895dccd366/html5/thumbnails/91.jpg)
Day 2 Project
Design an user interface with a user and purpose in mind.
Pick your type of site:
1) eBusiness2) Small Business/Retail3) Informational4) Entertainment5) Educational