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
Tweet

More Decks by King Sidharth

Other Decks in Design

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