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
Building a Design Environment
Search
Julie Ann Horvath
October 15, 2012
Design
16
15k
Building a Design Environment
Julie Ann Horvath
October 15, 2012
Tweet
Share
More Decks by Julie Ann Horvath
See All by Julie Ann Horvath
Engineering Learning Lunch on Writing CSS as a Team
nrrrdcore
1
210
Because People
nrrrdcore
7
1.4k
Coder Day Of Service Keynote
nrrrdcore
3
620
Just Ship It
nrrrdcore
37
4.3k
Open Source Needs More Design Superheroes
nrrrdcore
10
770
GitHub for Designers
nrrrdcore
18
2.5k
Fast Design Decision-Making for the Everyday Developer
nrrrdcore
15
1.1k
JS.CONF.EU 2012 - Because F$%k Photoshop
nrrrdcore
16
4.7k
GitHub Summit 2012
nrrrdcore
5
940
Other Decks in Design
See All in Design
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
130
Kid Cowboy 103
marilutwin
0
290
How to get a Tiger to Tulsa
mcduckyart
0
120
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
200
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
280
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
460
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
360
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
700
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
510
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Unsuck your backbone
ammeep
671
58k
Facilitating Awesome Meetings
lara
54
6.5k
KATA
mclloyd
31
14k
Designing Experiences People Love
moore
142
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Transcript
None
@NRRRDCORE MOST PLACES ON THE INTERNET
I’M JULIE I DESIGN & BUILD STUFF AT GITHUB
I’M JULIE I’M A DESIGNER WHO WRITES CODE
THE TALK* HACKING A DESIGN ENVIRONMENT
THE TALK* WHAT’S A DESIGN ENVIRONMENT
THE PROCESS* BECAUSE FUCK PHOTOSHOP
MY PROCESS* HAPPENS IN THE BROWSER
MY PROCESS* HAPPENS IN CODE
MY PROCESS* HAPPENS (MOSTLY) IN CODE
STATUS QUO PIXEL-PERFECT PHOTOSHOP COMPS
RESPONSIBLE FOR PIXEL-PERFECT PHOTOSHOP COMPS
END PRODUCT IS A PICTURE OF A WEBSITE
“A WEBSITE’S DESIGN SHOULD START WHERE IT’S GOING TO LIVE.”
MEAGAN FISHER
None
THINGS N’ STUFF
CSS3 IS FUCKING BEAUTIFUL
None
RETINA IS FUCKING BEAUTIFUL
RETINA CAN BE EASIER
ASSETS THAT SCALE WITH ICON FONTS
4X FOR DETAIL
SASS/SCSS YOUR NEW BEST FRIEND
SASS/SCSS WORK FUCKING FASTER
border-top-color: lighten($gray, 10%);
border-bottom-color: darken($gray, 10%);
SASS/SCSS HANDLES ERRORS LIKE A CHAMP
None
INCONSISTENT GOING FROM COMPS TO THE BROWSER
DON’T PANIC DO THE WORK NOW INSTEAD OF LATER
None
NO SURPRISES OH SHIT THIS LOOKS AWFUL
ZEN MODE DO IT ALL AT THE SAME TIME
DEBUG CSS NEEDS MORE WEB INSPECTOR
DEBUG JS NEEDS MORE CONSOLE
WHY JS? THE INTERACTION LAYER
DON’T DIE SOFTWARE CRASHES SUCK
DESIGNERS ASK YOUR DEVS FOR COMMIT ACCESS
DEVELOPERS GIVE YOUR DESIGNERS COMMIT ACCESS
MORE TRUST GIVE YOUR DESIGNERS COMMIT ACCESS
TEACH YOUR DESIGNERS THEY MIGHT BREAK SOME THINGS
TRUST YOUR DESIGNERS THEY MIGHT SURPRISE YOU
TRUST YOUR DESIGNERS BUT LIKE, IN A GOOD WAY
PROBLEM? YES, PROBLEM
COMMAND + S ZERO RISK TO WHAT YOU’RE WORKING ON
COMMAND + R ZERO RISK TO WHAT YOU’RE WORKING ON
DESIGN TOOLS FOR BUILDING REAL WEBSITES
DESIGN TOOLS FOR BUILDING REAL APPS
DESIGN TOOLS FOR BUILDING REAL TOOLS
VERSION CONTROL IS AN AWESOME DESIGN TOOL
VERSION CONTROL HELPS YOU MANAGE ASSETS
VERSION CONTROL TRACK CHANGES TO YOUR CODE
VERSION CONTROL TRACK CHANGES TO YOUR DESIGN
GITHUB TRACK CHANGES TO YOUR DESIGN
IMAGE DIFFING IS AN AWESOME DESIGN TOOL
None
None
None
None
PROTOTYPING IS PRETTY AWESOME
PROTOTYPING IS EASY WHEN YOU WRITE CODE
GISTS A LIGHT-WEIGHT PROTOTYPING TOOL
ABUSING GISTS USING THE HELL OUT OF THEM
WAT WHAT’S IN A GIST?
IN A GIST YOU CAN DO MORE THAN YOU’D EXPECT
None
None
None
None
None
A FOUNDATION YOU DON’T HAVE TO START FROM SCRATCH
BOOTSTRAP YOU DON’T HAVE TO START FROM SCRATCH
CSS IS REUSABLE DON’T WRITE THE SAME CODE TWICE
CSS IS REUSABLE CAN YOU MAKE IT BETTER?
ALWAYS YOU CAN ALWAYS MAKE IT BETTER
ALWAYS YES, YOU FUCKING CAN
PUT IT OUT THERE GET MORE EYES ON YOUR CODE
CHANCES ARE IF YOU CAN’T, SOMEONE ELSE CAN
IF IT’S NOT REUSABLE SET IT ALL ON FIRE AND
START AGAIN
PATTERN LIBRARIES ARE TOTALLY A THING
PATTERN LIBRARIES ARE REALLY FUCKING AWESOME
PATTERN LIBRARIES CONSTANTLY IMPROVE YOUR CODE
PATTERN LIBRARIES LEARN FROM PAST YOU
PATTERN LIBRARIES LEARN FROM EACH OTHER
None
STYLEGUIDES KIND OF SUCK, DON’T THEY
CONSIDERATIONS THINGS TO THINK ABOUT INSTEAD
None
USE THE WEB TO MAKE THE WEB
USE THE WEB NO, REALLY
None
BUT BUT BUT COMMAND LINE TOOLS ARE HARD
BUT BUT BUT GIT IS SO CONFUSING
WE CAN HELP GITHUB FOR MAC & WINDOWS
None
THE FUTURE* BECAUSE FUCK PHOTOSHOP
THE FUTURE* HOPEFULLY A MUCH BETTER ONE
THE FUTURE* HOPEFULLY A MUCH BETTER ONE
None
LET’S TALK JULIE @ GITHUB DOT COM
LET’S TALK @NRRRDCORE