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.

User Interface Design - Talent Bandung - @daengdoang

198 views

Published on

User Interface Design
Disampaikan di acara
Talent Bandung tahun 2017 bulan November
Kelas Desain UI/UX

Daeng Muhammad Feisal
UXiD (UX Indonesia)
- @daengdoang

Published in: Design
  • Be the first to comment

User Interface Design - Talent Bandung - @daengdoang

  1. 1. USER INTERFACE
 DESIGN UI+UXCLASS @daengdoang
  2. 2. 50 Years Journey Back in Time
  3. 3. What is a User Interface? Software: application, website, or mobile app User Interface is the body of a software
  4. 4. Software User Interface Function Data
  5. 5. UI answers 3 ‘HOW’ questions • How it looks like (VISUAL) • How it is understood (COGNITIVE) • How it works (INTERACT)
  6. 6. User Interface Journey Desktop Web Mobile
  7. 7. 1962 First User Interface
  8. 8. 1st Computer Game Spacewar
  9. 9. Steve Russell
  10. 10. VISUAL intriguing COGINITIVE 4 commands - spin left - spin right - thrust - fire INTERACT Keyboard
  11. 11. 1964 The Mouse
  12. 12. The Mouse
  13. 13. Douglas Engelbart
  14. 14. 1978 Command Line Interface
  15. 15. VisiCalc (The first ever spreadsheet)
  16. 16. Bob Frankston & Dan Bricklin invented spreadsheet
  17. 17. 1983 WIMP / GUI – Apple Lisa
  18. 18. 1st personal computer to use GUI
  19. 19. WIMP to GUI W = Windows I = Icons M = Menus P = Pointer
  20. 20. Steve Jobs with Lisa “We're prepared to live with Lisa for the next ten years.”
  21. 21. 1995 UI Frameworks
  22. 22. Visual Studio
  23. 23. Photo Editor
  24. 24. 2003 Widgets
  25. 25. Konfabulator
  26. 26. 2011+ Advanced User Interfaces
  27. 27. Zooming User Interface
  28. 28. Direct Manipulation
  29. 29. 3D Interface
  30. 30. Skeuomorphic Interface
  31. 31. Modern /Metro UI
  32. 32. 1990 World Wide Web
  33. 33. Tim Berners-Lee invented Web
  34. 34. Static Web
  35. 35. Dynamic Web - Online Store
  36. 36. 1997 Blog
  37. 37. Wordpress Themes
  38. 38. 2004 Web 2.0
  39. 39. 2005 Ajax
  40. 40. Ajax
  41. 41. 2012 HTML5 – 1st Working Draft
  42. 42. HTML5 – Adaptive User Interface
  43. 43. HTML5 – CSS3
  44. 44. 1991 Mobile Touch Interface
  45. 45. Pen based Interface
  46. 46. Pen Based Interface
  47. 47. 2003 Touchscreen Interface - FingerWorks
  48. 48. Multi Touch Interface
  49. 49. Gesture based Interface
  50. 50. User Interface Evolution Map 1962 1964 1978 1983 1991 1995 1997 2003 2004 2011 2012
  51. 51. This is Not the End Now this is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning. - Winston Churchill
  52. 52. Disclaimer Disclaimer 100+ design services every day
  53. 53. Let’s check Design collections
  54. 54. 1) Find inspiration 2) Find assets 3) Design rules of thumb 4) Sketch demo Roadmap
  55. 55. 1) Inspiration We are not born designers, We just copy/paste find inspiration
  56. 56. What are you looking for? General inspiration UI components examples Website design examples
  57. 57. Inspiration for everything
  58. 58. Challenge #1 - Dribbble search A wagon or van A signup form An icon set A free food icon set …
  59. 59. Inspiration for UI
  60. 60. Challenge #2 - CallToIdea search A login form A footer A 404 page …
  61. 61. UI pre-requisite, you must read http://www.goodui.org/
  62. 62. Inspiration for Website design
  63. 63. 2) Resources
  64. 64. What’s a graphical asset? Colors Images Icons Fonts
 Code Snippets Gradients
  65. 65. Colors - color pickers Sip ColorZilla
  66. 66. Colors - resources colorhunt.co coolors.co
  67. 67. http://nathanspeller.com/color-pickers/ Colors - trends
  68. 68. Images - resources flick.com
 exhaustive pixels.com
 selective unsplash.it
 for prototypes
  69. 69. Icons - resources thenounproject.com
 historic (B&W) iconstore.co
 free icons sets
  70. 70. Challenge #3 - IconStore search Entertainment icons … Sport icons Legal icons
  71. 71. Fonts - tools FontFaceNinja
  72. 72. Fonts - resources google.com/fonts
 free myfonts.com
 paid
  73. 73. Challenge #3 - Fonts search Montserrat on Google … Raleway on Google Avenir on MyFonts
  74. 74. Gradients - resources
  75. 75. Code Snippets - resources codepen.io
  76. 76. Challenge #4 - CodePen search Loading … Progress Bar Beers animation
  77. 77. 3) Design Rules of Thumb
  78. 78. #1 - One day to fix your identity Don’t beat around the bush
  79. 79. Persian Red - #D23333 Quincy - #6C5145 Mine Shaft - #343434 Sea Blue - #006A9C Example - Our Colors
  80. 80. Example - Our Fonts
  81. 81. Le Wagon NOT lewagon LeWagon leWagon le wagon le Wagon Example - Our Spelling
  82. 82. #2 - Font = ratios
  83. 83. #3 - Don’t buy all Font suite Buy desktop version (.ttf) and convert it for web
  84. 84. #4 - Contrast your texts Big Bold Black Header Light Small Grey sub-header
  85. 85. #5 - Don’t play fancy with colors Gray scale is your best friend Bring colors with small touches
  86. 86. Gray scale + Green
  87. 87. #6 - Design = Space The space that surrounds an object is as important as the object itself.
  88. 88. #4 - No more startup stocks Make it personal
  89. 89. #7 - Add filters & shadows
  90. 90. Can’t read text
  91. 91. Can read text
  92. 92. Better with text shadow
  93. 93. #8 - Good Design is the one you don’t notice
  94. 94. Poor Radius
  95. 95. Good Radius
  96. 96. Poor Border
  97. 97. Good Border
  98. 98. Poor Shadow
  99. 99. Good Shadow
  100. 100. #9 - Think proportions Size doesn’t mean proportion
  101. 101. Same Sizes
  102. 102. Same Proportions
  103. 103. 4) Sketch Demo
  104. 104. Challenge #5 - Sketch Sprint Newsletter banner for Le Wagon London Social icons resized and colored Let’s build Custom icons re-shaped
  105. 105. Remember Design is accessible
  106. 106. Thank you!

×