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

Developers as Intentional Designers

Avatar for Lynn Fisher Lynn Fisher
April 26, 2014
Technology
1
1k

Developers as Intentional Designers

A talk from JSConf Brazil, Fortaleza.

Avatar for Lynn Fisher

Lynn Fisher

April 26, 2014
Tweet

More Decks by Lynn Fisher

See All by Lynn Fisher
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
A Different Kind of UX
Avatar for Lynn Fisher lynnandtonic
9
1.3k
Illustration with CSS
Avatar for Lynn Fisher lynnandtonic
9
4k
Be Good At Lots of Things
Avatar for Lynn Fisher lynnandtonic
8
1.4k
I’ll Be Awesome At Lots of Things, Thank You Very Much
Avatar for Lynn Fisher lynnandtonic
4
410
Illustrating With Heart
Avatar for Lynn Fisher lynnandtonic
3
540

Other Decks in Technology

See All in Technology
AI時代のインシデント対応 〜時代を切り抜ける、組織アーキテクチャ〜
Avatar for Kazuto Kusama jacopen
4
110
LINEヤフー バックエンド組織・体制の紹介
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
850
re:Inventにおける製造業のこれまでとこれから
Avatar for 濱田孝治 hamadakoji
0
310
機密情報の漏洩を防げ！ Webフロントエンド開発で意識すべき漏洩パターンとその対策
Avatar for mizdra mizdra
PRO
15
6.2k
マルチドライブアーキテクチャ: 複数の駆動力でプロダクトを前進させる
Avatar for Kenichi SUZUKI knih
0
9.3k
"'TSのAPI型安全”の対価は誰が払う？不公平なスキーマ駆動に終止符を打つハイブリッド戦略
Avatar for Hal hal_spidernight
0
120
変わるもの、変わらないもの ：OSSアーキテクチャで実現する持続可能なシステム
Avatar for gree_tech gree_tech
PRO
0
140
メッセージ駆動が可能にする結合の最適化
Avatar for かとじゅん j5ik2o
9
1.5k
Kubernetesと共にふりかえる! エンタープライズシステムのインフラ設計・テストの進め方大全
Avatar for 高棹大樹 daitak
0
440
巨大モノリスのリプレイス──機能整理とハイブリッドアーキテクチャで挑んだ再構築戦略
Avatar for ZOZO Developers zozotech
PRO
0
270
プロダクト負債と歩む持続可能なサービスを育てるための挑戦
Avatar for SansanTech sansantech
PRO
1
860
『星の世界の地図の話: Google Sky MapをAI Agentでよみがえらせる』 - Google Developers DevFest Tokyo 2025
Avatar for Tomohiro Tani taniiicom
0
270

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k

Transcript

  1. DEVELOPERS AS INTENTIONAL DESIGNERS Lynn Fisher @ lynnandtonic

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None

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

  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

  55. None

  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

  69. None

  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