Know Shit About Design @ Startup Saturday Mumbai

Slides from my talk about design at Startup Saturday Mumbai; covering the basic fundamentals of design—from philosophy, to practical application and hiring.

Transcript

1. Know Shit About @kingsidharth (that cute guy with long hair) Design Startup Saturday Mumbai March 8, 2014
2. Designer at Instamojo @kingsidharth www.64notes.com
3. Design Engineering Art
4. Design Grammar Function Engineering Expression Form Art
5. Design Engineering Art Graphic Design Information Architecture Fashion Design UI Design Architecture Programming
6. Form & Function Grammar & Expression both combine in good design
7. Function is Form Grammar is Expression In case of Great Designs: Nature: Leaves, Trees, Bodies, Sexual Features…
8. Output Digital Interactions Input
9. Information Action Digital Interactions
10. Information (Feedback or Seed) Action (Intent) Digital Interactions
11. User’s Intent is Your Command Design around user’s intent. User centred design. Intent based design. Or… User eXperience Design
12. Subsets of Design 1. Intent 2. Information Architecture 3. User Interface 4. Visual Design
13. 1. Intent 2. Information Architecture 3. User Interface 4. Visual Design User eXperience Design }
14. Intent Seth Godin’s Analogy & “Every page has a purpose in life.”
15. “Why do I exist?” —A web page.
17. “Log on. Get off”
18. Information Architecture What information is required to take the action? In what sequence? In what layout? Flow-charts. Wire-frames.
19. “Should I buy this phone?” What phone? What price? What features? … Know thy customer.
21. Where am I? What is this about? What can I do here? … Know thy customer.
22. Where am I?
23. What is this about?
24. Guess?
25. Where am I? What is this about? What can I do here? … Know thy customer.
26. User Interface What can I do here? Interacting with the information. Forms. Buttons. Text. ! Scroll > Click > Type
27. Your world changing app. User Interface User
28. What can I do here?
29. Each page should have one purpose. & 2 alternate fallbacks. 1(2,3)
30. What can I do here?
31. What can I do here?
35. Text is UI.
36. Writing Interface is Hard. Test with real live users. Speak their language.
37. Click Here A very brief note about Usability
38. Good Usability: User Expectation = Reality
42. Enter Exit
43. Usability is digital grammar.
44. Visual Design Such looks. Much Feel. Colours. Typography. Size. Mood.
45. Go!
46. Go!
47. STOP!
48. Stop!
49. Muwaah! XOXO Muwaah! XOXO Muwaah! XOXO
50. Colours have meanings. Fonts have feelings.
51. Guess which website is this screenshot from?
56. The curious case of Cleartrip vs. MakeMyTrip
59. Association. Recall Value. Build your own language on top of the existing standards.
60. Whitespace Typography Colours Size Patterns
61. User Experience All of that & much more.
62. Facebook’s Tricks
63. Facebook’s Tricks
64. Show vs. View
65. Blogger.com made the blog creation slower.
66. The Design Process Your Homework!
67. 1. Flow charts of the processes. 2. 1 (2,3) for each point of interaction. 3. Sketch the wire-frame. 4. Build it in the browser. 5. Test, Polish & Refine.
68. A word about the Mobile First approach
69. More Constrains = Bull-shit free (Be er) Design Screen Size Internet Speed Device Performance Limited & Shared Attention Span
70. Build it in the Browser word of caution against Photoshop
71. Use frameworks like Inuit.css Zurb’s Foundation to build it in the browser quickly. ! Use Twitter’s Bootstrap for prototypes only.
72. Who to hire? What <keyword> designer do you need?
73. A Designer User Experience Designer User Interface Designer Visual Designer team them up with a Front-end Engineer In that order:
74. Information Action Processing Processing
75. What to look for? How to judge a designer’s quality?
76. Problem Solving Skills. Communication Skills. Interest in Psychology.
77. Brownie Point: A designer who writes & edits well, designs well.
78. Where to look? Where do designers hide?
79. Freelance Kiddies Service Companies Design / Engg. Colleges Honestly, I don’t know! But…
80. How to train your dragon? designer
81. Don’t Make Me Think by Steve Krug bit.ly/dmmta * bit.ly/dmmtflip * ! Signal vs. Noise by 37 Signals signalvnoise.com ! A List Apart, Smashing Magazine, etc. ! *big ugly aff links Read
82. and Edit. Write
83. dat unix philosophy Programming
84. unless you’re a porn site. Live User Testing
85. Questions? comments or threats? @kingsidharth