User Interface Design - Talent Bandung - @daengdoang
6 likes608 views
User Interface Design Disampaikan di acara Talent Bandung tahun 2017 bulan November Kelas Desain UI/UX Daeng Muhammad Feisal UXiD (UX Indonesia) - @daengdoang
User Interface Design - Talent Bandung - @daengdoang
- 2. 50 Years Journey Back in Time
- 3. What is a User Interface? Software: application, website, or mobile app User Interface is the body of a software
- 5. UI answers 3 HOW questions How it looks like (VISUAL) How it is understood (COGNITIVE) How it works (INTERACT)
- 8. 1st Computer Game Spacewar
- 10. VISUAL intriguing COGINITIVE 4 commands - spin left - spin right - thrust - fire INTERACT Keyboard
- 11. 1964 The Mouse
- 12. The Mouse
- 15. VisiCalc (The first ever spreadsheet)
- 16. Bob Frankston & Dan Bricklin invented spreadsheet
- 17. 1983 WIMP / GUI Apple Lisa
- 18. 1st personal computer to use GUI
- 19. WIMP to GUI W = Windows I = Icons M = Menus P = Pointer
- 20. Steve Jobs with Lisa We're prepared to live with Lisa for the next ten years.
- 22. Visual Studio
- 23. Photo Editor
- 24. 2003 Widgets
- 25. Konfabulator
- 30. 3D Interface
- 32. Modern /Metro UI
- 34. Tim Berners-Lee invented Web
- 35. Static Web
- 36. Dynamic Web - Online Store
- 37. 1997 Blog
- 38. Wordpress Themes
- 39. 2004 Web 2.0
- 41. 2005 Ajax
- 42. Ajax
- 43. 2012 HTML5 1st Working Draft
- 44. HTML5 Adaptive User Interface
- 45. HTML5 CSS3
- 49. 2003 Touchscreen Interface - FingerWorks
- 52. User Interface Evolution Map 1962 1964 1978 1983 1991 1995 1997 2003 2004 2011 2012
- 53. 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
- 54. Disclaimer Disclaimer 100+ design services every day
- 55. Lets check Design collections
- 56. 1) Find inspiration 2) Find assets 3) Design rules of thumb 4) Sketch demo Roadmap
- 57. 1) Inspiration We are not born designers, We just copy/paste 鍖nd inspiration
- 58. What are you looking for? General inspiration UI components examples Website design examples
- 60. Challenge #1 - Dribbble search A wagon or van A signup form An icon set A free food icon set
- 62. Challenge #2 - CallToIdea search A login form A footer A 404 page
- 63. UI pre-requisite, you must read http://www.goodui.org/
- 64. Inspiration for Website design
- 65. 2) Resources
- 66. Whats a graphical asset? Colors Images Icons Fonts Code Snippets Gradients
- 67. Colors - color pickers Sip ColorZilla
- 68. Colors - resources colorhunt.co coolors.co
- 71. Icons - resources thenounproject.com historic (B&W) iconstore.co free icons sets
- 72. Challenge #3 - IconStore search Entertainment icons Sport icons Legal icons
- 75. Challenge #3 - Fonts search Montserrat on Google Raleway on Google Avenir on MyFonts
- 77. Code Snippets - resources codepen.io
- 78. Challenge #4 - CodePen search Loading Progress Bar Beers animation
- 79. 3) Design Rules of Thumb
- 80. #1 - One day to 鍖x your identity Dont beat around the bush
- 81. Persian Red - #D23333 Quincy - #6C5145 Mine Shaft - #343434 Sea Blue - #006A9C Example - Our Colors
- 82. Example - Our Fonts
- 83. Le Wagon NOT lewagon LeWagon leWagon le wagon le Wagon Example - Our Spelling
- 84. #2 - Font = ratios
- 85. #3 - Dont buy all Font suite Buy desktop version (.ttf) and convert it for web
- 86. #4 - Contrast your texts Big Bold Black Header Light Small Grey sub-header
- 87. #5 - Dont play fancy with colors Gray scale is your best friend Bring colors with small touches
- 88. Gray scale + Green
- 89. #6 - Design = Space The space that surrounds an object is as important as the object itself.
- 90. #4 - No more startup stocks Make it personal
- 91. #7 - Add 鍖lters & shadows
- 92. Cant read text
- 93. Can read text
- 94. Better with text shadow
- 95. #8 - Good Design is the one you dont notice
- 96. Poor Radius
- 97. Good Radius
- 98. Poor Border
- 99. Good Border
- 100. Poor Shadow
- 101. Good Shadow
- 102. #9 - Think proportions Size doesnt mean proportion
- 103. Same Sizes
- 104. Same Proportions
- 105. 4) Sketch Demo
- 106. Challenge #5 - Sketch Sprint Newsletter banner for Le Wagon London Social icons resized and colored Lets build Custom icons re-shaped
- 108. Thank you!