Main takeaways: - Laying the Groundwork - Aesthetics - Communication - Bonus: Resources and tools to explore

1. www.productschool.com
Components of Digital Product
Design by Tumblr Principal PM

2. Join 55,000+
Product Managers on
Free Resources
Discover great job
opportunities
Job Portal
prdct.school/PSJobPortalprdct.school/events-slack

3. CERTIFICATES
Your Product Management Certificate Path
Product Leadership
Certificate™
Full Stack Product
Management Certificate™
Product Management
Certificate™
20 HOURS40 HOURS40 HOURS

5. Corporate
Training
Level up your team’s Product
Management skills

6. Jason Seney
T O N I G H T ’ S S P E A K E R

7. Digital Product Design
Components of design for Product Managers
working on modern visual features.

8. By understanding not only the strategy of design, but also
the individual steps and components, we can improve the
way we communicate product concepts in a way that
elevates the entire user experience.

9. Laying the Groundwork
User research
Information Architecture
Fidelity Levels
Wireframes & User Flows
Aesthetics
Color
Accessibility
Iconography and art
Brand and style guides
Consistency with components
Communication
UX overview
Space and hierarchy
Copyrighting, humility, and voice
Placeholder content
Typography
DIGITAL PRODUCT DESIGN: Overview

10. User Research
How does this feature fit in with how people use your product?
What core desire will this fulfill?
Are there any pain points with using similar features?
What other products or applications do people currently use?
LAYING THE GROUNDWORK

11. Information
Architecture (IA)
- Content Objects
- Hierarchy
- Relationships
- User Context
- Taxonomies & Labels
LAYING THE GROUNDWORK

12. Source: James Pikover @ Toptal

13. LAYING THE GROUNDWORK
User Flows

14. LAYING THE GROUNDWORK: Information Architecture
” Information architecture is the foundation for great Web
design. It is the blueprint of the site upon which all other
aspects are built – form, function, metaphor, navigation
and interface, interaction, and visual design. ”
– Pamela Statz

15. Fidelity Levels
LAYING THE GROUNDWORK

16. LAYING THE GROUNDWORK: FIDELITY

17. LAYING THE GROUNDWORK: FIDELITY
WireframeBlockframe

18. Low Fidelity Wireframes
Ratios
Shading
Interface elements
Placeholders
Copy
LAYING THE GROUND WORK

19. Exact measurements
Some Color
Grid and
Responsiveness
Iconography
High Fidelity Wireframes
LAYING THE GROUNDWORK

20. Tying it together - User Wire Flows
LAYING THE GROUNDWORK: Fidelity

22. High Fidelity Progression
LAYING THE GROUNDWORK

23. Annotations
LAYING THE GROUNDWORK

24. LAYING THE GROUNDWORK: Prototypes

25. Collaboration
Version control and
commenting tools can
help coordinate design
mocks, review changes,
and create collections.
Long gone are the days
of “Can you send me the
latest design file?”

26. To transform the rudimentary designs into something that projects a brand’s personality, the
colors, icons and symbols are developed to bring the features to life. By creating and leveraging
style guides, these pieces can be composed in a way that develops a consistent feel for each
area of the product while building familiar usage patterns to guide users along their path.
Aesthetics

27. COLOR IS A POWER WHICH DIRECTLY
INFLUENCES THE SOUL
“ Color harmony is about the arrangement of the colors in design in the most
attractive and effective way for users’ perception. When colors are
organized, viewers feel pleased and calm, while disharmony in design gives
the feeling of chaos and disgust. ”
– Alina Arhipova

29. Monochromatic
One color in multiple shades
AESTHETICS: Color
Analogous
Adjacent colors where contrast
is not needed
Complementary
Opposite colors for
high contrast

31. Accessibility
- Contrast
- Legibility
- Sizing
- Color blindness
- Obvious actions and menus
- Page flow
- Responsiveness
If you can’t close your eyes and describe all of the
major actions on the screen, your design may not
be accessible.

32. AESTHETICS: Accessibility

33. Iconography
AESTHETICS

34. AESTHETICS: Iconography
Shape Uniformity
Fill
States (active + resting)
Connectors & Edges
Size
Background
Optical Balance

35. AESTHETICS

36. AESTHETICS: Iconography

37. Consistency
AESTHETICS
- Active states
- Highlights
- Destructive actions
- Reusable components
- Navigational spaces
- Clickable / tappable
elements
- Industry conventions

38. Brand & Style Guides
AESTHETICS
- Strategy
– Logo
– Brand architecture
– Color palette
– Typography
– Brand elements
– Photography
– Identity in context
– Tone of voice

39. AESTHETICS

40. Example:
Sebonic Financial

42. One core concept of design is communicating our ideas while guiding the usability and
desirability of a product. For any type of feature, from a settings screen to a registration
form, our communication with a user tells a story that helps them understand the interface
and the product’s message.
Communication

43. “ Design at its core is communication. And communication
design involves using long established tools of graphic
design and copywriting (which are deeply rooted in
psychology) to influence user behavior.”
– Tobias van Schnieder

44. User Experience
Design, by definition, must be usable,
understandable and actionable. If I
am unconcerned about the user
experience and purely focused on the
visual aspects without relationship to
how it works, I am more likely an artist
than a designer.
COMMUNICATION

46. Copywriting, humility
and voice
Treat your users like humans, and
think about their mindset when using
your product. Very few people are
excited about updating their settings
or canceling a subscription.
Use copy as an opportunity to find
empathy and build a connection with
your users.
COMMUNICATION

47. COMMUNICATION

48. Placeholder content
By using actual user data, we can
identify constraints in the design
early in the process and get a real
feel for how the feature will work.
- Imagery
- Copy length
- Counts
- Language
COMMUNICATION

49. Typography
COMMUNICATION
“ Good typography is measured by how well it
reinforces the meaning of the text, not by some
abstract scale of merit.”
– BUTTERICK’S PRACTICAL TYPOGRAPHY

51. COMMUNICATION: Typography

52. COMMUNICATION: Typography

53. COMMUNICATION:Typography

55. COMMUNICATION: Typography

56. COMMUNICATION: Typography

57. Tools & Resources
Balsamiq Mockups SketchFigma
Principle Invision Abstract
UX Collective
UX Pin

58. creative.tumblr.com

59. “ Design must be an innovative, highly creative,
cross-disciplinary tool responsive to the needs of
[humans]. It must be more research-oriented, and we
must stop defiling the earth itself with poorly-designed
objects and structures. ”
– Victor Papanek

60. www.productschool.com
Part-time Product Management Training Courses
and
Corporate Training