SlideShare a Scribd company logo
1 of 55
Designing Interfaces
   (and wireframes)

   General Assembly
      11/14/12
SKETCHING
Understanding Comics
Scott McCloud
First to ourselves, then to others

WE DRAW TO COMMUNICATE
DRAW LINES
DRAW SHAPES
From the Notebooks of Michel Bras
USED BY: EVERYBODY
How sketch for attention and understanding

TOOLS FOR EXPRSSION
Line thickness
Size
Shading
Selective detail
Isolation
Depth
Notation
Make a sketch
of this page

Use:
• Line weight
• Size
• Shading
• Selective
  detail
• Isolation
• Notation
Making pages out of boxes and arrows

TRANSFORM YOUR FLOWS
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
Each task could have a page
Remind you of something?




                   1995: first graphic logo

First Yahoo 1994
Including the schedule creator tool…
Wizards: Many boxes,
    many pages
Use Wizards:
• When users want to                  • The audience is not technically
  accomplish a goal that has            savvy and is likely to be
  many steps. Wizards are good          confused by a page with a lot
  at making sure you don’t miss         of choices on it. A Web site
  a step.                               can have novice users, and a
• When the steps must be                wizard makes complex tasks
  completed in order. Wizards           seem easy.
  are linear, so it’s impossible to   • Bandwidth is low and
  complete them any other way.          downloading a single big page
• When the task is seldom               could take forever, or the tasks
  performed. Wizards can seem           require several server calls,
  slow and plodding, so they are        which would also slow the
  best used in tasks you do only        page’s load.
  once in a while, like setting up    • The task has several steps in it,
  a printer.                            performed only once a visit,
                                        such as checkout.
Task:

DESIGN A WIZARD
You can group tasks together
Control Panel
You see
them on
software in
preferences,
set
occasionally,
by experts
On the web, they are often account
             settings
DESIGN A CONTROL PANEL
Bring the settings and the thing modified together

TOOLBARS
What if we put the tasks with the thing
        they were modifying?
It’s a toolbar
Tools here                    Item affected
                                  here
And here

Tools here
              Toolbars
                           Item affected                  And here
                               here




             Photoshop: toolbars on steroids
The web uses toolbars more sparingly
Tools here
             Toolbars

                        Item affected
                            here




                                A simpler design
                                  is better for
                                infrequent use.
Location, palette

GROUP LIKE ITEMS
An Interface is like a table setting, the tools you need are next
to the food you eat. Content is the meal.
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)
Why is the response so far
  from the invitation?
ZONE YOUR PAGE
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.
• 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
Zone this page
ZONE YOUR HOMEPAGE
HOW TO MAKE A WIREFRAME IN
30 SECONDS
Draw a rectangle
Add global elements
• Next, add the key
  zones
• Start with a list
  of elements,
  perhaps written
  on post its.
  Group them,
  then find them
  homes on your
  page.
• The fill in the
  actual elements
FINALLY, ANNOTATE
Consider
• Where does the content come from? If you have a list of related
  articles, specify how they’re related. Are they the most viewed?
  Most viewed from that section?
• What is the nature of the content? Does it vary greatly in length,
  size, language,and type?
• Is the element required or optional? What happens if the element
  doesn’t appear on that page? Does the layout change?
• Is the element conditional? Does it vary based on other factors?
  For example, do administrators see additional links? What happens
  if an article doesn’t have an associated image? What if it does?
• What’s the default or expected state? Ideally, what’s supposed to
  happen on the page.
• What are the alternate or error states? How does the design
  change when things don’t go right?
Homework
• Pick a website to sketch out
• Pick a Website to Zone
• Try a page form your project

More Related Content

What's hot

Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interfaceThomas Byttebier
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For UseChristina Wodtke
 
Web Application Page Hierarchy
Web Application Page HierarchyWeb Application Page Hierarchy
Web Application Page HierarchyLuke Wroblewski
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan
 
Designing for Social Sandboxes
Designing for Social SandboxesDesigning for Social Sandboxes
Designing for Social Sandboxesbrianoberkirch
 
Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Luke Wroblewski
 
Uxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesUxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesimdurgesh
 
Crafting Great User Experience
Crafting Great User ExperienceCrafting Great User Experience
Crafting Great User ExperienceAshutosh Kumar
 
Linking UX Ideas for an Aha Moment from Non-Empathizers
Linking UX Ideas for an Aha Moment from Non-EmpathizersLinking UX Ideas for an Aha Moment from Non-Empathizers
Linking UX Ideas for an Aha Moment from Non-EmpathizersBalanced Team
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Anna Dahlström
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesThink 360 Studio
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked AcademicsColin Warren
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Marcy Kellar
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked AcademicsJoyce Seitzinger
 
Fundamentals of Object-Oriented UX
Fundamentals of Object-Oriented UXFundamentals of Object-Oriented UX
Fundamentals of Object-Oriented UXSophia Voychehovski
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesSamuel Chow
 
Designing Intuitive SharePoint Sites
Designing Intuitive SharePoint SitesDesigning Intuitive SharePoint Sites
Designing Intuitive SharePoint SitesMarcy Kellar
 

What's hot (20)

Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interface
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For Use
 
Web Application Page Hierarchy
Web Application Page HierarchyWeb Application Page Hierarchy
Web Application Page Hierarchy
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
 
My Evaluation!
My Evaluation!My Evaluation!
My Evaluation!
 
Designing for Social Sandboxes
Designing for Social SandboxesDesigning for Social Sandboxes
Designing for Social Sandboxes
 
Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages
 
Uxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesUxpin web ui_design_best_practices
Uxpin web ui_design_best_practices
 
Crafting Great User Experience
Crafting Great User ExperienceCrafting Great User Experience
Crafting Great User Experience
 
Linking UX Ideas for an Aha Moment from Non-Empathizers
Linking UX Ideas for an Aha Moment from Non-EmpathizersLinking UX Ideas for an Aha Moment from Non-Empathizers
Linking UX Ideas for an Aha Moment from Non-Empathizers
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny Quotes
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked Academics
 
Web Usability July 2011
Web Usability July 2011Web Usability July 2011
Web Usability July 2011
 
Telling Your Stories Through Blogs, Photos, Video
Telling Your Stories Through Blogs, Photos, VideoTelling Your Stories Through Blogs, Photos, Video
Telling Your Stories Through Blogs, Photos, Video
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked Academics
 
Fundamentals of Object-Oriented UX
Fundamentals of Object-Oriented UXFundamentals of Object-Oriented UX
Fundamentals of Object-Oriented UX
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best Practices
 
Designing Intuitive SharePoint Sites
Designing Intuitive SharePoint SitesDesigning Intuitive SharePoint Sites
Designing Intuitive SharePoint Sites
 

Viewers also liked

Thinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer RuffnerThinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer RuffnerChristina 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.
 
Coop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscapeCoop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscapeAmy Jo Kim
 
Designing and Understanding Business
Designing and Understanding BusinessDesigning and Understanding Business
Designing and Understanding BusinessChristina Wodtke
 
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
 
Yahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsYahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsChristian Crumlish
 
User Insights Start the Design Process
User Insights Start the Design ProcessUser Insights Start the Design Process
User Insights Start the Design ProcessSteve Portigal
 

Viewers also liked (10)

Thinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer RuffnerThinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer Ruffner
 
Designing Social
Designing SocialDesigning Social
Designing Social
 
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
 
Ux aus prototyping
Ux aus prototypingUx aus prototyping
Ux aus prototyping
 
Coop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscapeCoop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscape
 
Designing Brand
Designing BrandDesigning Brand
Designing Brand
 
Designing and Understanding Business
Designing and Understanding BusinessDesigning and Understanding Business
Designing and Understanding Business
 
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
 
Yahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsYahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design Patterns
 
User Insights Start the Design Process
User Insights Start the Design ProcessUser Insights Start the Design Process
User Insights Start the Design Process
 

Similar to Designing Interfaces (and Wireframes)

Usability for Web Designers
Usability for Web DesignersUsability for Web Designers
Usability for Web DesignersBen Woods
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites designMarwa Abdelgawad
 
This is not a talk about sharepoint 2013
This is not a talk about sharepoint 2013This is not a talk about sharepoint 2013
This is not a talk about sharepoint 2013Kevin Davis
 
Web design content
Web design contentWeb design content
Web design contentMrCHenderson
 
Web design content
Web design contentWeb design content
Web design contentMrCHenderson
 
How to Implement Domain Driven Design in Real Life SDLC
How to Implement Domain Driven Design  in Real Life SDLCHow to Implement Domain Driven Design  in Real Life SDLC
How to Implement Domain Driven Design in Real Life SDLCAbdul Karim
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook ApplicationsWO Community
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestringteaguese
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane MorrisShane Morris
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?LavaConConference
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul KochKeynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul KochFuture Insights
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!Ashley McQuaid
 
We’re Going Mobile! Great! Wait… What Does That Mean?
We’re Going Mobile! Great! Wait… What Does That Mean?We’re Going Mobile! Great! Wait… What Does That Mean?
We’re Going Mobile! Great! Wait… What Does That Mean?STC-Philadelphia Metro Chapter
 

Similar to Designing Interfaces (and Wireframes) (20)

Usability for Web Designers
Usability for Web DesignersUsability for Web Designers
Usability for Web Designers
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
 
This is not a talk about sharepoint 2013
This is not a talk about sharepoint 2013This is not a talk about sharepoint 2013
This is not a talk about sharepoint 2013
 
Web design content
Web design contentWeb design content
Web design content
 
Web design content
Web design contentWeb design content
Web design content
 
IS100 Week 7
IS100 Week 7IS100 Week 7
IS100 Week 7
 
How to Implement Domain Driven Design in Real Life SDLC
How to Implement Domain Driven Design  in Real Life SDLCHow to Implement Domain Driven Design  in Real Life SDLC
How to Implement Domain Driven Design in Real Life SDLC
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook Applications
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul KochKeynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!
 
We’re Going Mobile! Great! Wait… What Does That Mean?
We’re Going Mobile! Great! Wait… What Does That Mean?We’re Going Mobile! Great! Wait… What Does That Mean?
We’re Going Mobile! Great! Wait… What Does That Mean?
 

More from 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
 

More from 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
 
Class5 Business Design
Class5 Business DesignClass5 Business Design
Class5 Business Design
 
Class 6 Identifying and Validating Assumptions
Class 6   Identifying and Validating AssumptionsClass 6   Identifying and Validating Assumptions
Class 6 Identifying and Validating Assumptions
 
Making the Complex Clear
Making the Complex ClearMaking the Complex Clear
Making the Complex Clear
 
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
 

Recently uploaded

Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign designAkankshaD3
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...pillahdonald
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Cloud99 Cloud
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfSarbjit Bahga
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosDuyDo100
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeCarlgaming1
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Real Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxReal Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxArindamMookherji1
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...Amil baba
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisPeclers Paris
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理thubko
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxjoshuaclack73
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityTracy Lipscomb
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...mikehavy0
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designKhushiGandhi15
 

Recently uploaded (20)

Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Real Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxReal Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptx
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets Durability
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 

Designing Interfaces (and Wireframes)

  • 1. Designing Interfaces (and wireframes) General Assembly 11/14/12
  • 4.
  • 5.
  • 6. First to ourselves, then to others WE DRAW TO COMMUNICATE
  • 7.
  • 8.
  • 11. From the Notebooks of Michel Bras USED BY: EVERYBODY
  • 12. How sketch for attention and understanding TOOLS FOR EXPRSSION
  • 14. Size
  • 18. Depth
  • 20. Make a sketch of this page Use: • Line weight • Size • Shading • Selective detail • Isolation • Notation
  • 21. Making pages out of boxes and arrows TRANSFORM YOUR FLOWS
  • 22. 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
  • 23. Each task could have a page
  • 24. Remind you of something? 1995: first graphic logo First Yahoo 1994
  • 25. Including the schedule creator tool…
  • 26. Wizards: Many boxes, many pages
  • 27. Use Wizards: • When users want to • The audience is not technically accomplish a goal that has savvy and is likely to be many steps. Wizards are good confused by a page with a lot at making sure you don’t miss of choices on it. A Web site a step. can have novice users, and a • When the steps must be wizard makes complex tasks completed in order. Wizards seem easy. are linear, so it’s impossible to • Bandwidth is low and complete them any other way. downloading a single big page • When the task is seldom could take forever, or the tasks performed. Wizards can seem require several server calls, slow and plodding, so they are which would also slow the best used in tasks you do only page’s load. once in a while, like setting up • The task has several steps in it, a printer. performed only once a visit, such as checkout.
  • 29. You can group tasks together
  • 31. You see them on software in preferences, set occasionally, by experts
  • 32. On the web, they are often account settings
  • 34. Bring the settings and the thing modified together TOOLBARS
  • 35. What if we put the tasks with the thing they were modifying?
  • 36. It’s a toolbar Tools here Item affected here
  • 37. And here Tools here Toolbars Item affected And here here Photoshop: toolbars on steroids
  • 38. The web uses toolbars more sparingly
  • 39. Tools here Toolbars Item affected here A simpler design is better for infrequent use.
  • 41. An Interface is like a table setting, the tools you need are next to the food you eat. Content is the meal.
  • 42. 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)
  • 43. Why is the response so far from the invitation?
  • 45. 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.
  • 46. • 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
  • 49. HOW TO MAKE A WIREFRAME IN 30 SECONDS
  • 52. • Next, add the key zones • Start with a list of elements, perhaps written on post its. Group them, then find them homes on your page. • The fill in the actual elements
  • 54. Consider • Where does the content come from? If you have a list of related articles, specify how they’re related. Are they the most viewed? Most viewed from that section? • What is the nature of the content? Does it vary greatly in length, size, language,and type? • Is the element required or optional? What happens if the element doesn’t appear on that page? Does the layout change? • Is the element conditional? Does it vary based on other factors? For example, do administrators see additional links? What happens if an article doesn’t have an associated image? What if it does? • What’s the default or expected state? Ideally, what’s supposed to happen on the page. • What are the alternate or error states? How does the design change when things don’t go right?
  • 55. Homework • Pick a website to sketch out • Pick a Website to Zone • Try a page form your project