UX visual design principles for all levels.

1. Unicorn Invasion
presented in partnership between +
elevator factory, atlanta / june 13, 2017

2. +
Hi!
UX design vs UI design
Step 1: Layout
Feature Prioritization
Gestalt Principles
Wireframing
Step 2: Visual Design
Color, type, and icons
Platform Guidelines
File Management
Step 3: Testing and iteration
Thanks!
AGENDA

3. Hi!
get your unicorn invaded by +

4. +
A unicorn is a mythical user experience
designer with an advanced and adaptive
skill range. Outstanding skills in
graphic design, rapid prototyping, front
end development, user testing, technical
specifications, marketing and branding.
It does not have an opinion, it has a
process, and will harmonize with any
environment.
It’s also a fluffy horse with a horn
projecting from it's head, blueish shoes,
ribbon neck thing and a blinking eye.
Big enough to be used as a cleaning
sponge and small enough to be sealed in
a Jiffy bag.
source: Jeff Gothelf
WHY UNICORNS?

5. +
design director, j+e creative
importantshit.co
calamityjd
cloudjammer
jd jordan

6. +
creative director, 9th path creative
9thpathcreative.com
chickerbp
chickerbp
brandy porter

7. +
- Your name
- Where you’re from
- Why you’re interested in UX and UI
- What’s your favorite food delivery service?
- Your go-to song for working (or working out)
SAY HI AND STUFF

8. +
UX vs UI
+write something cute

9. FUNCTIONALITY
RELIABILITY
USABILITY
JOY
HIERARCHY OF NEED

10. FUNCTIONALITY
RELIABILITY
USABILITY
JOY
DESIGN
ENGINEERING
HIERARCHY OF NEED

11. +
UX VS UI

12. +
UX VS UI

13. UX VS UI
THE USERTHE SHORTEST SUMMARY EVAR

14. THE FIRST RULE OF USER EXPERIENCE
YOU ARE NOT
THE USER

15. CURRENT CLIENTS
WHO ARE THEY?
25-34 YEARS OLD 35-44 YEARS OLD 45-54 YEARS OLD 55 OR OLDER
HIGH S. BACHELOR'S DEGREE MASTER'S DEGREE DOCTORATE
-$20,000 $20-50,000 $50-75,000 $75-100,000 $100-150,000 $150,000+
-$20,000 $20-50K $50-75,000 $75-100,000 $100,000+
‣ Coaching through the legal process
‣ Recommendations on how to handle difficult
situations with their exes
‣ Advice on how to handle the impact of
family-law cases on family and lifestyle
‣ To feel prepared for hearings and court
‣ To see that there is a positive outcome at the
end of the process
NEEDS PAIN POINTS OPPORTUNITIES
NO KIDS 1 KID 2 KIDS 3 KIDS
THROUGH MUTUAL AGREEMENT IN MEDIATION IN COURT
MOTHER HAS CUSTODY OF THE KIDS EQUAL CUSTODY OF THE KIDS
AGE
AVERAGE
$77-95
0 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
EDUCATION
INCOME
EX’S INCOME
KIDS WITH EX
DIVORCED
CUSTODY
SINGLE REMARRIEDMARITAL STATUS
‣ The cost
‣ The stress of family law cases and the process
‣ Parenting through divorce
‣ Gathering all of the relevant information
specific to their case
‣ Unresponsive websites and tools
‣ Difficulty finding good resources
‣ Decision-making in a high-stress process
‣ Focus on life after divorce
‣ Communication/cost efficiencies
‣ Digital communication with attorneys
‣ Pre-hearing checklists (tailored to strategy)
‣ Trackable communication with exes
‣ Check-ins, to keep on track
‣ Documentation recommendations
‣ Recommendation tool
AVERAGE
$64-82
AVERAGE
38-47
AVERAGE
1.27

16. +
UX VS UI
- Is goal-oriented
- Has self-imposed blinders
- Is influenced by prior experiences
- Is impatient
- Has their own technology truth
- Has a unique browser platform and device
THE USER…

17. +
UX VS UI

18. +
FIGURE + GROUND

19. +
FIGURE + GROUND

20. +
Layout
+write something cute
STEP ONE

21. STEP 1: LAYOUT
FEATURE
PRIORITIZATIONAVOIDING THE CREEPS

23. +
USER FLOWS
- An illustration of movement
through a system
- Shows how users go from
point A to point B
- Can come in many forms

24. STEP 1: LAYOUT
ACTIVITY!FOOD DELIVERY SERVICE: FEATURES

25. +
INFORMATION ARCHITECTURE
- Emphasizes relationship
between pages
- Represents pages as static
- Readily translates into
navigation schema
- Defers to taxonomy

26. INFORMATION ARCHITECTURE

27. B
A
USER FLOW

28. STEP 1: LAYOUT
ACTIVITY!FOOD DELIVERY SERVICE: INFORMATION ARCHITECTURE

29. STEP 1: LAYOUT
GESTALT
PRINCIPLESBALANCE!

33. +
GESTALT PRINCIPLES

34. +
GESTALT PRINCIPLES
Order Individuality Segregation DisOrder Hierarchy
Isolation Protection Balance Instability Unity or equality

35. Hipster Ipsum Text
This is a sub title.
Tempor consequat nulla mustache selvage. Trust fund
raw denim readymade tempor odio, sint authentic
chambray hoodie truffaut mustache commodo. Photo
booth meggings magna, quis thundercats nihil small
batch hella mcsweeney's aliqua. Veniam organic
iphone, labore shoreditch portland 8-bit mollit VHS
hella cred. Post-ironic food truck mustache church-
key, sunt consectetur cray you probably haven't heard
of them readymade raw denim accusamus veniam
squid iphone 8-bit. Odd future brunch nostrud PBR.
Banjo selvage skateboard viral cred chillwave.
January 24, 2013
Hipster Ipsum Text
This is a subtitle
Tempor consequat nulla mustache selvage. Trust fund raw denim readymade tempor odio, sint authentic chambray hoodie
truffaut mustache commodo. Photo booth meggings magna, quis thundercats nihil small batch hella mcsweeney's aliqua. Veniam
organic iphone, labore shoreditch portland 8-bit mollit VHS hella cred. Post-ironic food truck mustache church-key, sunt
consectetur cray you probably haven't heard of them readymade raw denim accusamus veniam squid iphone 8-bit. Odd future
brunch nostrud PBR. Banjo selvage skateboard viral cred chillwave.
January 24, 2013
GESTALT PRINCIPLES

36. +
GESTALT PRINCIPLES

37. GESTALT PRINCIPLES

39. GESTALT PRINCIPLES: JUST ENOUGH CONTRAST

41. GESTALT PRINCIPLES: WHITE SPACE

42. GESTALT PRINCIPLES: SIMPLICITY

44. STEP 1: LAYOUT
WIREFRAMINGBOXES AND ARROWS

45. +
WIREFRAMES
- Page-level schematics
- Medium- to high-fidelity
representations of what users
will see
- Typically annotated to
describe interaction details

46. WIREFRAMES

47. Multiple Delivery Areas
1.0.b Delivery Area | Create New Delivery Area
Look Up
Search for New York Address:
UndoClear Map
2
8
Notes
1. Save | Cancel
If user clicks on Save, system should commit entry, return user to Default
view (1.0.a) and add new Delivery Area to list as Active.
2. Form
User can use keyboard to Tab from one field to the next in order from left
to right, top to bottom for mouse less entry.
3. Add Additional Schedule Link
If user clicks on Add Additional Schedule, system should display modal
1.0.b.2 over this screen.
4. Save | Cancel
User can tab from last entry in form to Save button and hit Enter/Return to
save entry.
5. Create New Delivery Area
Area should have fixed width (suggested 430px, ideally 390px, but to be
determined in graphic design comps).
6. Map Area
7. Delivery Area
User can create new delivery area on map.
8. Map Toggle
User can click on toggle button to make map take up entire width of screen
(see screen 1.0.b.1). See Google My Maps for sample interaction.
9. Edit Schedule
If user clicks on Edit icon, system should invoke Edit Schedule modal
(1.0.b.3)
10. Tooltip
See requirements documentation for tooltip content.
11. Activation Date
Date should default to today's date. User can change date to a future date.
If user clicks on the calendar icon, system should display calendar picker.
Tab
Corporate
Service Area
Consumer
Delivery Areas
TabTab TabTabTabTabTab
Consumer Delivery Areas VENDOR ID: 18316
Global Navigation
CancelSave
10
Default Tip Percentage:
10
Minimum Tip Percentage:
Delivery Fee Amount:
.0875
Tax Rate:
30
Order Lead Time:
Delivery Estimate
30
Normal:
60
Busy:
90
Very Busy:
CancelSave
Create New Delivery Area
1
4
3Add Additional Schedule
Delivery Area Name:
9
Edit/Delete
Yes
Temp
Override
Table cell
End Date
00/00/0000
Table cell
Days
00:00 AM
Close
Time
00/00/0000
Table cell
M,T,W,Th,F 00:00 AM
Table cellSa,Sun Table cell
Open Time Start Date
Schedule
7
10
Delivery Fee is Percent:
03 / 15 / 2012
Activation Date:
11
WIREFRAMES

48. STEP 1: LAYOUT
ATOMIC DESIGNATOMS AND MOLECULES

49. +
ATOMIC DESIGN
- Brad Frost theory of content organization
http://bradfrost.com/blog/post/atomic-web-design/

50. +
ATOMIC DESIGN: ATOMS

51. +
ATOMIC DESIGN: MOLECULES

52. +
ATOMIC DESIGN: ORGANISMS

53. +
ATOMIC DESIGN: TEMPLATES

54. +
ATOMIC DESIGN: PAGES

57. Home page Product list Product detail

58. Main navigation
FunctionsMasthead
Footer
Main navigation
FunctionsMasthead
Footer
Main navigation
FunctionsMasthead
Footer
Home page Product list Product detail

59. FunctionsMasthead
Footer
FunctionsMasthead
Footer
FunctionsMasthead
Footer
Home page Product list Product detail
Main navigation Main navigation Main navigation

60. FunctionsMasthead
Hero element
FeatureFeatureFeature
Content
Sidebar or
adverts
Footer
FunctionsMasthead
Item summary
Sidebar or
adverts
Footer
Section
navigation
Featured item
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
FunctionsMasthead
Related items
Footer
Section
navigation
Item photo Item summary
Item name
Buying options
Reviews
Home page Product list Product detail
Main navigation Main navigation Main navigation

62. STEP 1: LAYOUT
DEMO!WIREFRAMING IN MARVEL

63. STEP 1: LAYOUT
ACTIVITY!FOOD DELIVERY SERVICE: WIREFRAMES

64. Visual Design
write something cute +
STEP TWO

65. STEP 2: VISUAL DESIGN
COLOR, TYPE,
AND ICONSBUILDING BLOCKS

66. Color has a predictable and quantifiable
physiological effect that influences
our perception and our behavior.

67. +
COLOR THEORY
MONOCHROMATIC TRIADS ANALOGOUS COMPLEMENTARY SPLIT-COMPLIMENTS

68. COLOR IN CULTURE

69. +
COLOR AND USABILITY: IOS COLOR PALETTE

70. COLOR AND USABILITY: MATERIAL COLOR PALETTE

71. STEP 2: VISUAL DESIGN
COLOR AND
USABILITYIT’S NOT JUST FOR KIDS!

72. COLOR AND USABILITY

73. COLOR AND USABILITY

74. COLOR AND USABILITY

75. COLOR AND USABILITY

76. +
TYPEGRAPHY PRINCIPALS
- Readability v. Legibility
- Spacing
- Clarity
- Mix and Matching Fonts
(Limit yourself to no more than three
typefaces)
- Consistency
- Overdoing Emphasis

80. +
TYPEGRAPHY PRINCIPALS: HEAD VS BODY
- Some typefaces are
designed for use in
headlines (display faces)
- Don’t use a display face to
set body copy. Instead, pair
it with a subtler typeface.
- Or, mix weights and sizes
to create head vs. body
differentiation

82. TYPEGRAPHY PRINCIPALS: THE LITTLE TYPE

83. +
ICONOGRAPHY: PICK THE RIGHT AMOUNT OF DETAIL

84. ICONOGRAPHY: PICK THE RIGHT STYLE

86. ICON RESOURCES: THE NOUN PROJECT

87. ICON RESOURCES: FONT AWESOME

88. STEP 2: VISUAL DESIGN
ACTIVITY!FOOD DELIVERY SERVICE: STYLE CARDS

89. STEP 2: VISUAL DESIGN
PLATFORM
GUIDELINESIOS VS ANDROID VS WEB

90. +
SIZE
MATTERS
PLATFORM GUIDELINES

91. +
DEVICE SIZE FRAGMENTATION

92. +
SCREEN SIZES

93. +
SCREEN SIZES

96. +
MOBILE APPROACHES

97. +
MOBILE APPROACHES

98. +
MOBILE APPROACHES

99. +
MOBILE APPROACHES

100. +
MOBILE APPROACHES

101. +
MOBILE APPROACHES

102. +
MOBILE APPROACHES

103. +
MOBILE APPROACHES

104. +
MOBILE APPROACHES

105. +
NATIVE APP DEVELOPMENT
- An app that users download
- Three big platforms:
iOS, Android, Windows
- Four different languages:
Swift, Objective-C, Java, Visual C++

106. +
HYBRID APPS
- App is written in HTML, CSS, JS
- APIs allow the app to use the device’s
capabilities:
- Accelerometer
- Camera and Media
- Compass and Geolocation
- Contacts, Files, and Storage

107. +
WHICH APPROACH IS RIGHT?
- Rich user experience
- Platform specific
- Proven path for mobile apps
Native
- App-like experience
- Leverages device capabilities
- Multiple platforms
- Fast-development cycles
- Cross-platform
- Instant updates
Hybrid Mobile web

109. STEP 2: VISUAL DESIGN
DESIGN
PATTERNSGENIUSES STEAL

110. +
DESIGN PATTERNS
- Good design is consistent
- Users learn interfaces faster when they are familiar
- Patterns help us design for a usability baseline quickly
- Recognizing and applying patterns is a critical skill for a designer

111. +
DESIGN PATTERNS
- Registration
- Login
- Sign out
- Paywall
- Account settings
- Carousels
- Image zoom
- Social share
- Commenting
- Pagination
- Inline errors
- Breadcrumbs
- Page headers
- Sidebar menu
- Tabs
- Faceted nav
- Expand/collapse
- Inline edit
- Modal edit
- Edit multiple
- Drag-and-drop
- View toggle
- Mode toggle
- Auto-complete
- Live preview
- Progress indicator
- …

113. STEP 2: VISUAL DESIGN
MOBILE DESIGN
PATTERNSGENIUSES MOVE QUICKLY

114. +
MOBILE DESIGN PATTERNS: INTERFACE GUIDELINES
- iOS Human Interface Guidelines
- developer.apple.com/design/
- Android Material Design Guidelines
- material.io/guidelines/material-design/

115. +
‣ androidniceties.tumblr.com
‣ ui-patterns.com
‣ mobile-patterns.com
‣ pttrns.com
‣ inspired-ui.com
‣ zurb.com/patterntap
‣ bradfrost.github.io/this-is-responsive/patterns.html
‣ quora.com/topic/Web-Design
‣ reddit.com/r/web_design
MOBILE DESIGN PATTERNS: RESOURCES

116. STEP 2: LAYOUT
DEMO!VISUAL DESIGN IN SKETCH AND ILLUSTRATOR

117. STEP 2: LAYOUT
ACTIVITY!FOOD DELIVERY SERVICE: VISUAL DESIGN

118. STEP 2: LAYOUT
FILE
MANAGEMENTKEEP YOUR ROOM CLEAN

120. STEP 2: LAYOUT
IOSTHERE IS NO I IN TEAM

127. STEP 2: LAYOUT
ANDROIDWITH OR WITHOUT AN EMOTION CHIP

132. STEP 2: LAYOUT
FILE PREPSO DEVELOPERS LOVE YOU

133. FILE PREP: EXPORTING ASSETS

134. FILE PREP: EXPORTING ASSETS

135. FILE PREP: EXPORTING ASSETS

136. STEP 2: LAYOUT
DEMO!FILE ORGANIZATION

137. +
Testing + iteration
UX unicorns ≠ bronies +
STEP THREE

138. +
TESTING + ITERATION: A/B TESTING

139. +
TESTING + ITERATION: USABILITY TESTING

140. +
TESTING + ITERATION: ANALYTICS

141. +
You’re awesome!
We also like coffee and beer +

142. +
design director, j+e creative
importantshit.co
calamityjd
cloudjammer
jd jordan
creative director, 9th path creative
9thpathcreative.com
chickerbp
chickerbp
brandy porter