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.

Flatly Authentic Digital Design

208 views

Published on

Today’s world is full of open, and airy, beautiful, tediously identical, and unusable designs. Trends shouldn’t be taken too far, and we can easily make modern interfaces that work. But being authentically digital doesn’t just mean removing gradients and woodgrains.

In this workshop we’ll discuss principles, define how to make interfaces that work for real people in the real world, and redesign design your website, mobile app or other interface how people expect their various devices to work for them.


Presented at UXPA-China UserFriendly 2016 in Suzhou, 19 November 2016.

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Flatly Authentic Digital Design

  1. 1. 1 @shoobe01 @UXPA_China Flatly Authentic Digital Design
  2. 2. 2
  3. 3. 3
  4. 4. 4 Flat design has always been a thing. Even long before digital, simple graphic design is some of the most classic work.
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15 Authentically Digital
  16. 16. 16 Sun/Moon Data
  17. 17. 17
  18. 18. 18 First, Don’t Draw
  19. 19. 19 First, Don’t Draw • Graphical positions • Summary data • Detail views • Sunrise/Sunset time • Moonrise/Moonset • Sun/Moon transit times • Sun, twilight • Moon phase, percentage lit • Civil, nautical, astronomical • Key moon phase dates • Change date, calendar • Azimuth, distance • Sky cover (local weather)
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31 49% 26% 10%36%
  32. 32. 32 65%60% 84%
  33. 33. 3333
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39 Primary • Graphical sun position • Graphical moon position • Times • Phase, % • Transit • Text labels Hierarchies of Information Secondary • Detail view • Calendar • Dates • Azimuth, distance Tertiary • Location • Nautical, civil, astro switch • Weather
  40. 40. 40 Information Design
  41. 41. 41 Information Design (Box Model)
  42. 42. 4242
  43. 43. 4343 62% 24% 9%
  44. 44. 44
  45. 45. 45
  46. 46. 46
  47. 47. 47 2.5” 3.5” 5” 7-10” In Stand 4 pt 6 pt 7 pt 8 pt 10 pt
  48. 48. 48 Type size in points Device class Minimum Basic content Enhanced content H3 H2 H1 Small phone 4 5.5 7.2 8.5 10.8 14.4 Large phone 6 8.5 10.8 12.6 16.2 21.6 Phablet 7 9.8 12.6 14.7 18.9 25.2 Small tablet 8 11.2 14.4 16.8 21.6 28.8 Large tablet / desktop 10 14 18 21 27 36
  49. 49. 49 At least 7:1 for normal text At least 4.5:1 for large text Black & White is 23:1
  50. 50. 50 Interface Design
  51. 51. 51 Time to Draw
  52. 52. 52 Time to Draw
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. 56
  57. 57. 57
  58. 58. 58 1. Fulfill the practical needs of modern life 2. Express the spirit of our times 3. Benefit by contemporary advances in the fine arts and pure sciences 4. Take advantage of new materials and techniques and develop familiar ones 5. Develop the forms, textures and colours that spring from the direct fulfilment of requirements in appropriate materials and techniques 6. Express the purpose of an object, never making it seem to be what it is not 7. Express the qualities and beauties of the materials used, never making the materials seem to be what they are not 8. Express the methods used to make an object, not disguising mass production as handicraft or simulating a technique not used 9. Blend the expression of utility, materials and process into a visually satisfactory whole 10. It should be simple – its structure evident in 11. Master the machine for the service of people 12. Serve as wide a public as possible, considering modest needs and Good Design
  59. 59. 59
  60. 60. 60
  61. 61. 61 Contact me for consulting, design, to follow up on this deck, or just to talk: Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01 on: www.4ourth.com

×