Interface Design Basics
•
0 likes•89 views
An introduction to Interface Design that covered topics from how we see, how we recognize shapes, recognize patterns, and how we can use cognition process basics to inform the layout and design of our UI. Held at the first PSPDFKit retreat.
Recommended
Recommended
More Related Content
Similar to Interface Design Basics
Similar to Interface Design Basics (20)
Recently uploaded
Recently uploaded (20)
Interface Design Basics
- 1. Interface Design A quick and basic introduction
- 2. Interface Design Surprise! We’re not talking buttons today! 😛
- 3. Contrast
- 4. Contrast
- 5. Contrast
- 6. Contrast
- 7. Color and why all colors aren’t equal
- 8. 380 NM THE VISIBLE COLOR SPECTRUM NORMALIZEDABSORBANCE 0.2 0.4 0.0 0.6 0.8 1.0 400 NM 500 NM 600 NM 700 NM 750 NM S 420nm R 500nm M 534nm L 564nm ULTRAVIOLET ~ 10 – 400 NM VIOLET ~ 400 – 450 NM BLUE ~ 450 – 490 NM GREEN ~ 490 – 560 NM YELLOW ~ 560 – 590 NM ORANGE ~ 590 – 635 NM RED ~ 635 – 700 NM INFRARED ~ 700 NM – 1 MM WAVELENGTH: PHOTORECEPTOR CELL PEAK SENSITIVITY COLOR WAVELENGTH INTERVAL: Color
- 9. Color 50% BLUE 100% BLUE 100% BLUE WITH 50% GREEN 50% GREEN 100% GREEN 100% GREEN WITH 25% BLUE AND 25% RED 50% RED 100% RED 100% RED WITH 50% GREEN
- 10. Color Contrast
- 11. Color Contrast
- 12. Color Contrast
- 13. Color Contrast
- 14. Color Contrast
- 15. Color Contrast Sorry for giving you eye cancer! :) …moving right along… 😁
- 16. Shapes
- 17. Shapes
- 18. Shapes
- 19. Shapes
- 20. Shapes
- 21. Shapes
- 22. Shapes
- 23. Shapes
- 24. Shapes
- 25. Shape Contrast
- 26. Shape Contrast
- 27. Shape Contrast size & whitespace
- 28. Shape Contrast perceived size is relative
- 29. Patterns and why we notice things
- 30. Patterns
- 31. Patterns
- 32. Patterns
- 33. Patterns
- 34. Patterns
- 35. Patterns
- 36. Patterns
- 37. Patterns & Elegance Or why some things are pleasant to look at. a quick digression
- 38. Patterns & Elegance Our Brain = Pattern Recognition Machine™ More Patterns = Less To Think About Less To Think About = Wheee! Sweet! Me Gusta!
- 39. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
- 40. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
- 41. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
- 42. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
- 47. Patterns can be complex…
- 48. …but too much complexity can make them irritating
- 49. Grouping
- 50. Grouping People can only hold a small number of objects in their working memory.
- 51. Grouping Research tells us the number is 3, which is evidenced by many cultures counting: 1, 2, (3,) Many
- 52. Grouping We have to work around that with grouping (which ideally supports abstraction).
- 53. Grouping - Circle Count count the circles 😬
- 54. Grouping - Circle Count spatial grouping
- 55. Grouping - Circle Count color coding
- 56. Grouping - Circle Count BOOM! Patterns!
- 57. Grouping - Circle Count HAH!
- 58. Typography
- 59. Typographical Shapes A M C I K X
- 60. Typographical Shapes A M C I K X Patterns™
- 61. Typographical Contrast Even contrast and spacingallow us to recognise shapes (characters) faster
- 62. Typographical Contrast Low Contrast Even Contrast* Strong Contrast *) Even-ish
- 63. Typographical Contrast Cras mollis scelerisque nunc Cras mollis scelerisque nunc Cras mollis scelerisque nunc Becomes important when the text we look at is small in size (or far away)…
- 64. Typographical Contrast Hello, I’m an iPhone. I’m running iOS 7. Bow before me! …or problematic when Apple decides to be Modern™
- 65. Typography - Reading Character shapes, grouping, contrast (size, thickness, color) help our pattern recognition
- 66. So!
- 67. Now that we know everysink!
- 68. Lets see if we can interface-design this:
- 69. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Please pick your options: inspired by Windows software
- 70. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Please pick your options:
- 71. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Left Options Right Options
- 72. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Left Options Right Options
- 73. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Optional Some More Options
- 74. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Optional Some More Options
- 75. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Some More Options Optional
- 76. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Some More Options Optional
- 77. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Some More Options Optional
- 78. Ta-daa!