Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Digital design workshop

1.072 visualizaciones

Publicado el

A lightening speed introduction to the world of digital design. Targeted at people from graphic design, advertising or marketing backgrounds who are looking to make the transition into the digital design world.

Publicado en: Diseño
  • Sé el primero en comentar

Digital design workshop

  1. 1. t t DIGITAL DESIGN KATHERINE BARROW | DESIGN ASSEMBLY | PIXEL FUSION #DADigitalDesign | @KatBarrow | @PixelFusion_NZ | @DsgnAssemblyNZ
  2. 2. WHO AM I?
  3. 3. WHO ARE YOU?
  4. 4. 9:15 THE DEFINITION 9:30 THE MINDSET 10:00 THE PROCESS 11:00 THE BREAK 11:15 THE PROCESS II 12:00 THE FUTURE
  5. 5. WHAT IS DIGITAL DESIGN?
  6. 6. WE’RE DESIGNING HOW WE INTERACT WITH TECHNOLOGY
  7. 7. WE’RE DESIGNING INTERACTIVE TOOLS
  8. 8. WE ARE DESIGNING SYSTEMS
  9. 9. WE ARE DESIGNING EXPERIENCES
  10. 10. Digital design is the process of conceptualising, designing and styling interactive digital products such as websites and mobile applications.
  11. 11. THE DIGITAL DESIGN MINDSET
  12. 12. SWITCH YOUR MINDSET
  13. 13. STATIC VS FLUID LAYOUTS
  14. 14. STATIC VS DYNAMIC CONTENT
  15. 15. IT HAS TO BE BUILT
  16. 16. IT HAS TO PERFORM
  17. 17. IT’S A LIVING MEDIUM - IT HAS TO EVOLVE
  18. 18. THE DIGITAL DESIGN PROCESS
  19. 19. USABILITY
  20. 20. “Usability means making sure something works well, and that a person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated.”
  21. 21. PUSH OR PULL?
  22. 22. INSTRUCTIONS UNCLEAR
  23. 23. When you have trouble with things —whether it's figuring out whether to push or pull a door or the arbitrary vagaries of the modern computer and electronics industries—it's not your fault. Don't blame yourself: blame the designer.
  24. 24. WHY DOES USABILITY MATTER?
  25. 25. 10 USABILITY COMMANDMENTS
  26. 26. 1. DON’T MAKE ME THINK 2. PROVIDE VISUAL FEEDBACK 3. BE CONSISTENT 4. DON’T WASTE MY TIME 5. FORM FOLLOWS FUNCTION
  27. 27. 6. RECOGNITION VS RECALL 7. HELP ME FIND MY WAY 8. BE HUMAN 9. BE ACCESSIBLE 10. BE RESPONSIVE
  28. 28. USABILITY REVIEWS & TESTING
  29. 29. COMMUNICATING USABILITY
  30. 30. • Have a look at the event cinemas website (https:// www.eventcinemas.co.nz) • Pretend that you want to book tickets for a movie on Sunday. Walk through the site and make note of any usability issues. • Remember to refer back to the 10 commandments! • Present your top 5 observations to the group as you would present them to a client. TASK 1.
  31. 31. BREAK
  32. 32. CONCEPTUAL DESIGN
  33. 33. 1. WHAT IS IT? 2. WHAT IS ITS PURPOSE? 3. HOW DO I USE IT?
  34. 34. MENTAL MODELS
  35. 35. “Mental models are deeply ingrained assumptions, generalisations, or even pictures, that influence how we understand the world and how we take action.” -Peter Senge
  36. 36. MATCH THE USER’S MENTAL MODEL
  37. 37. WIREFRAMING
  38. 38. WHY SHOULD YOU WIREFRAME?
  39. 39. 12 COLUMN GRID
  40. 40. 1 2 1 2 1
  41. 41. USING DESIGN PATTERNS
  42. 42. SHARING WIREFRAMES WITH CLIENTS
  43. 43. • I’m going to put an Event cinemas page up on the screen. Your task is to re-imagine and wireframe this screen. • Individually, create a few rough sketches and high level- just get some ideas. • In your groups- share your sketches and discuss what you like or don’t like. Remember, it’s not just what looks good- think about why you’re making choices and how they will affect the user. • As a group, create a single wireframe for the mobile and desktop views of your page. Remember to think about your responsive grid! • Present to the group. TASK 2.
  44. 44. VISUAL DESIGN
  45. 45. FINALLY… GET THE COLOURS OUT
  46. 46. 1. BRANDING & CONSISTENCY 2. VISUAL HIERARCHY 3. USABILITY & AFFORDANCE 4. STYLE 5. DESIGN SPECIFICATIONS
  47. 47. UI KITS & ATOMIC DESIGN
  48. 48. SKETCH DEMO
  49. 49. • In your groups, examine the website that I have given you. The focus here should be on their visual design and UI. For each of the following statements, decide whether or not you agree, out of 5, with 5 being I strongly agree, and 1 being I strongly disagree. Note down your reasons! • This website uses a consistent style guide. • This website uses visual design to enhance usability and help users achieve their goals. • This website does a good job of selling the brand. • This website feels modern. TASK 3.
  50. 50. THE DIGITAL DESIGN FUTURE
  51. 51. DESIGN TRENDS - SKEUOMORPHISM
  52. 52. DESIGN TRENDS - FLAT DESIGN
  53. 53. DESIGN TRENDS - MATERIAL DESIGN
  54. 54. DESIGN TRENDS - WHAT’S NEXT?
  55. 55. WHAT’S THE BIG DEAL ABOUT BIG DATA?
  56. 56. ENGAGEMENT & HABIT BUILDING
  57. 57. THANK YOU. #DADigitalDesign | @KatBarrow | @PixelFusion_NZ | @DsgnAssemblyNZ Further reading: “Don’t Make Me Think”- Steve Krug “Rocket Surgery Made Easy” - Steve Krug “The Design of Everyday Things”- Don Norman Atomic Design- Brad Frost

×