Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

Visual design principles & practices for web and mobile apps

These slides are from a one-day class designed to help product teams bridge the gap between applications that look great or are highly functional.

This class, given with the Boston UXPA, provides guidelines and examples about how to make visual design decisions that reinforce usability best practices and create interfaces that people value. Participants learn the characteristics of “visually usable” apps to know what to shoot for, and get an introduction to the visual design “tools” for digital apps – layout, type, color, imagery, and controls and affordances – and how to use them to create appealing applications people can easily understand and use.

10.
Focusing on interface
as a key part of the UX
makes a diﬀerence.
• It makes a diﬀerence to people who are evaluating your app or org.
• It makes a diﬀerence to people who use your app.
• It makes a diﬀerence to design and development team morale.
• It makes a diﬀerence to your organization’s bottom line.
We can do better.

17.
Exercise 1
• Use the principles to help tell a simple story
• Use 4 colors of paper and 4 frames
• Share stories in teams
• Group: discuss which principles were used and how
- How did you establish consistency?
- How did you establish hierarchy?
- How did you convey personality?

19.
Consistency: managing expectations and patterns
Like spoken language, a UI must have patterns or conventions so
people can understand.
Goal: define a consistent framework that can flex
Meta-principles: consistency

25.
If your users share similar characteristics and
are familiar with an existing app, why not make
everything consistent?
Why not just copy
another app?
Why not just use the
iOS or Android
standards?
Meta-principles: consistency

26.
Starting with defaults
Defaults are a good starting point – but visual cues could help use and
these apps lack distinct personalities that can help make them successful.
Meta-principles: consistency

27.
Hierarchy: deﬁning meaningful diﬀerences
•
Consistency is about making decisions about how and where
elements appear, look and behave to take advantage of expectations.
•
Hierarchy is about indicating diﬀerences that help people know how
the app works, what’s important, and what to do.
Meta-principles: hierarchy

34.
How much appeal do we need?
Goal is not novelty for novelty’s sake – the app equivalent of
Stark’s Alessi gold-plated juicer
http://www.flickr.com/photos/dickyfeng/6254476990/
Meta-principles: personality

39.
Criteria for decisions about personality
Thoughtful decisions about expression and diﬀerentiation
grounded in:
1. users and context
• brain: how people see and understand
• individual: age, demographics, experiences & expectations
• situation: device, setting, goals
2. what is being communicated by whom
• content: what is being represented
• sender: who the information & interactions are from
Meta-principles: personality

40.
Selecting expressive qualities
•
How much appeal do you need?
•
How much expression do you need?
Visual usability = useful appeal:
Select type, color, and images, and present them in keeping with the
content, users, and organization.
Meta-principles: personality

46.
Selecting expressive qualities
Are the characteristics appropriate for the situation?
Meta-principles: personality

47.
Gathering visual interface design requirements
•
•
•
What are the business’ application goals?
What do we know/what can we learn about the users?
What are technical implications?
+
•
What personality do we want to convey?

52.
Layout
•
Position/location of elements needs to match flow – tease flow
out of user scenarios.
•
Interface standards (e.g., iOS) provide familiarity, but may not
match user’s flow.
•
Some position conventions, like search on the web, are written
in stone at this point and would need a major reason to change.
Tools: layout

54.
Example: Epicurious iPhone app
Typical scenarios:
•
“It’s really hot today. What can I cook outside on the grill so I
don’t have to heat up my kitchen?”
•
•
“I want to find a chicken recipe for dinner.”
“I have zucchini, peppers, and beef. What can I make with those
ingredients?”
Tools: layout

62.
Choosing type
•
More choices than ever: Google Fonts, Typekit, embedding with
@font-face ...
•
But less is more: choose two or three weights of one typeface, or
a couple weights of only two typefaces, one of which is for
“visual accent”
Expression is possible with
one font!
http://www.thinkingwithtype.com/contents/text/#Project:_Hierarchy
Tools: type

63.
Epicurious’ typography
Helvetica in roman and bold weights doing 95% of the work with two typographic accents
Tools: type

66.
Avoid common type mistakes
•
•
Default: use one clear typeface with a variety of weights
•
•
Apply type styles to similar information across templates
Use type styles as the grammar of your visual language –
as a consistent system
Try emphasizing diﬀerence and/or directing the eye with contrast
via size and color before using an expressive font
Tools: type

71.
Tips for choosing color to create contrast
•
•
Pick a “lead” color that
will either have the job
of conveying
personality or will
support a palette of
colors used in small
amounts
•
Pick an accent color to
highlight small controls
or important
information
•
Tools: color
Type color must
contrast suﬃciently
with background
Shades and/or tints
make palettes work

76.
Avoid common mistakes
•
Use color to emphasize similarities and diﬀerences, which
support use
•
•
Color has its own tone of voice – shout or whisper with intent
Follow accessibility guidelines for color use and contrast
Tools: color

77.
Imagery
Imagery has to play a role. It has a job to do:
•
•
•
•
•
•
Draw attention
General
Provide explanation or
show detail
Strategic
Purpose
Tactical
Type
Presentation
Subject
matter
Qualities
Represent content
Role
Express feeling, brand,
or style
Invite interaction
Reinforce similarities or
diﬀerences
Tools: imagery
Specific
Early in process
Later in process

78.
Types of imagery
Photography
•
•
Use when realism matters
When people consider a visit,
or a purchase of goods or
personal services
Video
•
•
Use when explaining a process
Describing details best
revealed through motion
Tools: imagery

79.
Types of imagery
Animation
•
•
Giving the gist of a process, not the details
•
•
When motion helps convey personality
Communicating with diverse cultures, where details might not
translate
When still images aren’t enough, or novelty is needed
Tools: imagery

80.
Types of imagery
Logos
•
•
•
On a product or branded service
To represent a product
To represent parent organization
Tools: imagery

81.
Types of imagery
Icons
•
When you can represent something with a simple
picture, and want to add variety for visual interest
•
•
•
When app standards call for an icon
Non-obvious icons should include type
Icons with the same role should use the same style
Symbols
•
Represent object, action, or idea, but don’t need to
resemble it
•
Use when communicating something your
audience universally understands
•
Use when common symbols exist for the concept
represented
Tools: imagery

82.
Types of imagery
Charts and graphs, including
interactive data visualizations
•
When visually representing factual
or quantitative data with
enhances understanding
•
When comparing data sets to
quickly understand diﬀerences
•
Need visual relationships to other
elements – all graphics need to
speak the same language.
•
Manipulate contrast and hierarchy
with choice of color and size to
highlight significance.
Tools: imagery

83.
Types of imagery
Maps
•
Use when people need to find a destination or visualize
relationships between locations
•
When providing visual reference for a location adds meaning/
recognition/context
Tools: imagery

88.
Avoid common mistakes
•
•
•
•
•
Only use images that play a role in the overall story
Choose the right type of image for the job
Present images clearly
Design and present images of the same type consistently
Include a caption or supporting info unless image meaning is obvious
Tools: imagery

96.
Exercise 3
• Work in groups of 3. Evaluate the wireframes in terms of
consistency, hierarchy and personality.
• Imagine, discuss and sketch options and variations the next round.
How can you design using the three principles?
-
Think about consistency. What needs to be consistent?
Manipulate the layout to help with hierarchy.
How would you apply visual design to these or other controls
to address/improve consistency, hierarchy, and personality?
• Fill out the Visual Lexicon template.
Use the content/features provided. ~15 mins.
Dropbox: http://bit.ly/1aCnceD
• Share what would change, why, and how.