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
630
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
The Missing Link in Angular's Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
仕様がそのままテストになる!Javaで始める振る舞い駆動開発
ohmori_yusuke
8
4.6k
JEP 496 と JEP 497 から学ぶ耐量子計算機暗号入門 / Learning Post-Quantum Crypto Basics from JEP 496 & 497
mackey0225
2
440
Chart.jsで長い項目を表示するときのハマりどころ
yumechi
0
130
レイトレZ世代に捧ぐ、今からレイトレを始めるための小径
ichi_raven
0
450
しっかり学ぶ java.lang.*
nagise
1
400
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
kajitack
12
6.3k
目的で駆動する、AI時代のアーキテクチャ設計 / purpose-driven-architecture
minodriven
9
2.9k
オフライン対応!Flutterアプリに全文検索エンジンを実装する @FlutterKaigi2025
itsmedreamwalker
2
220
TypeScript 5.9で使えるようになった import defer でパフォーマンス最適化を実現する
bicstone
1
180
ノーコードからの脱出 -地獄のデスロード- / Escape from Base44
keisuke69
1
750
CloudflareのSandbox SDKを試してみた
syumai
0
170
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Music & Morning Musume
bryan
46
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
24
1.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
980
Into the Great Unknown - MozCon
thekraken
40
2.2k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Making Projects Easy
brettharned
120
6.5k
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