Turning Wireframes Into Polished Visuals - UX Australia 2017
•
2 gefällt mir•1,020 views
As UXers, and specifically Interaction Designs, most of us are comfortable and in control up until the point where we hand over wireframes to Visual Designers. At that stage, things can get a little tricky. How do you keep control of the design? How do you prevent client stakeholders from steering it in weird and arbitrary directions? How do you even brief the Visual Designer and then provide meaningful critique as they progress the design? We have some answers. Borrowing from behavioural psychology and leveraging Bipolar Emotional Response Testing (BERT) we've devised a method that draws out a design brief directly from users and solves many of the problems often encountered when moving from wireframe to finished visual design. We detail this method and illustrate it by way of a recent mobile app case study. You'll leave with practical tools that you can use on your project to give your wireframes the best chance of becoming fantastic visual designs that meet the specific desires of your users. Oh, and stakeholder reviews will be a breeze.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (13)
Ähnlich wie Turning Wireframes Into Polished Visuals - UX Australia 2017
Ähnlich wie Turning Wireframes Into Polished Visuals - UX Australia 2017 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Turning Wireframes Into Polished Visuals - UX Australia 2017
- 1. Visual Design Chart 1 the chart Wireframe Turning Wireframes into Polished Visuals …Developing a singular, focused visual design brief while reducing stakeholder meddling. Matt Morphett - User Experience Strategist Jack Hsu - Visual UX Designer @mattmorphett @jack_ak_hsu
- 2. 1. Visual design not a User Centred process 2. Visual design not data-driven 3. You lose control of the visual design Problems we’ve observed - UX designer
- 3. 1. Design brief is usability based only 2. Brand-guideline + personas are not enough 3. Visual attributes in a successful design? 4. Visual attributes users find desirable? 5. Business or product stakeholders often provide feedback that they are unqualified to provide Problems we’ve observed - visual designer
- 4. The product
- 7. The visual design brief method
- 8. The visual design brief method 01 Devise bipolar pairs 02 Poll customers 03 Analyse, plot results 05 Evaluate mood boards 04 Create mood boards 07 Validate06 Design
- 9. Visual Design Brief In context DISCOVERY IDEATION DESIGN VALIDATION 01 02 03 04 User research Personas Scenarios Concept Sketches Wireframe Prototype Usability Testing UX process
- 10. The steps in detail
- 11. BERTs
- 12. Bipolar Emotional Response Tests or BERTs are a method of determining people’s subjective response to any designed artefact by plotting their feelings about it along a range of dimensions. BERTs
- 13. Explore the design extremes 01 Devise bipolar pairs
- 14. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold
- 15. • Stick to between 5 and 10 dimensions • Use terms that your audience will understand • Cover the gamut with continua • No overlaps between continua • No negatives, no positives • Leave room for designer interpretation. Suggestions
- 16. 02 Poll customers Poll customers about their ideal visual experience
- 17. When adjusting and monitoring my hearing, I want tools that look and feel: Segment by persona Provide task context
- 18. 03 Analyse, plot results Plot results against bipolar pairs
- 19. Visual DNA Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Customer preference
- 20. 04 Create mood boards Assemble mood boards riff themes
- 21. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Customer preference Moodboard DNA by the Designer
- 22. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Moodboard DNA by the Designer Customer preference
- 23. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Moodboard DNA by the Designer Customer preference
- 25. 05 Evaluate mood boards Customers rate mood boards
- 26. Postive adjectives honest Impressive friendly innovative experienced stressful appealing desirable busy empowering too technical exciting intimidating reliable complex high quality familiar inviting rigid fast simplistic unconventional confusing frustrating unpredictable organised stimulating fun overwhelming slow Negative adjectives
- 27. honest Impressive friendly innovative experienced stressful appealing desirable busy empowering too technical exciting intimidating reliable complex high quality familiar inviting rigid fastsimplistic unconventional confusing frustrating unpredictable organised stimulating fun overwhelming slow
- 28. honest Impressive friendly innovative experienced stressful appealing desirable busy empowering too technical exciting intimidating reliable complex high quality familiar inviting rigid fastsimplistic unconventional confusing frustrating unpredictable organised stimulating fun overwhelming slow
- 29. 20% busy 24% too technical 37% complex 20% simplistic 43% confusing Our users thought this mood board lookedIntricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold
- 30. 37% inviting 47% organised 47% familiar 40% appealing 58% friendly Our users thought this mood board lookedIntricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold
- 31. Take strongest mood board as visual design inspiration.
- 32. 06 Design Marry mood board, DNA, ratings with wireframes and brand guidelines.
- 35. Test product visual designs, ask customers to rate them 07 Validate
- 36. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold 28% familiar 38% friendly 38% simplistic 31% appealing 51% organised Our users thought this concept looked Concept DNA
- 39. Results.
- 40. Stakeholders… Stop asking for drop shadows Trust the design process and people Start saying “I don’t know, what do our customers say?” Users… Encounter products that feel like a natural part of their lives Designers… Receive clear direction Know when their design is working
- 41. The method 01 Devise bipolar pairs 02 Poll customers 03 Analyse, plot results 05 Evaluate mood boards 04 Create mood boards 07 Validate06 Design
- 42. Questions?
- 43. Thanks Special thanks to Shane Morris Mario Boutet Victor Rodrigues David Thambiratnam Robert Southwood Saji Maruthurkkara Akhila Baht Erika Hillemacher Matt Morphett - User experience strategist Jack Hsu - Visual UX Designer @mattmorphett @jack_ak_hsu