Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Developers as Intentional Designers
Search
Lynn Fisher
April 26, 2014
Technology
1
990
Developers as Intentional Designers
A talk from JSConf Brazil, Fortaleza.
Lynn Fisher
April 26, 2014
Tweet
Share
More Decks by Lynn Fisher
See All by Lynn Fisher
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A Different Kind of UX
lynnandtonic
9
1.3k
Illustration with CSS
lynnandtonic
9
3.9k
Be Good At Lots of Things
lynnandtonic
7
1.3k
I’ll Be Awesome At Lots of Things, Thank You Very Much
lynnandtonic
4
390
Illustrating With Heart
lynnandtonic
3
510
Other Decks in Technology
See All in Technology
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
540
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
450
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
210
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
1
190
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
13
5.6k
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
140
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
170
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Automating Front-end Workflow
addyosmani
1370
200k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Transcript
DEVELOPERS AS INTENTIONAL DESIGNERS Lynn Fisher @ lynnandtonic
None
None
None
None
None
None
DESIGN DEVELOPMENT
DESIGN DESIGN DEVELOPMENT DEVELOPMENT
DESIGN DESIGN DESIGN DEVELOPMENT
DESIGN + DEVELOPMENT
DEVELOPERS AS INTENTIONAL DESIGNERS
DEVELOPERS DECIDING TO BE DESIGNERS —DESIGNING WITH PURPOSE & ON
PURPOSE
None
SPECIALIZATION IS A GOOD THING
CONFLICT IS A GOOD THING
CONSTRUCTIVE CONFLICT IS A GOOD THING
BUT SOMETIMES IT’S JUST YOU
SORRY
SORRY I’M NOT A DESIGNER
STOP APOLOGIZING
YOU GOTS THE SKILLZ
MODULARITY & REUSABILITY
MODULE
DON’T REPEAT YOURSELF
REUSE
MODULE
CONSISTENCY
2 SPACES 4 SPACES >
2 SPACES 4 SPACES <
CONSISTENCY!
@ brad_frost
HIERARCHY
1 2 3 4 5
ORDER
ORDER GROUPING
ORDER GROUPING SIZE
READABILITY
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
IS IT READABLE?
STICK WITH HIGH CONTRAST. LOW CONTRAST CAN BE HARDER TO
READ.
UP THAT FONT SIZE. DON’T MAKE PEOPLE SQUINT.
MAKE THOSE LINKS OBVIOUS. LIKE, IS THIS EVEN A LINK?
TOOLS
+ 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
@ spiralstairs
RECAP
MODULARITY RECAP
MODULARITY RECAP REUSABILITY
MODULARITY RECAP REUSABILITY CONSISTENCY
MODULARITY RECAP REUSABILITY CONSISTENCY HIERARCHY
MODULARITY RECAP REUSABILITY CONSISTENCY HIERARCHY READABILITY
MODULARITY RECAP REUSABILITY CONSISTENCY HIERARCHY READABILITY TOOLS
VISUAL DESIGN
None
GO TEAM!
PRACTICE
AIN’T NOBODY GOT TIME FOR THAT
START SMALL
CLICK HERE! SUBMIT NAME EMAIL PHONE CANCEL OK
NOT EVERY PROJECT IS A REDESIGN
CONSISTENCY (REMEMBER?)
RECREATE & REDESIGN
REDESIGN OFTEN
REDESIGN OFTEN & QUICKLY
DRAW SOMETHING EVERY DAY
1. SOMETHING YOU CAN SEE
1. SOMETHING YOU CAN SEE 2. SOMETHING YOU IMAGINE
None
1. SOMETHING YOU CAN SEE 2. SOMETHING YOU IMAGINE
CREATE A VISUAL REPRESENTATION OF WHAT YOU SEE WITH YOUR
EYES
CREATE A VISUAL REPRESENTATION OF WHAT YOU SEE WITH YOUR
EYES AND WHAT YOU SEE WITH YOUR MIND
SO OTHERS CAN SEE WHAT YOU SEE
SHOW OTHERS YOUR WORK
“ONLY THOSE WHO ARE WILLING TO TAKE THE RISK OF
WRITING CODE THAT’S NOT PERFECT EVER WRITE CODE.” - MICHAEL “GAR” GARVIN
SHAPE THE COMMUNITY
RECAP
START SMALL RECAP
START SMALL RECAP REDESIGN & RECREATE
START SMALL RECAP REDESIGN & RECREATE DRAW SOMETHING EVERY DAY
START SMALL RECAP REDESIGN & RECREATE DRAW SOMETHING EVERY DAY
SHOW YOUR WORK
START SMALL RECAP REDESIGN & RECREATE DRAW SOMETHING EVERY DAY
SHOW YOUR WORK SHAPE THE COMMUNITY
HOW TO WORK WITH DESIGNERS
EVERY “HOW TO WORK WITH X PERSON” ARTICLE OR TALK
EVERY “HOW TO WORK WITH X PERSON” ARTICLE OR TALK
CAN BE SUMMED UP WITH UNDERSTAND THEM & APPRECIATE THEM.
IT’S NOT JUST ABOUT DESIGNERS
DESIGNERS AS INTENTIONAL DEVELOPERS
STOP APOLOGIZING
YOU’RE DOING THIS
THANK YOU Lynn Fisher @ lynnandtonic