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
   

   View Slide

2. Designer at Instamojo
   @kingsidharth
   www.64notes.com
   

   View Slide

3. Design
   Engineering Art
   

   View Slide

4. Design
   Grammar
   Function
   Engineering
   Expression
   Form
   Art
   

   View Slide

5. Design
   Engineering Art
   Graphic Design
   Information Architecture
   Fashion Design
   UI Design
   Architecture
   Programming
   

   View Slide

6. Form & Function
   Grammar & Expression
   both combine in good design
   

   View Slide

7. Function is Form
   Grammar is Expression
   In case of Great Designs:
   Nature: Leaves, Trees, Bodies, Sexual Features…
   

   View Slide

8. Output
   Digital Interactions
   Input
   

   View Slide

9. Information
   Action
   Digital Interactions
   

   View Slide

10. Information
    (Feedback or Seed)
    Action
    (Intent)
    Digital Interactions
    

    View Slide

11. User’s Intent
    is Your Command
    Design around user’s intent.
    User centred design.
    Intent based design.
    Or…
    User eXperience Design
    

    View Slide

12. Subsets of Design
    1. Intent
    2. Information Architecture
    3. User Interface
    4. Visual Design
    

    View Slide

13. 1. Intent
    2. Information Architecture
    3. User Interface
    4. Visual Design
    User eXperience
    Design
    }
    

    View Slide

14. Intent
    Seth Godin’s Analogy
    &
    “Every page has a purpose in life.”
    

    View Slide

15. “Why do I exist?”
    —A web page.
    

    View Slide

16. View Slide

17. “Log on. Get off”
    

    View Slide

18. Information Architecture
    What information is required to take
    the action?
    In what sequence?
    In what layout?
    Flow-charts. Wire-frames.
    

    View Slide

19. “Should I buy this phone?”
    What phone?
    What price?
    What features?
    …
    Know thy customer.
    

    View Slide

20. View Slide

21. Where am I?
    What is this about?
    What can I do here?
    …
    Know thy customer.
    

    View Slide

22. Where am I?
    

    View Slide

23. What is this about?
    

    View Slide

24. Guess?
    

    View Slide

25. Where am I?
    What is this about?
    What can I do here?
    …
    Know thy customer.
    

    View Slide

26. User Interface
    What can I do here?
    Interacting with the information.
    Forms. Buttons. Text.
    !
    Scroll > Click > Type
    

    View Slide

27. Your world changing app.
    User Interface
    User
    

    View Slide

28. What can I do here?
    

    View Slide

29. Each page should have one purpose.
    & 2 alternate fallbacks.
    1(2,3)
    

    View Slide

30. What can I do here?
    

    View Slide

31. What can I do here?
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. Text is UI.
    

    View Slide

36. Writing Interface is Hard.
    Test with real live users.
    Speak their language.
    

    View Slide

37. Click Here
    A very brief note about
    Usability
    

    View Slide

38. Good Usability:
    User Expectation = Reality
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. Enter Exit
    

    View Slide

43. Usability is digital grammar.
    

    View Slide

44. Visual Design
    Such looks. Much Feel.
    Colours. Typography. Size. Mood.
    

    View Slide

45. Go!
    

    View Slide

46. Go!
    

    View Slide

47. STOP!
    

    View Slide

48. Stop!
    

    View Slide

49. Muwaah! XOXO
    Muwaah! XOXO
    Muwaah! XOXO
    

    View Slide

50. Colours have meanings.
    Fonts have feelings.
    

    View Slide

51. Guess which website is this
    screenshot from?
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. The curious case of
    Cleartrip vs. MakeMyTrip
    

    View Slide

57. View Slide

58. View Slide

59. Association. Recall Value.
    Build your own language
    on top of the existing standards.
    

    View Slide

60. Whitespace
    Typography
    Colours
    Size
    Patterns
    

    View Slide

61. User Experience
    All of that & much more.
    

    View Slide

62. Facebook’s Tricks
    

    View Slide

63. Facebook’s Tricks
    

    View Slide

64. Show vs. View
    

    View Slide

65. Blogger.com made the blog
    creation slower.
    

    View Slide

66. The Design Process
    Your Homework!
    

    View Slide

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.
    

    View Slide

68. A word about the
    Mobile First
    approach
    

    View Slide

69. More Constrains
    =
    Bull-shit free (Be er) Design
    Screen Size
    Internet Speed
    Device Performance
    Limited & Shared Attention Span
    

    View Slide

70. Build it in the Browser
    word of caution against Photoshop
    

    View Slide

71. Use frameworks like
    Inuit.css
    Zurb’s Foundation
    to build it in the browser quickly.
    !
    Use Twitter’s Bootstrap for
    prototypes only.
    

    View Slide

72. Who to hire?
    What designer do you need?
    

    View Slide

73. A Designer
    User Experience Designer
    User Interface Designer
    Visual Designer
    team them up with a
    Front-end Engineer
    In that order:
    

    View Slide

74. Information
    Action
    Processing
    Processing
    

    View Slide

75. What to look for?
    How to judge a designer’s quality?
    

    View Slide

76. Problem Solving Skills.
    Communication Skills.
    Interest in Psychology.
    

    View Slide

77. Brownie Point:
    A designer who writes & edits well,
    designs well.
    

    View Slide

78. Where to look?
    Where do designers hide?
    

    View Slide

79. Freelance Kiddies
    Service Companies
    Design / Engg. Colleges
    Honestly, I don’t know! But…
    

    View Slide

80. How to train your dragon?
    designer
    

    View Slide

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
    

    View Slide

82. and Edit.
    Write
    

    View Slide

83. dat unix philosophy
    Programming
    

    View Slide

84. unless you’re a porn site.
    Live User Testing
    

    View Slide

85. Questions?
    comments or threats?
    @kingsidharth
    

    View Slide