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.

1. Designing Interfaces
(and wireframes)
General Assembly
11/14/12

2. SKETCHING

3. Understanding Comics
Scott McCloud

6. First to ourselves, then to others
WE DRAW TO COMMUNICATE

9. DRAW LINES

10. DRAW SHAPES

11. From the Notebooks of Michel Bras
USED BY: EVERYBODY

12. How sketch for attention and understanding
TOOLS FOR EXPRSSION

13. Line thickness

14. Size

15. Shading

16. Selective detail

17. Isolation

18. Depth

19. Notation

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.

28. Task:
DESIGN A WIZARD

29. You can group tasks together

30. Control Panel

31. You see
them on
software in
preferences,
set
occasionally,
by experts

32. On the web, they are often account
settings

33. DESIGN A CONTROL PANEL

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.

40. Location, palette
GROUP LIKE ITEMS

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?

44. ZONE YOUR PAGE

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

47. Zone this page

48. ZONE YOUR HOMEPAGE

49. HOW TO MAKE A WIREFRAME IN
30 SECONDS

50. Draw a rectangle

51. Add global elements

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

53. FINALLY, ANNOTATE

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