User Interface Design Disampaikan di acara Talent Bandung tahun 2017 bulan November Kelas Desain UI/UX Daeng Muhammad Feisal UXiD (UX Indonesia) - @daengdoang

1. USER
INTERFACE
DESIGN
UI+UXCLASS
@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

4. Software
User
Interface
Function
Data

5. UI answers 3 ‘HOW’ questions
• How it looks like (VISUAL)
• How it is understood (COGNITIVE)
• How it works (INTERACT)

6. User Interface Journey
Desktop
Web
Mobile

7. 1962
First User Interface

8. 1st Computer Game Spacewar

9. Steve Russell

10. VISUAL
intriguing
COGINITIVE
4 commands
- spin left
- spin right
- thrust
- fire
INTERACT
Keyboard

11. 1964
The Mouse

12. The Mouse

13. Douglas Engelbart

14. 1978
Command Line Interface

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.”

21. 1995
UI Frameworks

22. Visual Studio

23. Photo Editor

24. 2003
Widgets

25. Konfabulator

27. 2011+
Advanced User Interfaces

28. Zooming User Interface

29. Direct Manipulation

30. 3D Interface

31. Skeuomorphic Interface

32. Modern /Metro UI

33. 1990
World Wide Web

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

46. 1991
Mobile Touch Interface

47. Pen based Interface

48. Pen Based Interface

49. 2003
Touchscreen Interface - FingerWorks

50. Multi Touch Interface

51. Gesture based Interface

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. Let’s 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 find inspiration

58. What are you looking for?
General inspiration
UI components examples
Website design examples

59. Inspiration for everything

60. Challenge #1 - Dribbble search
A wagon or van
A signup form
An icon set
A free food icon set
…

61. Inspiration for UI

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. What’s a graphical asset?
Colors
Images
Icons
Fonts
Code Snippets
Gradients

67. Colors - color pickers
Sip ColorZilla

68. Colors - resources
colorhunt.co coolors.co

69. http://nathanspeller.com/color-pickers/
Colors - trends

70. Images - resources
flick.com
exhaustive
pixels.com
selective
unsplash.it
for prototypes

71. Icons - resources
thenounproject.com
historic (B&W)
iconstore.co
free icons sets

72. Challenge #3 - IconStore search
Entertainment icons
…
Sport icons
Legal icons

73. Fonts - tools
FontFaceNinja

74. Fonts - resources
google.com/fonts
free
myfonts.com
paid

75. Challenge #3 - Fonts search
Montserrat on Google
…
Raleway on Google
Avenir on MyFonts

76. Gradients - resources

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 fix your identity
Don’t 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 - Don’t 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 - Don’t 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 filters & shadows

92. Can’t read text

93. Can read text

94. Better with text shadow

95. #8 - Good Design
is the one you don’t notice

96. Poor Radius

97. Good Radius

98. Poor Border

99. Good Border

100. Poor Shadow

101. Good Shadow

102. #9 - Think proportions
Size doesn’t 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
Let’s build
Custom icons re-shaped

107. Remember
Design is accessible

108. Thank you!