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 full-size slide

  2. DESIGN DEVELOPMENT

    View full-size slide

  3. DESIGN DESIGN
    DEVELOPMENT
    DEVELOPMENT

    View full-size slide

  4. DESIGN DESIGN
    DESIGN
    DEVELOPMENT

    View full-size slide

  5. DESIGN + DEVELOPMENT

    View full-size slide

  6. DEVELOPERS AS
    INTENTIONAL DESIGNERS

    View full-size slide

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

    View full-size slide

  8. SPECIALIZATION
    IS A GOOD THING

    View full-size slide

  9. CONFLICT
    IS A GOOD THING

    View full-size slide

  10. CONSTRUCTIVE CONFLICT
    IS A GOOD THING

    View full-size slide

  11. BUT SOMETIMES IT’S
    JUST YOU

    View full-size slide

  12. SORRY
    I’M NOT A DESIGNER

    View full-size slide

  13. STOP APOLOGIZING

    View full-size slide

  14. YOU GOTS THE SKILLZ

    View full-size slide

  15. MODULARITY
    & REUSABILITY

    View full-size slide

  16. DON’T REPEAT YOURSELF

    View full-size slide

  17. 2 SPACES 4 SPACES
    >

    View full-size slide

  18. 2 SPACES 4 SPACES
    <

    View full-size slide

  19. CONSISTENCY!

    View full-size slide

  20. @ brad_frost

    View full-size slide

  21. ORDER
    GROUPING

    View full-size slide

  22. ORDER
    GROUPING
    SIZE

    View full-size slide

  23. 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 full-size slide

  24. IS IT READABLE?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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



    JSConfBR



    Welcome!



    JSConfBR



    .content
    margin: 0
    padding: 10px

    View full-size slide

  29. @ spiralstairs

    View full-size slide

  30. MODULARITY
    RECAP

    View full-size slide

  31. MODULARITY
    RECAP
    REUSABILITY

    View full-size slide

  32. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY

    View full-size slide

  33. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY
    HIERARCHY

    View full-size slide

  34. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY
    HIERARCHY
    READABILITY

    View full-size slide

  35. MODULARITY
    RECAP
    REUSABILITY
    CONSISTENCY
    HIERARCHY
    READABILITY
    TOOLS

    View full-size slide

  36. VISUAL DESIGN

    View full-size slide

  37. AIN’T NOBODY GOT
    TIME FOR THAT

    View full-size slide

  38. CLICK HERE!
    SUBMIT
    NAME
    EMAIL
    PHONE CANCEL OK

    View full-size slide

  39. NOT EVERY PROJECT
    IS A REDESIGN

    View full-size slide

  40. CONSISTENCY
    (REMEMBER?)

    View full-size slide

  41. RECREATE
    & REDESIGN

    View full-size slide

  42. REDESIGN OFTEN

    View full-size slide

  43. REDESIGN OFTEN
    & QUICKLY

    View full-size slide

  44. DRAW SOMETHING
    EVERY DAY

    View full-size slide

  45. 1. SOMETHING YOU CAN SEE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. SO OTHERS CAN
    SEE WHAT YOU SEE

    View full-size slide

  51. SHOW OTHERS
    YOUR WORK

    View full-size slide

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

    View full-size slide

  53. SHAPE THE
    COMMUNITY

    View full-size slide

  54. START SMALL
    RECAP

    View full-size slide

  55. START SMALL
    RECAP
    REDESIGN & RECREATE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. HOW TO WORK WITH
    DESIGNERS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. IT’S NOT JUST ABOUT
    DESIGNERS

    View full-size slide

  63. DESIGNERS AS
    INTENTIONAL DEVELOPERS

    View full-size slide

  64. STOP APOLOGIZING

    View full-size slide

  65. YOU’RE DOING THIS

    View full-size slide

  66. THANK YOU
    Lynn Fisher @ lynnandtonic

    View full-size slide