Lecture from CS247 at Stanford on effect graphic design for UI. http://cs247.stanford.edu/2018-winter/

1. Week 10
HCI
Design
Studio
• CHRISTINA WODTKE
• MICHAEL BERNSTEIN
• JULIE STANFORD
• CS247.STANFORD.EDU

2. Finishing Interfaces
Bring the polish

3. Why Style
Tiles?

4. Don’t design pages
Design systems
Learn more: https://www.justinmind.com/blog/wireframing-tool-and-atomic-design-user-experience-from-the-bottom-up/

5. Create
Interaction
Framework
and Page
Templates
A framework is how the user moves
through screens, the page templates
show how content is displayed.

6. Choose the Interaction
Framework
• Wizard?
• Toolbar and Canvas?
• Navigation type?

7. Wizards

8. Each task
could
have a
page

9. First Yahoo 1994
1995: first graphic logo
Remind you of something?

10. Wizards: Many boxes,
many pages

11. When to Use
Wizards
• Multi step process
• Must be completed in order
• The audience is not technically
savvy
• Bandwidth is low

12. Toolbar and
Canvas

13. What if we
put the
tasks with
the thing
they were
modifying?

14. It’s a toolbar
Tools here
Item affected here

15. Photoshop: toolbars on steroids
Tools here
Item affected here And here
And here

16. The web uses toolbars sparingly

17. Toolbars
Tools here
Item affected here
A simpler design is
better for infrequent
use.

18. Navigation
Toolbars for content

19. So much navigation

20. Mobile version’s navigation

21. Carasol

22. Navigation as content

23. What other ways
can we organize
elements?
Control Panels?
Carousels?
Thumbnail<-> Full
Size?

24. Page Templates
Even Powerpoint offers layouts for the most likely content
configurations

25. 1. Identify
key pages
• Homepage
• Product Page
• Article
• Search results
• Shopping cart
• Settings
• Account
• Gallery

26. 2. Design a template layout for each
Consider variations such as mobile & desktop

27. 3. Create Themed
Zones for each
page
Navigation
Content
Editing tools
Similar items

28. 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.

29. • 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

30. If you are putting boxes around things to make
it clear, you probably should start over

31. Skin it

32. Final
Touches
Onboarding (NUX/FTUE)
Null States
Error States

33. Useronboarding.com
Complete breakdowns of how sites take users through sign up and getting started.

34. No content?
How can you get users started?

35. Mistakes, I’ve made a few
Make sure your users can recover.

36. Design RulesFor Heuristic
Evaluations

38. Proximity
Matters

39. 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)

40. WHICH PAIR
OF PANTS
ARE NOW
39.99?

41. WHICH CAR
IS 49.99?

42. Why is the response so far from the
invitation?

43. All design
elements
have
meaning

44. BUTTONS HAVE MEANING

45. LINKS HAVE MEANING

46. LINKS HAVE MEANING

47. INPUTS HAVE MEANING

48. Form Principles
Set Expectations
1
Use Appropriate
Inputs
2
Give Clear
Feedback
3

50. Hierarchy Creates
Clarity

55. Subtlety will send you to the poor house.
Tell your users what to do.
Clarity is relaxing, not annoying.

56. Make different
things very different
Make similar things exactly alike
Looks like a mistake Looks purposeful

57. Make it different to make it
appear important
Don’t just make it bigger

58. Use
accents
sparingly
If everything is important,
nothing is.

59. LAYOUTTell the eye where to
look

60. painting

61. painting

64. Comics are read
in the west left to
right, like a page.
However, good
artists add visual
elements to help
you read the flow.
http://samkieth.blogspot.com/

65. Everything is equally important

66. Clear Hiearchy

67. There is
composition
here
Despite the density of information, the eye
lands on the product, and moves to the buy
buttons.
Amazon reassures the user this is a good
place to buy with a plethora of data. It’s part
of their brand.

68. TYPE!Keep it simple,
keep it high contrast

69. I’m a Serif
I’m a sans-serif

70. I am Times New Roman
Hey, I’m Arial

71. I am Comic Sans
I am the devil

72. Papyrus is the new
comic sans
Helvetica is worshiped until it’s trite

73. I am Impact
LOL

75. Georgia is always welcome
Display fonts are hard to read
As are scripts

76. 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. To be great is to be misunderstood.

78. 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.

79. To be great is to be misunderstood.

80. 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.

81. To be great is to be misunderstood.

82. My Design Hacks

83. FONTS: few fonts + contrast
2 fonts
Headline and Body
3 font sizes
HUGE Normal Legal

84. Color: keep it simple
Neutrals, one color with variations and one accent

86. NATURE

90. Got a lot of pictures?
Use less color.

94. DO LESS
• Only use 1-2 fonts.
• Only use 3 font sizes, all very different.
Perhaps a fourth for footer text.
• Only use one color, with variations, and one
“accent” color.
• Turn on the grid (if you are using Photoshop,
etc)
• Never align center.
• Don’t use stock photography, unless you have
awesome taste. It has no soul.
• Know what purpose everything has. No
purpose, take it out.

95. CHEATS
• Design Patterns
• Libraries
• Hire Someone
• Dribble, etc
• Pinterest Collections

96. Q&A

97. Pop Quiz

98. Create a tool to
help students
collaborate
across
departments on
multi-
disciplinary
projects
1. Decide how you’ll
use your time
2. Decide what
questions need
answering
3. Decide what
methods you’ll
you’ll answer those
questions and
brainstorm
solutions
4. Select methods
and order your
process
5. Discuss: is this
right?
6. Send us your plan

99. Appendix