designing interfaces (and wireframes)
Post on 17-Oct-2014
6.480 views
DESCRIPTION
In which we look at the mysteries of moving from boxes and arrows to a real actual interface. It starts with sketching, goes through basic models of interaction on a screen, and finishes with wireframes.TRANSCRIPT
![Page 1: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/1.jpg)
Designing Interfaces(and wireframes)
General Assembly11/14/12
![Page 2: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/2.jpg)
SKETCHING
![Page 3: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/3.jpg)
Understanding ComicsScott McCloud
![Page 4: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/4.jpg)
![Page 5: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/5.jpg)
![Page 6: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/6.jpg)
WE DRAW TO COMMUNICATE First to ourselves, then to others
![Page 7: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/7.jpg)
![Page 8: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/8.jpg)
![Page 9: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/9.jpg)
DRAW LINES
![Page 10: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/10.jpg)
DRAW SHAPES
![Page 11: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/11.jpg)
USED BY: EVERYBODYFrom the Notebooks of Michel Bras
![Page 12: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/12.jpg)
TOOLS FOR EXPRSSIONHow sketch for attention and understanding
![Page 13: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/13.jpg)
Line thickness
![Page 14: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/14.jpg)
Size
![Page 15: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/15.jpg)
Shading
![Page 16: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/16.jpg)
Selective detail
![Page 17: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/17.jpg)
Isolation
![Page 18: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/18.jpg)
Depth
![Page 19: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/19.jpg)
Notation
![Page 20: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/20.jpg)
Make a sketch of this page
Use:• Line weight• Size• Shading• Selective
detail• Isolation• Notation
![Page 21: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/21.jpg)
TRANSFORM YOUR FLOWSMaking pages out of boxes and arrows
![Page 22: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/22.jpg)
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
![Page 23: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/23.jpg)
Each task could have a page
![Page 24: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/24.jpg)
First Yahoo 1994
1995: first graphic logo
Remind you of something?
![Page 25: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/25.jpg)
Including the schedule creator tool…
![Page 26: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/26.jpg)
Wizards: Many boxes,many pages
![Page 27: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/27.jpg)
Use Wizards:• When users want to accomplish a
goal that has many steps. Wizards are good at making sure you don’t miss a step.
• When the steps must be completed in order. Wizards are linear, so it’s impossible to complete them any other way.
• When the task is seldom performed. Wizards can seem slow and plodding, so they are best used in tasks you do only once in a while, like setting up a printer.
• The audience is not technically savvy and is likely to be confused by a page with a lot of choices on it. A Web site can have novice users, and a wizard makes complex tasks seem easy.
• Bandwidth is low and downloading a single big page could take forever, or the tasks require several server calls, which would also slow the page’s load.
• The task has several steps in it, performed only once a visit, such as checkout.
![Page 28: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/28.jpg)
DESIGN A WIZARDTask:
![Page 29: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/29.jpg)
You can group tasks together
![Page 30: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/30.jpg)
Control Panel
![Page 31: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/31.jpg)
You see them on software in preferences, set occasionally, by experts
![Page 32: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/32.jpg)
On the web, they are often account settings
![Page 33: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/33.jpg)
DESIGN A CONTROL PANEL
![Page 34: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/34.jpg)
TOOLBARSBring the settings and the thing modified together
![Page 35: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/35.jpg)
What if we put the tasks with the thing they were modifying?
![Page 36: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/36.jpg)
It’s a toolbarTools here Item affected
here
![Page 37: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/37.jpg)
ToolbarsTools here Item affected
hereAnd here
And here
Photoshop: toolbars on steroids
![Page 38: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/38.jpg)
The web uses toolbars more sparingly
![Page 39: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/39.jpg)
ToolbarsTools here
Item affected here
A simpler design is better for
infrequent use.
![Page 40: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/40.jpg)
GROUP LIKE ITEMSLocation, palette
![Page 41: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/41.jpg)
An Interface is like a table setting, the tools you need are next to the food you eat. Content is the meal.
![Page 42: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/42.jpg)
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)
![Page 43: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/43.jpg)
Why is the response so far from the invitation?
![Page 44: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/44.jpg)
ZONE YOUR PAGE
![Page 45: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/45.jpg)
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.
![Page 46: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/46.jpg)
• 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
![Page 47: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/47.jpg)
Zone this page
![Page 48: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/48.jpg)
ZONE YOUR HOMEPAGE
![Page 49: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/49.jpg)
HOW TO MAKE A WIREFRAME IN 30 SECONDS
![Page 50: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/50.jpg)
Draw a rectangle
![Page 51: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/51.jpg)
Add global elements
![Page 52: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/52.jpg)
• 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
![Page 53: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/53.jpg)
FINALLY, ANNOTATE
![Page 54: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/54.jpg)
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?
![Page 55: Designing Interfaces (and Wireframes)](https://reader034.vdocuments.mx/reader034/viewer/2022050815/5441338cafaf9f4e208b4649/html5/thumbnails/55.jpg)
Homework
• Pick a website to sketch out• Pick a Website to Zone• Try a page form your project