Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Know Shit About Design @ Startup Saturday Mumbai

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.

King Sidharth

March 08, 2014

More Decks by King Sidharth

Other Decks in Design


  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

  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.

  16. None
  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.
  20. None
  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.

  30. What can I do here?

  31. What can I do here?

  32. None
  33. None
  34. None
  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

  39. None
  40. None
  41. None
  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?

  52. None
  53. None
  54. None
  55. None
  56. The curious case of Cleartrip vs. MakeMyTrip

  57. None
  58. None
  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

  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