Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
JS.CONF.EU 2012 - Because F$%k Photoshop
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Julie Ann Horvath
October 06, 2012
Design
4.7k
16
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
JS.CONF.EU 2012 - Because F$%k Photoshop
Julie Ann Horvath
October 06, 2012
More Decks by Julie Ann Horvath
See All by Julie Ann Horvath
Engineering Learning Lunch on Writing CSS as a Team
nrrrdcore
1
230
Because People
nrrrdcore
7
1.4k
Coder Day Of Service Keynote
nrrrdcore
3
670
Just Ship It
nrrrdcore
37
4.3k
Open Source Needs More Design Superheroes
nrrrdcore
10
800
GitHub for Designers
nrrrdcore
18
2.6k
Fast Design Decision-Making for the Everyday Developer
nrrrdcore
15
1.1k
Building a Design Environment
nrrrdcore
16
15k
GitHub Summit 2012
nrrrdcore
5
970
Other Decks in Design
See All in Design
富山デザイン勉強会_ブラッシュアップデザイン.pdf
keita_yoshikawa
0
130
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
410
いいUIとは?初心者向けに事例をもとにUIデザインを分解
yuichi_hara7
13
6.5k
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
220
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
240
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
cygames
PRO
1
1.3k
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3k
Luna's Light
shemeetscity
0
130
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
100
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
securecat
1
450
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
5.9k
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
dmattsun
2
530
Featured
See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
430
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
600
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
420
Optimising Largest Contentful Paint
csswizardry
37
4k
It's Worth the Effort
3n
188
29k
Fireside Chat
paigeccino
43
4k
The Limits of Empathy - UXLibs8
cassininazir
1
680
Navigating Weather and Climate Data
rabernat
0
520
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
330
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
2.9k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
240
Transcript
JS
I’M JULIE. I DESIGN & BUILD STUFF AT GITHUB
I’M NRRRDCORE. MOST PLACES ON THE INTERNET
THE TALK* BECAUSE FUCK PHOTOSHOP
I DID SOME RESEARCH AND THE INTERNET TOTALLY AGREES
None
(CREDIBLE SOURCES)
THE PROCESS* BECAUSE FUCK PHOTOSHOP
MY PROCESS* HAPPENS IN THE BROWSER
“A WEBSITE’S DESIGN SHOULD START WHERE IT’S GOING TO LIVE”
MEAGAN FISHER
None
THINGS N’ STUFF
CSS3 IS FUCKING BEAUTIFUL
None
INCONSISTENCY DOESN’T SOUND LIKE A REAL WORD
INCONSISTENCY GOING FROM COMPS TO THE BROWSER
DON’T PANIC. DO THE WORK NOW INSTEAD OF LATER
None
None
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
FEWER SURPRISES OH SHIT THIS LOOKS AWFUL
CROSS-BROWSER ZEN DO IT ALL AT THE SAME TIME
DEBUG CSS NEEDS MORE WEB INSPECTOR
DEBUG JS NEEDS MORE CONSOLE
WHY JS? THE INTERACTION LAYER
DIE, PHOTOSHOP, DIE. SOFTWARE CRASHES SUCK
PROBLEM? YES, PROBLEM
COMMAND + R DOESN’T AFFECT YOUR CODE
None
VERSION CONTROL IS AN AWESOME DESIGN TOOL
VERSION CONTROL HELPS YOU MANAGE ASSETS
VERSION CONTROL ALLOWS YOU TO TRACK CHANGES
IMAGE DIFFING IS AN AWESOME DESIGN TOOL
None
None
None
None
DESIGNERS ASK YOUR DEVS FOR COMMIT ACCESS
DEVELOPERS GIVE YOUR DESIGNERS COMMIT ACCESS
BUILD MORE TRUST GIVE YOUR DESIGNERS COMMIT ACCESS
TEACH YOUR DESIGNERS THEY MIGHT BREAK SOME THINGS
TRUST YOUR DESIGNERS THEY MIGHT NOT
BUT BUT BUT COMMAND LINE TOOLS ARE HARD
BUT BUT BUT GIT IS SO CONFUSING
WE CAN HELP GITHUB FOR MAC & WINDOWS
None
PROTOTYPING IS GOOD FOR THE SOUL
PROTOTYPING IS EASY WHEN YOU WRITE CODE
GISTS A LIGHT-WEIGHT PROTOTYPING TOOL
ABUSING GISTS USING THE HELL OUT OF THEM
None
None
None
None
None
CSS IS REUSABLE DON’T WRITE THE SAME CODE TWICE
CSS IS REUSABLE UNLESS YOU CAN MAKE IT BETTER
IF IT’S NOT REUSABLE SET IT ALL ON FIRE AND
START OVER
PATTERN LIBRARIES ARE TOTALLY A THING
PATTERN LIBRARIES ARE REALLY FUCKING AWESOME
PATTERN LIBRARIES LETS LEARN FROM EACH OTHER
None
PATTERN LIBRARIES OPEN SOURCE ALL THE THINGS
THE FUTURE* BECAUSE FUCK PHOTOSHOP
THE FUTURE* HOPEFULLY A MUCH BETTER ONE
THE FUTURE* HOPEFULLY A MUCH BETTER ONE
STATUS QUO PIXEL-PERFECT PHOTOSHOP COMPS
RESPONSIBILITY PIXEL-PERFECT PHOTOSHOP COMPS
END PRODUCT PICTURE OF A WEBSITE
YOU ARE ALL AWESOME. JSCONFEU
RESOURCES * github.com/styleguide * 24 ways: Do Your Mockup in
Markup * css3exp.com/moon * sass-lang.com * gist.github.com * dribbble.com/nrrrdcore/buckets * pea.rs