Components of Digital Product Design by Tumblr Principal PM
•
0 likes•144 views
Main takeaways: - Laying the Groundwork - Aesthetics - Communication - Bonus: Resources and tools to explore
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Components of Digital Product Design by Tumblr Principal PM
Similar to Components of Digital Product Design by Tumblr Principal PM (20)
More from Product School
More from Product School (20)
Recently uploaded
Recently uploaded (20)
Components of Digital Product Design by Tumblr Principal PM
- 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
- 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.
- 34. AESTHETICS: Iconography Shape Uniformity Fill States (active + resting) Connectors & Edges Size Background Optical Balance
- 35. AESTHETICS
- 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
- 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
- 57. Tools & Resources Balsamiq Mockups SketchFigma Principle Invision Abstract UX Collective UX Pin
- 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