SlideShare une entreprise Scribd logo
1  sur  106
Télécharger pour lire hors ligne
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke
INTERFACE DESIGN FUNDAMENTALS
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
“Like putting
an Armani suit
on Attila the
Hun, interface
design only
tells how to
dress up an
existing
behavior.” –
Alan Cooper
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A framework is the way elements will be organized
on a page for use and understanding
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
From last week’s homework 5min
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A task analysis
From Information Architecture: Blueprints for the Web, this is a task analysis
for a website for Sundance film festival, featuring a schedule planner
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Each task could have a page
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
First Yahoo 1994
1995: first graphic logo
Remind you of something?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Including the schedule creator tool…
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Wizards: Many boxes,
many pages
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
When to Use
Wizards
• Multi step process
• Must be completed in order
• The audience is not
technically savvy
• Bandwidth is low
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
What if we put the tasks with
the thing they were
modifying?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
It’s a toolbar
Tools here
Item affected
here
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Toolbars
Tools here Item affected
here
And here
And here
Photoshop: toolbars on steroids
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
The web uses toolbars more
sparingly
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
ToolbarsTools here
Item affected
here
A simpler design is
better for
infrequent use.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
What other ways can we organize elements? Control
Panels? Carousels? Thumbnail<-> Full Size?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Two videos sites.
The “meal” is the video, and the
tools to consume (or play with) it
are arrayed around the main meal.
(P.S. There are toolbars too)
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHICH PAIR OF
PANTS ARE NOW
39.99?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHICH CAR IS 49.99?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Why is the response so far from
the invitation?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
When designing the page,
group items by similarity and
similarity of task (navigation
items together, editing items
together)
Give them visual importance
based on user number,
usage frequency and
importance to business.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
• Create “zones”
for
functionality
groups.
• You can group
them by
putting white
space around
them, or use
lines
• Remember to
keep tools
close to the
thing your
working on
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT
CLEAR, YOU PROBABLY SHOULD START OVER
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
5 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
5 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
10 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
BUTTONS HAVE MEANING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
LINKS HAVE MEANING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Subtlety will send you to the poor
house.
Tell your users what to do.
Clarity is relaxing, not annoying.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
10 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
On the product page (apples!)
For the company to succeed
2 minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
5 minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
PAINTING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
PAINTING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Comics are read in
the west left to
right, like a page.
However, good
artists add visual
elements to help
you flow.
http://samkieth.blogspot.com/
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
I AM TIMES NEW
ROMAN
Hey, I’m Arial
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
I AM COMIC SANS
I am the devil
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
I AM IMPACT
LOL
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Georgia is always welcome
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A foolish consistency is the hobgoblin of little minds,
adored by little statesmen and philosophers and
divines. With consistency a great soul has simply
nothing to do. He may as well concern himself with his
shadow on the wall. Speak what you think now in hard
words, and to-morrow speak what to-morrow thinks in
hard words again, though it contradict every thing you
said to-day. — 'Ah, so you shall be sure to be
misunderstood.' — Is it so bad, then, to be
misunderstood? Pythagoras was misunderstood, and
Socrates, and Jesus, and Luther, and Copernicus, and
Galileo, and Newton, and every pure and wise spirit
that ever took flesh.
To be great is to be misunderstood.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
To be great is to be
misunderstood.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A foolish consistency is the hobgoblin of little
minds, Adored by little stAtesmen And
philosophers And divines. With consistency A
greAt soul hAs simply nothing to do. he mAy As
Well concern himself With his shAdoW on the WAll.
speAk WhAt you think noW in hArd Words, And to-
morroW speAk WhAt to-morroW thinks in hArd
Words AgAin, though it contrAdict every thing
you sAid to-dAy.
— 'Ah, so you shAll be sure to be misunderstood.' —
is it so bAd, then, to be misunderstood?
pythAgorAs WAs misunderstood, And socrAtes,
And Jesus, And luther, And copernicus, And
gAlileo, And neWton, And every pure And Wise
spirit thAt ever took flesh.
to be greAt is to be misunderstood.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
to be greAt is to be
misunderstood.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A foolish consistency is the hobgoblin of little minds,
adored by little statesmen and philosophers and divines.
With consistency a great soul has simply nothing to do. He
may as well concern himself with his shadow on the wall.
Speak what you think now in hard words, and to-morrow
speak what to-morrow thinks in hard words again, though
it contradict every thing you said to-day.
— 'Ah, so you shall be sure to be misunderstood.' —
Is it so bad, then, to be misunderstood? Pythagoras was
misunderstood, and Socrates, and Jesus, and Luther, and
Copernicus, and Galileo, and Newton, and every pure and
wise spirit that ever took flesh.
To be great is to be misunderstood.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
To be great is to be
misunderstood.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
NATURE
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT DO YOU THINK
ABOUT WHEN YOU
THINK OF A PAINTING
PROGRAM?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
92
Poetics: Control, power, precision
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
93
Values: Lightweight, easy, sketchy,
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT DO YOU THINK
OF WHEN YOU THINK OF
WRITING?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
96
Power, control,
precision,
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
97
mWriter
uty, peace, zen
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
98
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT DO YOU THINK
OF WHEN YOU THINK OF
SOCIAL?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Q&A
"In an architecture of
content, the information
becomes the interface." --
Edward Tufte

Contenu connexe

En vedette

Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Christina Wodtke
 
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsVirtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsDesignCaffeine, Inc.
 
Mental Models and Concept Models
Mental Models and Concept ModelsMental Models and Concept Models
Mental Models and Concept ModelsChristina Wodtke
 
Introduction to User Experience
Introduction to User ExperienceIntroduction to User Experience
Introduction to User ExperienceChristina Wodtke
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction DesignChristina Wodtke
 
User Insights Start the Design Process
User Insights Start the Design ProcessUser Insights Start the Design Process
User Insights Start the Design ProcessSteve Portigal
 
Understanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersUnderstanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersChristina Wodtke
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureChristina Wodtke
 
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)Chris Sauve
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of InterfaceChristina Wodtke
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 
A Taste of: The Now Literacies, Documenting Learning & Digital Portfolios
A Taste of: The Now Literacies, Documenting Learning & Digital PortfoliosA Taste of: The Now Literacies, Documenting Learning & Digital Portfolios
A Taste of: The Now Literacies, Documenting Learning & Digital PortfoliosSilvia Rosenthal Tolisano
 
Women in Tech: How to Build A Human Company
Women in Tech: How to Build A Human CompanyWomen in Tech: How to Build A Human Company
Women in Tech: How to Build A Human CompanyLuminary Labs
 
Mapping & Measuring the Subscriber Journey
Mapping & Measuring the Subscriber JourneyMapping & Measuring the Subscriber Journey
Mapping & Measuring the Subscriber Journeycleverbridge
 
Health and Well-Being on the Social Web
Health and Well-Being on the Social WebHealth and Well-Being on the Social Web
Health and Well-Being on the Social Webron mader
 

En vedette (19)

Designing Social
Designing SocialDesigning Social
Designing Social
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)
 
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsVirtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
 
Mental Models and Concept Models
Mental Models and Concept ModelsMental Models and Concept Models
Mental Models and Concept Models
 
Introduction to User Experience
Introduction to User ExperienceIntroduction to User Experience
Introduction to User Experience
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction Design
 
User Insights Start the Design Process
User Insights Start the Design ProcessUser Insights Start the Design Process
User Insights Start the Design Process
 
Ux aus prototyping
Ux aus prototypingUx aus prototyping
Ux aus prototyping
 
Understanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersUnderstanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It Matters
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information Archtecture
 
Designing with Personas
Designing with PersonasDesigning with Personas
Designing with Personas
 
Class5 Business Design
Class5 Business DesignClass5 Business Design
Class5 Business Design
 
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
A Taste of: The Now Literacies, Documenting Learning & Digital Portfolios
A Taste of: The Now Literacies, Documenting Learning & Digital PortfoliosA Taste of: The Now Literacies, Documenting Learning & Digital Portfolios
A Taste of: The Now Literacies, Documenting Learning & Digital Portfolios
 
Women in Tech: How to Build A Human Company
Women in Tech: How to Build A Human CompanyWomen in Tech: How to Build A Human Company
Women in Tech: How to Build A Human Company
 
Mapping & Measuring the Subscriber Journey
Mapping & Measuring the Subscriber JourneyMapping & Measuring the Subscriber Journey
Mapping & Measuring the Subscriber Journey
 
Health and Well-Being on the Social Web
Health and Well-Being on the Social WebHealth and Well-Being on the Social Web
Health and Well-Being on the Social Web
 

Similaire à Interface Fundamentals

Design Thinking Workshop for Innovative Products and Businesses
Design Thinking Workshop for Innovative Products and BusinessesDesign Thinking Workshop for Innovative Products and Businesses
Design Thinking Workshop for Innovative Products and BusinessesChristina Wodtke
 
Design Thinking for Innovation
Design Thinking for Innovation Design Thinking for Innovation
Design Thinking for Innovation Christina Wodtke
 
05a Fundamentals of UX Workshop: Interface Design
05a Fundamentals of UX Workshop: Interface Design05a Fundamentals of UX Workshop: Interface Design
05a Fundamentals of UX Workshop: Interface DesignChristina Wodtke
 
05b Fundamentals of UX Workshop: Interface Design (for Understanding)
05b Fundamentals of UX Workshop: Interface Design (for Understanding)05b Fundamentals of UX Workshop: Interface Design (for Understanding)
05b Fundamentals of UX Workshop: Interface Design (for Understanding)Christina Wodtke
 
02 Fundamentals of UX Workshop: User Research
02 Fundamentals of UX Workshop: User Research02 Fundamentals of UX Workshop: User Research
02 Fundamentals of UX Workshop: User ResearchChristina Wodtke
 
04 Fundamentals of UX Workshop: Information Architecture
04 Fundamentals of UX Workshop:  Information Architecture04 Fundamentals of UX Workshop:  Information Architecture
04 Fundamentals of UX Workshop: Information ArchitectureChristina Wodtke
 
Don Stanley's Web Design 101 LSC 532 lecture 3
Don Stanley's Web Design 101 LSC 532 lecture 3Don Stanley's Web Design 101 LSC 532 lecture 3
Don Stanley's Web Design 101 LSC 532 lecture 3Don Stanley
 
Design Thinking for Educators Discovery through Prototyping
Design Thinking for Educators Discovery through PrototypingDesign Thinking for Educators Discovery through Prototyping
Design Thinking for Educators Discovery through PrototypingMelissa Goodwin
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Deploying & operating microservices
Deploying & operating microservicesDeploying & operating microservices
Deploying & operating microservicesThoughtworks
 
03 Fundamentals of UX Workshop: Interaction Design
03 Fundamentals of UX Workshop: Interaction Design03 Fundamentals of UX Workshop: Interaction Design
03 Fundamentals of UX Workshop: Interaction DesignChristina Wodtke
 
Coding for Designers
Coding for DesignersCoding for Designers
Coding for DesignersMilly Schmidt
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterRapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterCodemotion
 

Similaire à Interface Fundamentals (20)

Design Thinking Workshop for Innovative Products and Businesses
Design Thinking Workshop for Innovative Products and BusinessesDesign Thinking Workshop for Innovative Products and Businesses
Design Thinking Workshop for Innovative Products and Businesses
 
Design Thinking for Innovation
Design Thinking for Innovation Design Thinking for Innovation
Design Thinking for Innovation
 
05a Fundamentals of UX Workshop: Interface Design
05a Fundamentals of UX Workshop: Interface Design05a Fundamentals of UX Workshop: Interface Design
05a Fundamentals of UX Workshop: Interface Design
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
 
05b Fundamentals of UX Workshop: Interface Design (for Understanding)
05b Fundamentals of UX Workshop: Interface Design (for Understanding)05b Fundamentals of UX Workshop: Interface Design (for Understanding)
05b Fundamentals of UX Workshop: Interface Design (for Understanding)
 
02 Fundamentals of UX Workshop: User Research
02 Fundamentals of UX Workshop: User Research02 Fundamentals of UX Workshop: User Research
02 Fundamentals of UX Workshop: User Research
 
04 Fundamentals of UX Workshop: Information Architecture
04 Fundamentals of UX Workshop:  Information Architecture04 Fundamentals of UX Workshop:  Information Architecture
04 Fundamentals of UX Workshop: Information Architecture
 
Pure CSS By Yahoo
Pure CSS By YahooPure CSS By Yahoo
Pure CSS By Yahoo
 
Don Stanley's Web Design 101 LSC 532 lecture 3
Don Stanley's Web Design 101 LSC 532 lecture 3Don Stanley's Web Design 101 LSC 532 lecture 3
Don Stanley's Web Design 101 LSC 532 lecture 3
 
Design Thinking for Educators Discovery through Prototyping
Design Thinking for Educators Discovery through PrototypingDesign Thinking for Educators Discovery through Prototyping
Design Thinking for Educators Discovery through Prototyping
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Design
DesignDesign
Design
 
Deploying & operating microservices
Deploying & operating microservicesDeploying & operating microservices
Deploying & operating microservices
 
03 Fundamentals of UX Workshop: Interaction Design
03 Fundamentals of UX Workshop: Interaction Design03 Fundamentals of UX Workshop: Interaction Design
03 Fundamentals of UX Workshop: Interaction Design
 
Coding for Designers
Coding for DesignersCoding for Designers
Coding for Designers
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterRapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
 

Plus de Christina Wodtke

Game Design Fundamentals: The Formal Elements
Game Design Fundamentals: The  Formal ElementsGame Design Fundamentals: The  Formal Elements
Game Design Fundamentals: The Formal ElementsChristina Wodtke
 
Comunication & Storytelling for Product Managers (and anyone else)
Comunication & Storytelling for Product Managers (and anyone else)Comunication & Storytelling for Product Managers (and anyone else)
Comunication & Storytelling for Product Managers (and anyone else)Christina Wodtke
 
Influence Without Authority
Influence Without AuthorityInfluence Without Authority
Influence Without AuthorityChristina Wodtke
 
Make the Complex Clear with Maps and Models
Make the Complex Clear with Maps and ModelsMake the Complex Clear with Maps and Models
Make the Complex Clear with Maps and ModelsChristina Wodtke
 
Design Strategies for Understanding
Design Strategies for UnderstandingDesign Strategies for Understanding
Design Strategies for UnderstandingChristina Wodtke
 
Visual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing StudiesVisual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing StudiesChristina Wodtke
 
Lecture 010 Polishing the UI
Lecture 010 Polishing the UILecture 010 Polishing the UI
Lecture 010 Polishing the UIChristina Wodtke
 
Lean Teams are Learning Teams
Lean Teams are Learning TeamsLean Teams are Learning Teams
Lean Teams are Learning TeamsChristina Wodtke
 
Game Design Fundamentals Megadeck
Game Design Fundamentals MegadeckGame Design Fundamentals Megadeck
Game Design Fundamentals MegadeckChristina Wodtke
 
Visual Thinking: Working with Pictures
Visual Thinking: Working with PicturesVisual Thinking: Working with Pictures
Visual Thinking: Working with PicturesChristina Wodtke
 
Design the team you need to succeed
Design the team you need to succeedDesign the team you need to succeed
Design the team you need to succeedChristina Wodtke
 
Class 6 Identifying and Validating Assumptions
Class 6   Identifying and Validating AssumptionsClass 6   Identifying and Validating Assumptions
Class 6 Identifying and Validating AssumptionsChristina Wodtke
 
Teaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction DesignTeaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction DesignChristina Wodtke
 
The Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 NeedfindingThe Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 NeedfindingChristina Wodtke
 
The Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offeringThe Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offeringChristina Wodtke
 
The Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product IdeationThe Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product IdeationChristina Wodtke
 
In Defense of Childish Things
 In Defense of Childish Things In Defense of Childish Things
In Defense of Childish ThingsChristina Wodtke
 

Plus de Christina Wodtke (20)

Game Design Fundamentals: The Formal Elements
Game Design Fundamentals: The  Formal ElementsGame Design Fundamentals: The  Formal Elements
Game Design Fundamentals: The Formal Elements
 
Comunication & Storytelling for Product Managers (and anyone else)
Comunication & Storytelling for Product Managers (and anyone else)Comunication & Storytelling for Product Managers (and anyone else)
Comunication & Storytelling for Product Managers (and anyone else)
 
Influence Without Authority
Influence Without AuthorityInfluence Without Authority
Influence Without Authority
 
Make the Complex Clear with Maps and Models
Make the Complex Clear with Maps and ModelsMake the Complex Clear with Maps and Models
Make the Complex Clear with Maps and Models
 
It's complicated
It's complicatedIt's complicated
It's complicated
 
Reboot Your Team
Reboot Your TeamReboot Your Team
Reboot Your Team
 
Design Strategies for Understanding
Design Strategies for UnderstandingDesign Strategies for Understanding
Design Strategies for Understanding
 
Visual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing StudiesVisual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing Studies
 
Lecture 010 Polishing the UI
Lecture 010 Polishing the UILecture 010 Polishing the UI
Lecture 010 Polishing the UI
 
WIAD Boston
WIAD BostonWIAD Boston
WIAD Boston
 
Lean Teams are Learning Teams
Lean Teams are Learning TeamsLean Teams are Learning Teams
Lean Teams are Learning Teams
 
Game Design Fundamentals Megadeck
Game Design Fundamentals MegadeckGame Design Fundamentals Megadeck
Game Design Fundamentals Megadeck
 
Visual Thinking: Working with Pictures
Visual Thinking: Working with PicturesVisual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
 
Design the team you need to succeed
Design the team you need to succeedDesign the team you need to succeed
Design the team you need to succeed
 
Class 6 Identifying and Validating Assumptions
Class 6   Identifying and Validating AssumptionsClass 6   Identifying and Validating Assumptions
Class 6 Identifying and Validating Assumptions
 
Teaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction DesignTeaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction Design
 
The Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 NeedfindingThe Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 Needfinding
 
The Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offeringThe Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offering
 
The Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product IdeationThe Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product Ideation
 
In Defense of Childish Things
 In Defense of Childish Things In Defense of Childish Things
In Defense of Childish Things
 

Dernier

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Dernier (19)

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Interface Fundamentals

  • 1. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike @cwodtke INTERFACE DESIGN FUNDAMENTALS
  • 2. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike “Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
  • 3. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A framework is the way elements will be organized on a page for use and understanding
  • 4. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike From last week’s homework 5min
  • 5. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A task analysis From Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner
  • 6. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 7. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Each task could have a page
  • 8. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike First Yahoo 1994 1995: first graphic logo Remind you of something?
  • 9. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Including the schedule creator tool…
  • 10. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Wizards: Many boxes, many pages
  • 11. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike When to Use Wizards • Multi step process • Must be completed in order • The audience is not technically savvy • Bandwidth is low
  • 12. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 13. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What if we put the tasks with the thing they were modifying?
  • 14. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike It’s a toolbar Tools here Item affected here
  • 15. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Toolbars Tools here Item affected here And here And here Photoshop: toolbars on steroids
  • 16. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike The web uses toolbars more sparingly
  • 17. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike ToolbarsTools here Item affected here A simpler design is better for infrequent use.
  • 18. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 19. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 20. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 21. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 22. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 23. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?
  • 24. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 25. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Two videos sites. The “meal” is the video, and the tools to consume (or play with) it are arrayed around the main meal. (P.S. There are toolbars too)
  • 26. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH PAIR OF PANTS ARE NOW 39.99?
  • 27. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH CAR IS 49.99?
  • 28. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Why is the response so far from the invitation?
  • 29. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 30. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike When designing the page, group items by similarity and similarity of task (navigation items together, editing items together) Give them visual importance based on user number, usage frequency and importance to business.
  • 31. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike • Create “zones” for functionality groups. • You can group them by putting white space around them, or use lines • Remember to keep tools close to the thing your working on
  • 32. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT CLEAR, YOU PROBABLY SHOULD START OVER
  • 33. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  • 34. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  • 35. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  • 36. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 37. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 38. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 39. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike BUTTONS HAVE MEANING
  • 40. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 41. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike LINKS HAVE MEANING
  • 42. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 43. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
  • 44. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 45. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 46. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 47. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 48. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 49. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  • 50. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 51. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 52. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 53. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 54. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 55. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike On the product page (apples!) For the company to succeed 2 minutes
  • 56. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 minutes
  • 57. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 58. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  • 59. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  • 60. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 61. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 62. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Comics are read in the west left to right, like a page. However, good artists add visual elements to help you flow. http://samkieth.blogspot.com/
  • 63. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 64. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 65. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 66. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 67. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM TIMES NEW ROMAN Hey, I’m Arial
  • 68. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM COMIC SANS I am the devil
  • 69. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM IMPACT LOL
  • 70. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 71. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Georgia is always welcome
  • 72. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.
  • 73. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  • 74. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A foolish consistency is the hobgoblin of little minds, Adored by little stAtesmen And philosophers And divines. With consistency A greAt soul hAs simply nothing to do. he mAy As Well concern himself With his shAdoW on the WAll. speAk WhAt you think noW in hArd Words, And to- morroW speAk WhAt to-morroW thinks in hArd Words AgAin, though it contrAdict every thing you sAid to-dAy. — 'Ah, so you shAll be sure to be misunderstood.' — is it so bAd, then, to be misunderstood? pythAgorAs WAs misunderstood, And socrAtes, And Jesus, And luther, And copernicus, And gAlileo, And neWton, And every pure And Wise spirit thAt ever took flesh. to be greAt is to be misunderstood.
  • 75. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike to be greAt is to be misunderstood.
  • 76. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.
  • 77. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  • 78. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 79. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 80. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 81. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 82. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike NATURE
  • 83. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 84. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 85. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 86. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 87. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 88. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 89. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 90. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 91. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?
  • 92. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 92 Poetics: Control, power, precision
  • 93. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 93 Values: Lightweight, easy, sketchy,
  • 94. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 95. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?
  • 96. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 96 Power, control, precision,
  • 97. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 97 mWriter uty, peace, zen
  • 98. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 98
  • 99. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?
  • 100. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 101. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 102. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 103. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 104. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 105. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 106. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Q&A "In an architecture of content, the information becomes the interface." -- Edward Tufte

Notes de l'éditeur

  1. 2 songs (jazz)
  2. You can change the same kind of software with different values
  3. You can change the same kind of software with different values