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
Fast Design Decision-Making for the Everyday De...
Search
Julie Ann Horvath
December 01, 2012
Programming
1.1k
15
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Fast Design Decision-Making for the Everyday Developer
Julie Ann Horvath
December 01, 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
650
Just Ship It
nrrrdcore
37
4.3k
Open Source Needs More Design Superheroes
nrrrdcore
10
800
GitHub for Designers
nrrrdcore
18
2.6k
Building a Design Environment
nrrrdcore
16
15k
JS.CONF.EU 2012 - Because F$%k Photoshop
nrrrdcore
16
4.7k
GitHub Summit 2012
nrrrdcore
5
960
Other Decks in Programming
See All in Programming
Vite+ Unified Toolchain for the Web
naokihaba
0
700
技術記事、 専門家としてのプログラマ、 言語化
mizchi
14
7.3k
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
manfredsteyer
PRO
0
220
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
rkaga
4
5.7k
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
yusukebe
7
1.8k
なぜ型を書くのか? TSKaigi2026で改めて考える #tskaigi_smarthr
kajitack
0
210
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
12
4.7k
はてなアカウント基盤 State of the Union
cockscomb
1
1.3k
鹿野さんに聞く!『TypeScriptコードレシピ集』で磨く実践力
tonkotsuboy_com
4
1k
使用 Meilisearch 建立新聞搜尋工具
johnroyer
0
110
OS アップデート対応の取り組み方がもっと共有されてほしい
andpad
0
110
そのテスト、説明できますか?~LWテスト戦略FW~のご紹介
nakahara
0
200
Featured
See All Featured
Designing for Performance
lara
611
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.2k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
460
So, you think you're a good person
axbom
PRO
2
2.1k
Become a Pro
speakerdeck
PRO
31
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
200
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.8k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
170
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1k
Accessibility Awareness
sabderemane
1
150
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
250
Transcript
SUPER FAST DESIGN DECISION-MAKING
@ @ NRRRDCORE
I’M A DESIGNER BUT IT’S A LITTLE COMPLICATED
I BUILD THINGS A LITTLE LESS COMPLICATED, RIGHT?
None
& EARLY & OFTEN FRESH SHIPPING DAILY.
NOT THIS KIND, THOUGH.
A WEBSITE’S DESIGN SHOULD START WHERE IT’S GOING TO LIVE.
LESS ABOUT ME AND MORE ABOUT FAST DESIGN...
MORE ABOUT YOU AND DEVELOPER FRIENDLY DESIGN TOOLS...
PARTS FOR A FASTER DESIGN PROCESS. 3 3
3 3 STEPS BUILD, DEPLOY, & ITERATE.
START SIMPLE TO FIND THE RIGHT DIRECTION...
START SIMPLE TO FIND ANY DIRECTION, REALLY...
START ON PAPER I KNOW WHAT YOU’RE THINKING, PAPER...
DON’T FEAR THE BLANK CANVAS
A FOUNDATION YOU DON’T HAVE TO START FROM SCRATCH.
THE BASICS WHAT’S IN A CSS “FRAMEWORK”?
THE ANSWER PROBABLY A LOT OF STUFF YOU DON’T NEED
PICK AND CHOOSE THE PARTS THAT’LL BE USEFUL...
PICK AND CHOOSE THE PARTS THAT ADDRESS AN ACTUAL NEED.
BE CHOOSEY OR, USE THE FRAMEWORK AS A FOUNDATION
EVENTUALLY YOU’LL WANT TO RIP OUT WHAT YOU’RE NOT USING.
* *
GRIDS CAN BE REALLY USELESS
None
GRIDS BUT THEY CAN HELP YOU FORMAT CONTENT.
960.GS THE ORIGINAL GANGSTER
960.GS THE ORIGINAL BOOKMARKLET
None
FRESH POTS SOME GRIDS COME BAKED INTO FRAMEWORKS.
BOOTSTRAP SKELETON FOUNDATION & &
THEY’RE FLEXY THEIR GRIDS ARE FLUID, FOR ALL OF YOUR
MOBILE THINGS.
None
MEDIA QUERIES ARE REALLY, REALLY AWESOME. @ @
CONDITIONAL CSS BASED ON THE WIDTH OF THE DEVICE.
None
... PATTERN LIBRARIES CONSTANTLY IMPROVE THE WAY YOU WRITE MARKUP
...
None
None
None
VISUAL PATTERNS DRIBBBLE BUCKETS CAN HELP...
None
DRIBBBLE.COM/NRRRDCORE/BUCKETS
None
None
CSS3EXP.COM/MOON
ICON FONTS SAVED MY LIFE * *
span.mega-icon.mega-icon-blacktocat
.mega-icon.mega-icon-blacktocat
SASS/SCSS WHY SHOULD YOU CARE?
THE COMMUNITY IS OPINIONATED, THE COMPUTER DOESN’T CARE.
border-top-color: lighten($gray, 10%);
border-bottom-color: darken($gray, 10%);
SASS/SCSS HANDLES ERRORS LIKE A CHAMP.
None
WORK WITHIN CONSTRAINTS WHEN YOU’RE DESIGNING, BUILDING... * *
STYLEGUIDES AREN’T JUST FOR COLOR PALETTES
None
KSS
None
WARPSPIRE.COM/KSS/STYLEGUIDES
PROTOTYPING IS EASY WHEN YOU WRITE CODE.
GISTS A LIGHT-WEIGHT PROTOTYPING TOOL.
STAY LIMBER YOU CAN DO MORE WITH GISTS THAN YOU’D
EXPECT.
None
None
None
None
None
PULL REQUESTS ARE AN AWESOME DESIGN TOOL.
JULIEANNHORVATH.COM/RESOURCES
THANK YOU WARM GUN ’12 & 500 STARTUPS