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
15
1.1k
Fast Design Decision-Making for the Everyday Developer
Julie Ann Horvath
December 01, 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.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
950
Other Decks in Programming
See All in Programming
Claude Code on the Web を超える!? Codex Cloud の実践テク5選
sunagaku
0
550
複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化
andpad
0
170
自動テストのアーキテクチャとその理由ー大規模ゲーム開発の場合ー
segadevtech
2
1k
チーム開発の “地ならし"
konifar
7
4.5k
詳細の決定を遅らせつつ実装を早くする
shimabox
1
1.1k
関数の挙動書き換える
takatofukui
1
100
なぜ強調表示できず ** が表示されるのか — Perlで始まったMarkdownの歴史と日本語文書における課題
kwahiro
12
5.9k
Phronetic Team with AI - Agile Japan 2025 closing
hiranabe
2
600
モビリティSaaSにおけるデータ利活用の発展
nealle
0
190
モデル駆動設計をやってみよう Modeling Forum2025ワークショップ/Let’s Try Model-Driven Design
haru860
0
150
Designing Repeatable Edits: The Architecture of . in Vim
satorunooshie
0
380
高単価案件で働くための心構え
nullnull
0
130
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8k
The Pragmatic Product Professional
lauravandoore
36
7k
4 Signs Your Business is Dying
shpigford
186
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Why Our Code Smells
bkeepers
PRO
340
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
How GitHub (no longer) Works
holman
315
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Faster Mobile Websites
deanohume
310
31k
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