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
200
Because People
nrrrdcore
7
1.4k
Coder Day Of Service Keynote
nrrrdcore
3
610
Just Ship It
nrrrdcore
37
4.3k
Open Source Needs More Design Superheroes
nrrrdcore
10
760
GitHub for Designers
nrrrdcore
18
2.5k
Building a Design Environment
nrrrdcore
16
15k
JS.CONF.EU 2012 - Because F$%k Photoshop
nrrrdcore
16
4.7k
GitHub Summit 2012
nrrrdcore
5
940
Other Decks in Programming
See All in Programming
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
440
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
620
為你自己學 Python
eddie
0
540
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.1k
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
220
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
440
CNCF Project の作者が考えている OSS の運営
utam0k
5
590
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
260
SpringBoot3.4の構造化ログ #kanjava
irof
2
580
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
780
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Six Lessons from altMBA
skipperchong
27
3.6k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building Adaptive Systems
keathley
39
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
370
Mobile First: as difficult as doing things right
swwweet
222
9.1k
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