Graphical Interface Design for the Web

Graphical Interface Designfor the WebLouisa Lambregts, Algonquin College, [email protected]

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.

Course Topics

Design Basics Principles and Elements of Design Colour Theory Layout Typography

Usability Translating Design into Web

Functionality Understanding Form versus Function

What is Good Web Design?

Web Design Gone Horribly Wrong

http://www.esupersoft.com/lips/

http://www.evangelcathedral.net/welcome.htm

What is Good Design?

1. Aesthetically engaging

2. Functionality works

3. Content is easy to find and understand

4. Meets need of client*

Form vs Function

Form ever follows function.

Architect Louis Henri Sullivan , 1896

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/

Form vs Function

Need to balance form and function.

But how?

Form vs Function

“Have a strong purpose and to follow that to the end.”

http://www.digital-web.com/articles/form_vs_function/

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?

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.

Every design element on a website must have a purpose.

Otherwise, it is clutter!

Every design element on a website must have a

purpose.Otherwise, it is clutter!

“Graphic design is visual information management using the tools of layout,

typography, and illustration to lead the reader's eye through the page.”

Graphic Design for the Web is alsoabout designing the emotional impactyou want to have on people.

Graphic Design for the Web is also about designing the emotional impact that you want people to have.

Graphic Design for the Web is alsoabout designing the emotional impact that you want people to have.

Graphic Design for the Web is alsoabout designing the emotional impactyou want people to have.

What Good Web Design DoesIt helps people to

To find something.

To do something.Usability is about how easy an interface is to use.

The Elements of Interface Design 1) Usability

2) Visualization

3) Functionality

4) Accessibility

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

The Elements of Interface Design

Usability

What is Usability

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.

The Elements of Interface Design

5 E’s of Usability

Effective Efficient Engaging Error Tolerant Easy to Learn 

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.

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:

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.

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)

Principles of Effective Web Design2. Understand How Users Behave On the Web

People scan rather than read

Are impatient

Principles of Effective Web Design2. Understand How Users Behave On the Web

Click rather than think

▪ “first reasonable option”

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

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

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

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.

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.

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

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

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

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

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

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

What is a Good Interface?

“Less is More”

http://www.lachlanbailey.com/

Thoughtful decision-making about elements toinclude and leave out

Spacious and uncluttered

The Elements of Interface Design

1) Usability

2) VisualizationColour, design principles,

typography, layout.

3) Functionality

4) Accessibility

Principles for Effective Graphic Design1) Guide the Eye

Colour Position Contrast Size Repetition and Patterns Movement

2) Use Spacing

Padding White Space Line Spacing

Principles for Effective Graphic Design

3) Use Effective Typography

Font Choice Font Size Line Length Paragraphing (justified vs left-justified)

Principles for Effective Graphic Design

4) Alignment

Elements line up consistently Grid Layout

Principles for Effective Graphic Design

5) Consistency

Graphic elements Colours Headers Font Main and sub-pages are graphically tied

together

Principles for Effective Graphic Design

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/

Principles and Elements of Design

BalanceRhythmProportionDominanceAlignmentUnityContinuance

LineFormColourTextureSymmetrySimilarity/ProximityClosure

Terminology

Principles and Elements of DesignWhat Principles Apply?

Principles and Elements of DesignWhat Principles Apply?

Principles and Elements of DesignWhat Principles Apply?

Principles and Elements of DesignWhat Principles Apply?

Movement

Principles and Elements of DesignWhat Principles Apply?

Principles and Elements of DesignWhat Principles Apply?

Principles and Elements of DesignWhat Principles Apply?

Principles and Elements of DesignWhat Principles Apply?

Principles and Elements of DesignOther Principles

Principles and Elements of DesignOther Principles

Principles and Elements of DesignOther Principles

Principles and Elements of DesignOther Principles

Principles and Elements of DesignOther Principles

Principles and Elements of DesignOther Principles

Principles and Elements of DesignOther Principles

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

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/

Text as Block Layout Items

Balance, Unity, and Focus

http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml

Text as Block Layout Items

Balance, Unity, and Focus

Text as Block Layout Items

The importance of padding and discretecontent sections

Text as Block Layout Items

Being Aware of Graphic Distractions

http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml

A Bit About Typography

Serif vs Sans-Serif

Times Roman Arial

Georgia Century Gothic

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.

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

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

Design Trends for 2009

Shneiderman’s Mantra

”convey big picture first, reveal details later”

Design Trends for 2009

Speaking Box Navigation

Web Site LayoutContainer

Logo Banner

Side Navigation

Navigation Bar

Content

Footer

Web Site LayoutGrid Theory and the Rule of Thirds

Web Site LayoutGrid Theory and the Rule of Thirds

From the Article: Principles of Beautiful Web DesignBy Jason Beaird

Web Site LayoutGrid Theory and the Rule of Thirds

Web Site Layout

Example of Layout Based on Grid Theory

http://rubberdesign.com/

Others on wiki

Web 2.0 StyleExamples

http://www.webdesignfromscratch.com/web-design/web-2-0-design-style-guide/

The Elements of Interface Design

1) Usability

2) Visualization

3) Functionality

4) Accessibility

The Elements of Interface Design

Functionality

Web sites no longer just provide content – they offer interactivity and value-add functionality

The Elements of Interface Design

Functionality

Web 1.0 vs Web 2.0

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……

The Elements of Interface Design

Functionality

Widgets: http://www.widgetbox.com/

Scripting: javascriptAjax and Javascript Techniques

Flash Interactive elementsExample of a Flash Learning Object

The Elements of Interface Design

1) Usability

2) Visualization

3) Functionality (add-on applications)

4) Accessibility

Working with Images

Images

What are 4 main image formats??

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