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.2k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Developers as Intentional Designers
A talk from JSConf Brazil, Fortaleza.
Lynn Fisher
April 26, 2014
More Decks by Lynn Fisher
See All by Lynn Fisher
Art, The Web, and Tiny UX
lynnandtonic
304
22k
A Different Kind of UX
lynnandtonic
9
1.4k
Illustration with CSS
lynnandtonic
9
4.3k
Be Good At Lots of Things
lynnandtonic
8
1.6k
I’ll Be Awesome At Lots of Things, Thank You Very Much
lynnandtonic
4
460
Illustrating With Heart
lynnandtonic
3
650
Other Decks in Technology
See All in Technology
Nav2、Nav3 ... はたまた自作?〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
yanzm
0
250
リージョンの壁を越える、 ちょっと変わったAWSサービスの話
falken
PRO
0
260
生成AIのテナント制御とシャドーMCP対策 | AIを"止めずに"、情報を守る
yukun
0
120
AIで実装は速くなった。なのにプロダクトは速くならない。職能の壁を越えて価値のフローを設計する
nwiizo
6
7.2k
推論の観測、できていますか? 〜 Google Cloud Gemini Enterprise Agent Platformで 3つの Gemini モデルを実測して踏んだ、評価の罠 〜
shukob
PRO
0
150
なぜSRE・セキュリティは評価されないのか?守りの組織を事業成長エンジンに変えた実践
cscengineer
PRO
3
2.3k
When Does a Local Qwen Start to Break
morshoto
0
180
振り返りこそエンジニアの本領
negima
0
310
DINO-EdgeQuery:Edge-First Polygon Decoding for Building Footprint Extraction from Satellite Imagery
lehupa
0
150
Multica × 長期記憶:40個のミニプロジェクト管理
eiei114
0
140
生成AI時代の クレデンシャルとパーミッション設計
nrinetcom
PRO
3
1.5k
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
0
200
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.5k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
2
3.8k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
Faster Mobile Websites
deanohume
310
32k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
820
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
260
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
400
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
570
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
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