Developers as Intentional Designers

A talk from JSConf Brazil, Fortaleza.

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. 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