Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Design i/o - Creating Visual Interfaces for Digital Systems

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 47 Anzeige

Design i/o - Creating Visual Interfaces for Digital Systems

Herunterladen, um offline zu lesen

In the presentation, you'll learn how digital design requires a systems-based approach employing concepts from Lean UX and Atomic Design.

Topics that are covered:
- Systems vs. Pages
- Input/Output Framework
- Influences from Lean UX
- Influences from Atomic Design
- Tools & Process Tips

Slides by Sam Moore Senior Design Consultant at Cantina

In the presentation, you'll learn how digital design requires a systems-based approach employing concepts from Lean UX and Atomic Design.

Topics that are covered:
- Systems vs. Pages
- Input/Output Framework
- Influences from Lean UX
- Influences from Atomic Design
- Tools & Process Tips

Slides by Sam Moore Senior Design Consultant at Cantina

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (17)

Ähnlich wie Design i/o - Creating Visual Interfaces for Digital Systems (20)

Anzeige

Weitere von Cantina (17)

Aktuellste (20)

Anzeige

Design i/o - Creating Visual Interfaces for Digital Systems

  1. 1. Design /o: Creating Visual Interfaces 
 for Digital Systems
  2. 2. Sam Moore Senior Design Consultant Visual & Interac"on Design,
 User Experience
 
 sam.moore@can"na.co
  3. 3. Agenda • Atomic Design & Systems Thinking • Design i/o Framework • Inputs • Outputs • Lean UX Principles • Example Project • Ques"ons
  4. 4. Atomic Design & 
 Systems thinking
  5. 5. Atomic design by brad frost atomicdesign.bradfrost.com
  6. 6. Pages vs. Components
  7. 7. context Loca"on or Region User Permission Device Type Time of Day
  8. 8. Atomic Design Process Tips • Iden"fy the endpoints • Consider costs and business impacts • Focus on component rela"onships
  9. 9. Design /o Framework
  10. 10. Visual Design Process Inputs Outputs Design i/o Component Audit Design Preference Test Mood Boards Brand Analysis Metaphor Questions Flows Prototype Interaction Prototype Full HTML Prototype Pattern Library Comps/Page Views
  11. 11. Inputs to design
  12. 12. Metaphor questions If your website was a car, what brand would it be? If your product had a celebrity spokesperson, who would it be and why?
  13. 13. Metaphor questions • Use familiar brands as guideposts • Generate descriptors and perceived brand values • Can uncover differences in opinion between various stakeholders • Help get a discussion started about look and feel
  14. 14. Brand analysis
  15. 15. Brand analysis • Iden"fy reusable elements and uncover the backstory • Understand what guidelines currently exist, and how much they are adhered to • Discover opportuni"es to be!er differen"ate from compe"tors
  16. 16. component audit
  17. 17. component audit • Iden"fy the types digital components needed • Uncover inconsistencies amidst the UI • Find gaps and pa!erns
  18. 18. design preference test
  19. 19. design preference test • Compara"ve either/or survey of styled UI components • O$en helpful following a Components Audit • Helps establish data-based decision making • Good for ge%ng feedback from a large group of stakeholders
  20. 20. Mood Boards
  21. 21. Mood Boards • Focused on gathering inspira"on from other sources • Good for exploring diverse direc"ons • Quick to create, lots of tools available
  22. 22. Visual Design Process Inputs Outputs Design i/o Component Audit Design Preference Test Mood Boards Brand Analysis Metaphor Questions Flows Prototype Interaction Prototype Full HTML Prototype Pattern Library Comps/Page Views
  23. 23. Design outputs
  24. 24. comps/page views • Show how atomic components add up to template layouts • Important for seeing the overall look and feel on broad device types
  25. 25. pattern library/style guide • Explains all the components and their various states and modes • Provides the building blocks for future layouts and features • Helps promote common understanding of UI and visual style for teams
  26. 26. flows prototype • Sta"c screens synced together with clickable hotspots • Very quick and easily editable • Helps uncover user flow issues • InVision, Marvel
  27. 27. interaction prototype • Specific anima"ons and micro-interac"ons • Helps demonstrate final visual polish • Flashy, but focused • Atomic, Principle
  28. 28. full html prototype • The real thing, built right in the browser • Helps to avoid risk, by working directly in the final medium • Especially important for complex or unproven func"onality
  29. 29. Visual Design Process Inputs Outputs Design i/o Component Audit Design Preference Test Mood Boards Brand Analysis Metaphor Questions Flows Prototype Interaction Prototype Full HTML Prototype Pattern Library Comps/Page Views
  30. 30. Lean ux
  31. 31. Lean UX Principles • Frame the vision, be explicit about assump"ons • Select lightweight, appropriate tools • Work collabora"vely, bringing everyone into the design process • Share progress earlier, explain thinking and direc"on • Test and validate quickly, ensure that the user is the focus
  32. 32. Lean Process Tips • Work in a war room, at least part "me • Setup regular checkins - not presenta"ons of deliverables • Give context, be clear which problems you’re trying to solve
  33. 33. example project
  34. 34. Multi-Level Assessment App Flows Prototype Version 1.0 Product Metaphor Questions Brand Analysis Design Preference Test Style Guide Component Audit
  35. 35. KEy Takeaways • Clearly define the design problem to solve • Select and execute the appropriate input exercises • Emphasis Lean UX principles and Atomic Design methods • Always be thinking about the system of components • Focus on gathering user feedback
  36. 36. About cantina • Boston-based digital design and development agency • Founded in 2007, 60+ employees • We help clients like Putnam Investments, John Hancock, CUNA Mutual Group, Epsilon, and Pearson deliver be!er digital products for their customers • Can"na’s people turn great ideas into digital reality, execu"ng with the best design and development techniques available

×