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.

Design - The first user test

5,837 views

Published on

Users will judge the quality of your app based on the design.

Design does not have to be scary or difficult, but how does it really work?
By having clear guidelines andbranding you can give your app that little extra something. Sometimes it can be the difference between downloading the app or choose another one.
We will take a look at how to develop your own brand and design guidelines, and what to consider when implementing already existing ones.
You will get practical tips, tricks and resources to get your app to the next level.

Most examples will be shown from the "app"perspective, but can of course be applied to the web as well.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design - The first user test

  1. 1. Design – The first user test Jessica Engström, Antropoid
  2. 2. Before users even download your app
  3. 3. Users will judge the quality of your app based on the design
  4. 4. Pass the first user test
  5. 5. Coding After Work
  6. 6. Personality to stand out
  7. 7. Cheap
  8. 8. Favorite color women
  9. 9. Favorite color men
  10. 10. Color
  11. 11. Color
  12. 12. Color Brighter Darker Base Contrast
  13. 13. Color
  14. 14. Key takeaways - Color Color palette
  15. 15. Key takeaways - Color Color palette Overlay for variations
  16. 16. Key takeaways - Color Color palette Overlay for variations Shared resource
  17. 17. Color
  18. 18. Typeface Typeface Typeface Typeface Typeface Typeface
  19. 19. Typeface The New York Times
  20. 20. Typeface
  21. 21. Typeface
  22. 22. Typeface
  23. 23. Typeface Times New Roman Rockwell Georgia Baskerville
  24. 24. Typeface
  25. 25. Typeface Arial Verdana Comic Sans Segoe UI
  26. 26. Typeface
  27. 27. Typeface Establish and follow good typographic hierarchy
  28. 28. Typeface Size does matter
  29. 29. Typeface Avoid margin alignment
  30. 30. Typeface Use special effects sparsely
  31. 31. Key takeaways - Typeface Myths Hierarchy Clean
  32. 32. Color Typeface
  33. 33. 9% No company name
  34. 34. 41% Only text
  35. 35. Inclusive name i* metro* *droid
  36. 36. Logo Metrostudio 4 The Nounproject
  37. 37. Logo 95% One or two colours
  38. 38. Logo 93% Recognizable in small sizes
  39. 39. Logo
  40. 40. Logotyp
  41. 41. Key takeaways - Logo Inclusive name Simplicity Size
  42. 42. Color Typeface Logo
  43. 43. Images Photographs or not?
  44. 44. Images
  45. 45. Images
  46. 46. Foto & Bild
  47. 47. This image is taken at Rismyrliden in Skellefteå
  48. 48. This image is taken at Rismyrliden in Skellefteå
  49. 49. This image is taken at Rismyrliden in Skellefteå
  50. 50. Images
  51. 51. Images
  52. 52. Images
  53. 53. Images Download
  54. 54. Images
  55. 55. Images Stockphoto
  56. 56. Images
  57. 57. Images
  58. 58. Images
  59. 59. Images
  60. 60. Images
  61. 61. Images
  62. 62. Key takeaways - Images Scalability Relevance & Quality Readability
  63. 63. Color Typeface LogoImages Branding
  64. 64. Existing guidelines
  65. 65. Platform guidelines Microsoft Design Language Human Interface Guidelines Material Design
  66. 66. Devices
  67. 67. Devices
  68. 68. Devices
  69. 69. Devices
  70. 70. Devices
  71. 71. The 6 R’s Aarrrrrr2-D2
  72. 72. The 6 R’s 1. Resize 2. Reflow 3. Reposition 4. Reveal 5. Re-architect 6. Replace
  73. 73. Resize
  74. 74. Reflow
  75. 75. Reposition
  76. 76. Reveal
  77. 77. Re-architect
  78. 78. Replace
  79. 79. ` Interaction areas
  80. 80. ` Readability areas
  81. 81. Resources brandcolors.net logos.wikia.com/wiki/Logopedia Color.adobe.com Colourlovers.com syncfusion.com Thenounproject.com
  82. 82. Resources shutterstock.com istockphoto.com dreamstime.com pixabay.com Pexels.com
  83. 83. Questions?
  84. 84. Key takeaways Think things through
  85. 85. Key takeaways Think things through Keep it clean and consistent
  86. 86. Key takeaways Think things through Keep it clean and consistent Optimize your layout
  87. 87. Pass the first user test
  88. 88. jessica@catoholic.se @grytlappen catoholic.se CodingAfterWork.com

×