$30 off During Our Annual Pro Sale. View Details »

Developers as Intentional Designers

Avatar for Lynn Fisher Lynn Fisher
April 26, 2014
Technology
1
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
304
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
550

Other Decks in Technology

See All in Technology
30分であなたをOmniのファンにしてみせます～分析画面のクリック操作をそのままコード化できるAI-ReadyなBIツール～
Avatar for Sagara sagara
0
180
大企業でもできる！ボトムアップで拡大させるプラットフォームの作り方
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
850
AI駆動開発の実践とその未来
Avatar for Ikko Eltociear Ashimine eltociear
1
280
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.5k
文字列の並び順 / Unicode Collation
Avatar for とみたまさひろ tmtms
3
610
たまに起きる外部サービスの障害に備えたり備えなかったりする話
Avatar for Sohei Iwahori egmc
0
310
AI時代の新規LLMプロダクト開発: Findy Insightsを3ヶ月で立ち上げた舞台裏と振り返り
Avatar for Dakuon dakuon
0
230
AWS CLIの新しい認証情報設定方法aws loginコマンドの実態
Avatar for wkm2 wkm2
7
760
品質のための共通認識
Avatar for KAKEHASHI kakehashi
PRO
4
380
JEDAI認定プログラム JEDAI Order 2026 エントリーのご案内 / JEDAI Order 2026 Entry
Avatar for Databricks Japan databricksjapan
0
140
Strands Agents × インタリーブ思考 で変わるAIエージェント設計 / Strands Agents x Interleaved Thinking AI Agents
Avatar for Takanori Suzuki takanorig
3
670
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
150

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
200
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
85
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
570
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
2
2.7k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
85
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
16
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
0
370
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
21
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
400
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
150
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k

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