Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Sketching the user experience  Slide 1 Sketching the user experience  Slide 2 Sketching the user experience  Slide 3 Sketching the user experience  Slide 4 Sketching the user experience  Slide 5 Sketching the user experience  Slide 6 Sketching the user experience  Slide 7 Sketching the user experience  Slide 8 Sketching the user experience  Slide 9 Sketching the user experience  Slide 10 Sketching the user experience  Slide 11 Sketching the user experience  Slide 12 Sketching the user experience  Slide 13 Sketching the user experience  Slide 14 Sketching the user experience  Slide 15 Sketching the user experience  Slide 16 Sketching the user experience  Slide 17 Sketching the user experience  Slide 18 Sketching the user experience  Slide 19 Sketching the user experience  Slide 20 Sketching the user experience  Slide 21 Sketching the user experience  Slide 22 Sketching the user experience  Slide 23 Sketching the user experience  Slide 24 Sketching the user experience  Slide 25 Sketching the user experience  Slide 26 Sketching the user experience  Slide 27 Sketching the user experience  Slide 28 Sketching the user experience  Slide 29 Sketching the user experience  Slide 30 Sketching the user experience  Slide 31 Sketching the user experience  Slide 32 Sketching the user experience  Slide 33 Sketching the user experience  Slide 34 Sketching the user experience  Slide 35 Sketching the user experience  Slide 36 Sketching the user experience  Slide 37 Sketching the user experience  Slide 38 Sketching the user experience  Slide 39 Sketching the user experience  Slide 40 Sketching the user experience  Slide 41 Sketching the user experience  Slide 42 Sketching the user experience  Slide 43 Sketching the user experience  Slide 44 Sketching the user experience  Slide 45 Sketching the user experience  Slide 46 Sketching the user experience  Slide 47 Sketching the user experience  Slide 48 Sketching the user experience  Slide 49 Sketching the user experience  Slide 50 Sketching the user experience  Slide 51 Sketching the user experience  Slide 52 Sketching the user experience  Slide 53 Sketching the user experience  Slide 54 Sketching the user experience  Slide 55 Sketching the user experience  Slide 56 Sketching the user experience  Slide 57 Sketching the user experience  Slide 58 Sketching the user experience  Slide 59 Sketching the user experience  Slide 60
Upcoming SlideShare
Steve Krug: Lazy Person's Guide to a Better World - UX Lisbon 2010
Next
Download to read offline and view in fullscreen.

156 Likes

Share

Download to read offline

Sketching the user experience

Download to read offline

Sketching the user experience. Learning the basic of UX design and understand a new design workflow for the responsive age with a more design-to-prototype approach. Understanding the value of design prototype at different levels & stage of the design process to test and validate the user experience.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Sketching the user experience

  1. Sketching the UX Experience Antonio De Pasquale Senior Interaction Designer at frog @myinteraction
  2. My name is Antonio De Pasquale I'm a Senior Interaction Designer at frog Milan A little about me I'm specialized in digital interfaces & user experience I'm passioned about the "aesthetics" of movement I'm from Sicily and I love the sea. @myinteraction
  3. Interaction Vs Visual Concept Design research Benchmark Wireframe Information architecture User Requirements User testing User experience flow Motion prototype Prototype ... Concept Visual research Moodboard Grid design Iconography Typography UI Elements Screen design Motion design Prototype ... Most people think like this
  4. Interaction & Visual In reality is like this
  5. Sketching the UX Experience Introduction A different design approach The responsive age Visualizing the UX Design prototype Levels of fidelity The right tool Make it real!
  6. INTRODUCTION
  7. A different design approach 1 Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. ANTOINE  DE  SAINT  EXUPÉRY
  8. What is the User Experience? Introduction A different design approach Sketching the user experience User Experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.
  9. Research Concept Wireframe Visual Develop User testDocument A typical waterfall UX design process From concept design to the final product on the market Introduction A different design approach Sketching the user experience
  10. Waterfall model doesn’t make that much sense in the responsive age. That model worked 3/4 years ago when we lived in a different context with different devices It's over Introduction A different design approach Sketching the user experience
  11. Yesterday Desktop app, fixed grid, mobile interfaces Introduction A different design approach Sketching the user experience
  12. Introduction A different design approach Sketching the user experience N95 first release to the market in Italy: March 2007 - 700€ http://www.youtube.com/watch?v=U-PxHUdur9Q
  13. Introduction A different design approach Sketching the user experience Today Smart Tv, Web App, Mobile, Console, Responsive design
  14. Amazon Kindle Fire HD - 150€ http://www.youtube.com/watch?v=ryYPduoGNjc Introduction A different design approach Sketching the user experience
  15. A different design workflow Things are changing. We need to evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test PrototypeSketch Review Research Concept
  16. Research Concept A different design workflow Things are changing. We need to evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test PrototypeSketch Review
  17. The responsive age 2 Form follows function DIETER  RAMS
  18. The responsive age Sketching the user experience Introduction
  19. The responsive age Sketching the user experience What is the shape of digital experiences? The evolution of technology is changing the boundaries of design Introduction
  20. Clear, iphone & Mac app https://vimeo.com/51690799 Video Introduction Sketching the user experience The responsive age
  21. Sketching the user experience The responsive age Same contents, different shapes Web site, application, digital software is not anymore a static template. It's a frame in an extended fluid experience Introduction
  22. Sketching the user experience The responsive age 1920 px 1440 px 1024 px 320 px Design for the responsive age We need to sketch, visualize, test, prototype and understand the dynamic behaviors on different devices with different proportions & resolutions Our job now is to create future friendly design ecosystems Introduction
  23. From templates to the experience Sketching the user experience The responsive ageIntroduction
  24. Consistent Signature Continuos Transferable Shareable Augmented Context Users Patterns to help understand and define strategies for the multiscreen world Sketching the user experience The responsive ageIntroduction
  25. Unified design language system across products & services Sketching the user experience The responsive age Consistent Introduction
  26. Sketching the user experience The responsive age Tailored unique brand experience that makes the products distinguishable with a consistent interaction model Signature Introduction
  27. Continuos Synchronize your data, creating a continuos multiscreen experience Sketching the user experience The responsive ageIntroduction
  28. Enable content shifting across multiple devices, sharing screens or in case of simultaneous use Sketching the user experience The responsive age Transferable Introduction
  29. Shareable Allow multiple actors to have a simultaneous interaction, or share and customize the same device The responsive age Sketching the user experience Introduction
  30. Augmented Physical interactions go far beyond the digital screens The responsive age Sketching the user experience Introduction
  31. Visualizing the UX 3 We like design to be visually powerful, intellectually elegant, and above all timeless. MASSIMO  VIGNELLI
  32. Introduction Visualizing the UX Sketching the user experience Setting a vision Shaping an idea is a continuous process that needs many iterations cycles for making it in focus
  33. Introduction Visualizing the UX Sketching the user experience Analyze problems & constrains. Refine ideas and explore all the details to make it possible Explore the details
  34. Introduction Visualizing the UX Sketching the user experience Visualize & prototype your concept. Get the feel of the real impact in a physical way Feel the experience
  35. Paper prototyping Interactive wireframe Motion wireframe HTML Design Our tools How we can sketch & prototype the user experience? Introduction Visualizing the UX Sketching the user experience
  36. Introduction Visualizing the UX Sketching the user experience Low fidelity / No interactive
  37. Paper prototyping Introduction Visualizing the UX Sketching the user experience Low fidelity / Low interaction
  38. Introduction Visualizing the UX Sketching the user experience
  39. Introduction Visualizing the UX Sketching the user experience Medium fidelity / Low interaction Interactive wireframes
  40. Interactive wireframes Introduction Visualizing the UX Sketching the user experience Medium fidelity / Medium interaction
  41. Motion prototype Introduction Visualizing the UX Sketching the user experience Medium fidelity / Low interaction Keynote Animated Prototype http://www.lukew.com/ff/entry.asp?1171
  42. Introduction Visualizing the UX Sketching the user experience High fidelity / Low interaction Motion prototype Redefining Android (Frog) http://www.frogdesign.com/work/sharp-aquos.html - https://vimeo.com/43224490
  43. HTML Design Introduction Visualizing the UX Sketching the user experience High fidelity / High interaction
  44. Paper prototyping Interactive wireframes Motion wireframes HTML Design Introduction Visualizing the UX Sketching the user experience Love Quick  and  dirty Easy  to  do Fast  feedback Very  inclusive   Hate Not  quick  enough Too  dirty Hard  to  share Not  self  explaining Love Detailed  and  solid Good  for  defining   content  &  explain   behaviours Hate Hard  for  user  tesCng To  funcConal  with  less experience  of  the  flow The good and the bad Love EmoConal High  quality  feedback TesCng  dynamic   behaviours Hate Time  to  build  them SoHware  knowledge Work  beJer  in  an   advanced  state Love Test  interacCvity Perfect  for  tesCng   process  &  flow Experience  in  contest Hate SoHware  knowledge Time  for  building  the   prototype LimiCng  the  design   process
  45. DESIGN PROTOTYPE
  46. Levels of fidelity 1 It’s the little details that are vital. Little things make big things happen. COACH  JOHN  WOODEN
  47. Levels of fidelity Sketching the user experience It's a User centered design methodology for designing, communicating ad evaluating user interfaces but also for getting feedback as soon as possible and validating the interaction model What is Rapid prototyping? Design prototype
  48. Sketching the user experience Release Early, Release Often Always test, to verify all the different aspects of your design with different levels of fidelity according to the stage of the project Levels of fidelityDesign prototype
  49. Sketching the user experience Fail Early, Fail Often It's not important to close everything for testing our design concept. Every stage is a possible entry point to verify, discuss, iterate, design. Levels of fidelityDesign prototype
  50. High fidelityLow fidelity User test Concept evaluation Sketching the user experience There is no such thing as high or low fidelity, only appropriate fidelity that allows you to achieve the goals you've set for doing a prototype Prototype archetype Vs Fidelity  Hand  Sketch Linked  pdf InteracCve   Wireframe   Video  simulaCon Semi  funcConal   prototype Full  funcConal   prototype Levels of fidelityDesign prototype
  51. The right tool 2 Give me a lever and I can move the world. ARCHIMEDE  DI  SIRACUSA
  52. FunctionalExperience TechnologistDesigner What is the perfect tool? It depends. Depends on what you have to test, what is your audience, the stage of the project and also your personal skills ? Sketching the user experience The right toolDesign prototype
  53. Short cycle Long & progressive A prototype life cycle The life of a prototype is directly connected to the problem it has to solve Design Evaluate CommunicateIterate More cycles, more refinements: better results! The right toolDesign prototype Sketching the user experience
  54. What is relevant is Communicate That's our job The right toolDesign prototype Sketching the user experience
  55. FunctionalExperience HTML/CodeAdobe  edgeFireworksAGer  effectsKeynotePaper  prototype Proto  UIInteracNve  pdf The right tool is the one that helps you in communicate your concept We need to explain complex problems & big project in a simple way and test if they're clear and meaningful to people. There is no perfect tool The right toolDesign prototype Sketching the user experience
  56. Make it real 3 What would life be if we had no courage to attempt anything? VINCENT  VAN  GOGH
  57. FURTHER READING
  58. Further readingSketching the user experience Sketching the user experience Sketching User Experiences: Getting the Design Right and the Right Design Bill Buxton 2007 Designing interactions Bill Moggridge 2007
  59. Further readingSketching the user experience Sketching the user experience Prototype toolsUX Culture Design Workflow Wireframing Responsive  design   workflow  on  mulCple   touchpoints http://viljamis.com/blog/2012/ responsive-workflow/ Reference & Insights Design  process   in  the  responsive  age http://www.slideshare.net/ pkattera/design-process-for- responsive-web-design Does  form  follow   funcCon? http://www.smashingmagazine.com/ 2010/03/23/does-form-follow- function/ Embracing   the  UX  Spectrum http://uxmag.com/articles/ embracing-the-ux-spectrum Visualizing   the  user  experience http://www.slideshare.net/ grantrobinson/visualising-the- user-experience-2261349 Where  wireframes are  concerned http://uxmag.com/articles/where- wireframes-are-concerned Design  beJer  &  faster with  rapid  prototyping http://www.smashingmagazine.com/ 2010/06/16/design-better-faster-with- rapid-prototyping/ Proto.io   http://proto.io/ Paper  stencil  &  prototype   http://www.uistencils.com/
  60. Thanks! Follow me on twitter @myinteraction to continue the discussion!
  • JeannineChen2

    Nov. 24, 2021
  • serafkun

    Nov. 7, 2018
  • MatthiasLampe

    Jul. 30, 2018
  • FabioSerenelli

    Apr. 11, 2018
  • XavierCardetRats

    Jan. 17, 2018
  • DanJarleFllo

    Mar. 6, 2017
  • DanilleDuijst

    Feb. 27, 2017
  • AlexRekas

    Jan. 9, 2017
  • rajadknight

    Dec. 21, 2016
  • phildrob

    Dec. 10, 2016
  • choyayhyung

    Nov. 28, 2016
  • mmeadowsla

    Nov. 23, 2016
  • NPJunior1

    Nov. 9, 2016
  • mbhogavi

    Aug. 19, 2016
  • sairam238

    Jul. 27, 2016
  • ssuser387981

    Jun. 20, 2016
  • rajkumarmagar

    Apr. 6, 2016
  • tomson1759

    Mar. 21, 2016
  • polianagp

    Feb. 20, 2016
  • DaveWright14

    Feb. 6, 2016

Sketching the user experience. Learning the basic of UX design and understand a new design workflow for the responsive age with a more design-to-prototype approach. Understanding the value of design prototype at different levels & stage of the design process to test and validate the user experience.

Views

Total views

71,225

On Slideshare

0

From embeds

0

Number of embeds

14,067

Actions

Downloads

1,152

Shares

0

Comments

0

Likes

156

×