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
0
860
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
298
20k
A Different Kind of UX
lynnandtonic
9
1.2k
Illustration with CSS
lynnandtonic
8
3.7k
Be Good At Lots of Things
lynnandtonic
6
1.2k
I’ll Be Awesome At Lots of Things, Thank You Very Much
lynnandtonic
4
370
Illustrating With Heart
lynnandtonic
2
450
Other Decks in Technology
See All in Technology
rootful・rootless・privilegedコンテナの違い/rootful_rootless_privileged_container_difference
moz_sec_
0
100
Azureの開発で辛いところ
re3turn
0
170
効率的な技術組織が作れる!書籍『チームトポロジー』要点まとめ
iwamot
2
190
プロダクト組織で取り組むアドベントカレンダー/Advent Calendar in Product Teams
mixplace
0
640
20241125 - AI 繪圖實戰魔法工作坊 @ 實踐大學
dpys
1
430
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
28
25k
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
1.8k
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
820
AWS環境におけるランサムウェア攻撃対策の設計
nrinetcom
PRO
1
320
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.4k
OCI技術資料 : ファイル・ストレージ 概要
ocise
3
12k
事業貢献を考えるための技術改善の目標設計と改善実績 / Targeted design of technical improvements to consider business contribution and improvement performance
oomatomo
0
290
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
540
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
BBQ
matthewcrist
85
9.4k
4 Signs Your Business is Dying
shpigford
182
21k
Why Our Code Smells
bkeepers
PRO
335
57k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Done Done
chrislema
182
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Speed Design
sergeychernyshev
25
720
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Writing Fast Ruby
sferik
628
61k
Agile that works and the tools we love
rasmusluckow
328
21k
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