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
1k
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
302
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
400
Illustrating With Heart
lynnandtonic
3
530
Other Decks in Technology
See All in Technology
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
360
2025年になってもまだMySQLが好き
yoku0825
8
4.5k
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
860
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
370
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
250
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
220
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
130
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
エラーとアクセシビリティ
schktjm
1
1.2k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Unsuck your backbone
ammeep
671
58k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Navigating Team Friction
lara
189
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
4 Signs Your Business is Dying
shpigford
184
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Typedesign – Prime Four
hannesfritz
42
2.8k
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