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

Developers as Intentional Designers

Developers as Intentional Designers

A talk from JSConf Brazil, Fortaleza.

Lynn Fisher

April 26, 2014
Tweet

More Decks by Lynn Fisher

Other Decks in Technology

Transcript

  1. DEVELOPERS AS
    INTENTIONAL DESIGNERS
    Lynn Fisher @ lynnandtonic

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. DESIGN DEVELOPMENT

    View Slide

  9. DESIGN DESIGN
    DEVELOPMENT
    DEVELOPMENT

    View Slide

  10. DESIGN DESIGN
    DESIGN
    DEVELOPMENT

    View Slide

  11. DESIGN + DEVELOPMENT

    View Slide

  12. DEVELOPERS AS
    INTENTIONAL DESIGNERS

    View Slide

  13. DEVELOPERS DECIDING TO
    BE DESIGNERS —DESIGNING
    WITH PURPOSE & ON PURPOSE

    View Slide

  14. View Slide

  15. SPECIALIZATION
    IS A GOOD THING

    View Slide

  16. CONFLICT
    IS A GOOD THING

    View Slide

  17. CONSTRUCTIVE CONFLICT
    IS A GOOD THING

    View Slide

  18. BUT SOMETIMES IT’S
    JUST YOU

    View Slide

  19. SORRY

    View Slide

  20. SORRY
    I’M NOT A DESIGNER

    View Slide

  21. STOP APOLOGIZING

    View Slide

  22. YOU GOTS THE SKILLZ

    View Slide

  23. MODULARITY
    & REUSABILITY

    View Slide

  24. MODULE

    View Slide

  25. DON’T REPEAT YOURSELF

    View Slide

  26. REUSE

    View Slide

  27. MODULE

    View Slide

  28. CONSISTENCY

    View Slide

  29. 2 SPACES 4 SPACES
    >

    View Slide

  30. 2 SPACES 4 SPACES
    <

    View Slide

  31. CONSISTENCY!

    View Slide

  32. @ brad_frost

    View Slide

  33. HIERARCHY

    View Slide

  34. 1
    2
    3
    4
    5

    View Slide

  35. ORDER

    View Slide

  36. ORDER
    GROUPING

    View Slide

  37. ORDER
    GROUPING
    SIZE

    View Slide

  38. READABILITY

    View Slide

  39. section.readability
    h1 Look at this contrast!
    p Your text editor has some
    really helpful colors for
    strong readability.
    a(role=“example”) See?
    p It’s awesome!
    1
    2
    3
    4
    5
    6
    7
    8

    View Slide

  40. IS IT READABLE?

    View Slide

  41. STICK WITH HIGH CONTRAST.
    LOW CONTRAST CAN BE
    HARDER TO READ.

    View Slide

  42. UP THAT FONT SIZE.
    DON’T MAKE PEOPLE SQUINT.

    View Slide

  43. MAKE THOSE LINKS OBVIOUS.
    LIKE, IS THIS EVEN A LINK?

    View Slide

  44. TOOLS

    View Slide

  45. +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13



    JSConfBR



    Welcome!



    JSConfBR



    .content
    margin: 0
    padding: 10px

    View Slide

  46. @ spiralstairs

    View Slide

  47. RECAP

    View Slide

  48. MODULARITY
    RECAP

    View Slide

  49. MODULARITY
    RECAP
    REUSABILITY

    View Slide

  50. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY

    View Slide

  51. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY
    HIERARCHY

    View Slide

  52. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY
    HIERARCHY
    READABILITY

    View Slide

  53. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY
    HIERARCHY
    READABILITY
    TOOLS

    View Slide

  54. VISUAL DESIGN

    View Slide

  55. View Slide

  56. GO
    TEAM!

    View Slide

  57. PRACTICE

    View Slide

  58. AIN’T NOBODY GOT
    TIME FOR THAT

    View Slide

  59. START SMALL

    View Slide

  60. CLICK HERE!
    SUBMIT
    NAME
    EMAIL
    PHONE CANCEL OK

    View Slide

  61. NOT EVERY PROJECT
    IS A REDESIGN

    View Slide

  62. CONSISTENCY
    (REMEMBER?)

    View Slide

  63. RECREATE
    & REDESIGN

    View Slide

  64. REDESIGN OFTEN

    View Slide

  65. REDESIGN OFTEN
    & QUICKLY

    View Slide

  66. DRAW SOMETHING
    EVERY DAY

    View Slide

  67. 1. SOMETHING YOU CAN SEE

    View Slide

  68. 1. SOMETHING YOU CAN SEE
    2. SOMETHING YOU IMAGINE

    View Slide

  69. View Slide

  70. 1. SOMETHING YOU CAN SEE
    2. SOMETHING YOU IMAGINE

    View Slide

  71. CREATE A VISUAL
    REPRESENTATION OF WHAT
    YOU SEE WITH YOUR EYES

    View Slide

  72. CREATE A VISUAL
    REPRESENTATION OF WHAT
    YOU SEE WITH YOUR EYES
    AND WHAT
    YOU SEE WITH YOUR MIND

    View Slide

  73. SO OTHERS CAN
    SEE WHAT YOU SEE

    View Slide

  74. SHOW OTHERS
    YOUR WORK

    View Slide

  75. “ONLY THOSE WHO ARE WILLING TO
    TAKE THE RISK OF WRITING CODE
    THAT’S NOT PERFECT EVER WRITE CODE.”
    - MICHAEL “GAR” GARVIN

    View Slide

  76. SHAPE THE
    COMMUNITY

    View Slide

  77. RECAP

    View Slide

  78. START SMALL
    RECAP

    View Slide

  79. START SMALL
    RECAP
    REDESIGN & RECREATE

    View Slide

  80. START SMALL
    RECAP
    REDESIGN & RECREATE
    DRAW SOMETHING EVERY DAY

    View Slide

  81. START SMALL
    RECAP
    REDESIGN & RECREATE
    DRAW SOMETHING EVERY DAY
    SHOW YOUR WORK

    View Slide

  82. START SMALL
    RECAP
    REDESIGN & RECREATE
    DRAW SOMETHING EVERY DAY
    SHOW YOUR WORK
    SHAPE THE COMMUNITY

    View Slide

  83. HOW TO WORK WITH
    DESIGNERS

    View Slide

  84. EVERY
    “HOW TO WORK WITH X PERSON”
    ARTICLE OR TALK

    View Slide

  85. EVERY
    “HOW TO WORK WITH X PERSON”
    ARTICLE OR TALK
    CAN BE SUMMED UP WITH
    UNDERSTAND THEM & APPRECIATE THEM.

    View Slide

  86. IT’S NOT JUST ABOUT
    DESIGNERS

    View Slide

  87. DESIGNERS AS
    INTENTIONAL DEVELOPERS

    View Slide

  88. STOP APOLOGIZING

    View Slide

  89. YOU’RE DOING THIS

    View Slide

  90. THANK YOU
    Lynn Fisher @ lynnandtonic

    View Slide