Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
USER
INTERFACE

DESIGN
UI+UXCLASS
@daengdoang
50 Years
Journey Back in Time
What is a User Interface?
Software: application, website, or mobile app
User Interface is the
body of a software
Software
User
Interface
Function
Data
UI answers 3 ‘HOW’ questions
• How it looks like (VISUAL)
• How it is understood (COGNITIVE)
• How it works (INTERACT)
User Interface Journey
Desktop
Web
Mobile
1962
First User Interface
1st Computer Game Spacewar
Steve Russell
VISUAL
intriguing
COGINITIVE
4 commands
- spin left
- spin right
- thrust
- fire
INTERACT
Keyboard
1964
The Mouse
The Mouse
Douglas Engelbart
1978
Command Line Interface
VisiCalc (The first ever spreadsheet)
Bob Frankston & Dan Bricklin invented spreadsheet
1983
WIMP / GUI – Apple Lisa
1st personal computer to use GUI
WIMP to GUI
W = Windows
I = Icons
M = Menus
P = Pointer
Steve Jobs with Lisa
“We're prepared to
live with Lisa for
the next ten years.”
1995
UI Frameworks
Visual Studio
Photo Editor
2003
Widgets
Konfabulator
2011+
Advanced User Interfaces
Zooming User Interface
Direct Manipulation
3D Interface
Skeuomorphic Interface
Modern /Metro UI
1990
World Wide Web
Tim Berners-Lee invented Web
Static Web
Dynamic Web - Online Store
1997
Blog
Wordpress Themes
2004
Web 2.0
2005
Ajax
Ajax
2012
HTML5 – 1st Working Draft
HTML5 – Adaptive User Interface
HTML5 – CSS3
1991
Mobile Touch Interface
Pen based Interface
Pen Based Interface
2003
Touchscreen Interface - FingerWorks
Multi Touch Interface
Gesture based Interface
User Interface Evolution Map
1962
1964
1978
1983
1991
1995
1997
2003
2004
2011
2012
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 b...
Disclaimer
Disclaimer
100+ design services every day
Let’s check Design collections
1) Find inspiration
2) Find assets
3) Design rules of thumb
4) Sketch demo
Roadmap
1) Inspiration
We are not born designers,
We just copy/paste find inspiration
What are you looking for?
General inspiration
UI components examples
Website design examples
Inspiration for everything
Challenge #1 - Dribbble search
A wagon or van
A signup form
An icon set
A free food icon set
…
Inspiration for UI
Challenge #2 - CallToIdea search
A login form
A footer
A 404 page
…
UI pre-requisite, you must read
http://www.goodui.org/
Inspiration for Website design
2) Resources
What’s a graphical asset?
Colors
Images
Icons
Fonts

Code Snippets
Gradients
Colors - color pickers
Sip ColorZilla
Colors - resources
colorhunt.co coolors.co
http://nathanspeller.com/color-pickers/
Colors - trends
Images - resources
flick.com

exhaustive
pixels.com

selective
unsplash.it

for prototypes
Icons - resources
thenounproject.com

historic (B&W)
iconstore.co

free icons sets
Challenge #3 - IconStore search
Entertainment icons
…
Sport icons
Legal icons
Fonts - tools
FontFaceNinja
Fonts - resources
google.com/fonts

free
myfonts.com

paid
Challenge #3 - Fonts search
Montserrat on Google
…
Raleway on Google
Avenir on MyFonts
Gradients - resources
Code Snippets - resources
codepen.io
Challenge #4 - CodePen search
Loading
…
Progress Bar
Beers animation
3) Design Rules of Thumb
#1 - One day to fix your identity
Don’t beat around the bush
Persian Red - #D23333
Quincy - #6C5145
Mine Shaft - #343434
Sea Blue - #006A9C
Example - Our Colors
Example - Our Fonts
Le Wagon
NOT
lewagon LeWagon leWagon le wagon le Wagon
Example - Our Spelling
#2 - Font = ratios
#3 - Don’t buy all Font suite
Buy desktop version (.ttf) and convert it for web
#4 - Contrast your texts
Big Bold Black Header
Light Small Grey sub-header
#5 - Don’t play fancy with colors
Gray scale is your best friend
Bring colors with small touches
Gray scale + Green
#6 - Design = Space
The space that surrounds an object
is as important as the object itself.
#4 - No more startup stocks
Make it personal
#7 - Add filters & shadows
Can’t read text
Can read text
Better with text shadow
#8 - Good Design
is the one you don’t notice
Poor Radius
Good Radius
Poor Border
Good Border
Poor Shadow
Good Shadow
#9 - Think proportions
Size doesn’t mean proportion
Same Sizes
Same Proportions
4) Sketch Demo
Challenge #5 - Sketch Sprint
Newsletter banner for Le Wagon London
Social icons resized and colored
Let’s build
Custom ico...
Remember
Design is accessible
Thank you!
User Interface Design - Talent Bandung - @daengdoang
User Interface Design - Talent Bandung - @daengdoang
Nächste SlideShare
Wird geladen in …5
×

User Interface Design - Talent Bandung - @daengdoang

258 Aufrufe

Veröffentlicht am

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

Daeng Muhammad Feisal
UXiD (UX Indonesia)
- @daengdoang

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

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!

×