Developers as Intentional Designers

A talk from JSConf Brazil, Fortaleza.

Transcript

1. DEVELOPERS AS INTENTIONAL DESIGNERS Lynn Fisher @ lynnandtonic
8. DESIGN DEVELOPMENT
9. DESIGN DESIGN DEVELOPMENT DEVELOPMENT
10. DESIGN DESIGN DESIGN DEVELOPMENT
11. DESIGN + DEVELOPMENT
12. DEVELOPERS AS INTENTIONAL DESIGNERS
13. DEVELOPERS DECIDING TO BE DESIGNERS —DESIGNING WITH PURPOSE & ON PURPOSE
15. SPECIALIZATION IS A GOOD THING
16. CONFLICT IS A GOOD THING
17. CONSTRUCTIVE CONFLICT IS A GOOD THING
18. BUT SOMETIMES IT’S JUST YOU
19. SORRY
20. SORRY I’M NOT A DESIGNER
21. STOP APOLOGIZING
22. YOU GOTS THE SKILLZ
23. MODULARITY & REUSABILITY
24. MODULE
25. DON’T REPEAT YOURSELF
26. REUSE
27. MODULE
28. CONSISTENCY
29. 2 SPACES 4 SPACES >
30. 2 SPACES 4 SPACES <
31. CONSISTENCY!
32. @ brad_frost
33. HIERARCHY
34. 1 2 3 4 5
35. ORDER
36. ORDER GROUPING
37. ORDER GROUPING SIZE
38. READABILITY
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
40. IS IT READABLE?
41. STICK WITH HIGH CONTRAST. LOW CONTRAST CAN BE HARDER TO READ.
42. UP THAT FONT SIZE. DON’T MAKE PEOPLE SQUINT.
43. MAKE THOSE LINKS OBVIOUS. LIKE, IS THIS EVEN A LINK?
44. TOOLS
45. + 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <title>JSConfBR</title> </head> <body> <div class=“content”> <h1>Welcome!</h1> </div> </body> </html> <title>JSConfBR</title> </head> <body> <div class=“content”> .content margin: 0 padding: 10px
46. @ spiralstairs
47. RECAP
48. MODULARITY RECAP
49. MODULARITY RECAP REUSABILITY
50. MODULARITY RECAP REUSABILITY CONSISTENCY
51. MODULARITY RECAP REUSABILITY CONSISTENCY HIERARCHY
52. MODULARITY RECAP REUSABILITY CONSISTENCY HIERARCHY READABILITY
53. MODULARITY RECAP REUSABILITY CONSISTENCY HIERARCHY READABILITY TOOLS
54. VISUAL DESIGN
56. GO TEAM!
57. PRACTICE
58. AIN’T NOBODY GOT TIME FOR THAT
59. START SMALL
60. CLICK HERE! SUBMIT NAME EMAIL PHONE CANCEL OK
61. NOT EVERY PROJECT IS A REDESIGN
62. CONSISTENCY (REMEMBER?)
63. RECREATE & REDESIGN
64. REDESIGN OFTEN
65. REDESIGN OFTEN & QUICKLY
66. DRAW SOMETHING EVERY DAY
67. 1. SOMETHING YOU CAN SEE
68. 1. SOMETHING YOU CAN SEE 2. SOMETHING YOU IMAGINE
70. 1. SOMETHING YOU CAN SEE 2. SOMETHING YOU IMAGINE
71. CREATE A VISUAL REPRESENTATION OF WHAT YOU SEE WITH YOUR EYES
72. CREATE A VISUAL REPRESENTATION OF WHAT YOU SEE WITH YOUR EYES AND WHAT YOU SEE WITH YOUR MIND
73. SO OTHERS CAN SEE WHAT YOU SEE
74. SHOW OTHERS YOUR WORK
75. “ONLY THOSE WHO ARE WILLING TO TAKE THE RISK OF WRITING CODE THAT’S NOT PERFECT EVER WRITE CODE.” - MICHAEL “GAR” GARVIN
76. SHAPE THE COMMUNITY
77. RECAP
78. START SMALL RECAP
79. START SMALL RECAP REDESIGN & RECREATE
80. START SMALL RECAP REDESIGN & RECREATE DRAW SOMETHING EVERY DAY
81. START SMALL RECAP REDESIGN & RECREATE DRAW SOMETHING EVERY DAY SHOW YOUR WORK
82. START SMALL RECAP REDESIGN & RECREATE DRAW SOMETHING EVERY DAY SHOW YOUR WORK SHAPE THE COMMUNITY
83. HOW TO WORK WITH DESIGNERS
84. EVERY “HOW TO WORK WITH X PERSON” ARTICLE OR TALK
85. EVERY “HOW TO WORK WITH X PERSON” ARTICLE OR TALK CAN BE SUMMED UP WITH UNDERSTAND THEM & APPRECIATE THEM.
86. IT’S NOT JUST ABOUT DESIGNERS
87. DESIGNERS AS INTENTIONAL DEVELOPERS
88. STOP APOLOGIZING
89. YOU’RE DOING THIS
90. THANK YOU Lynn Fisher @ lynnandtonic