Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It's Alive: Designing in the browser with Sass

Chris Michel
February 25, 2014
Design
17
990

It's Alive: Designing in the browser with Sass

This deck runs through a Sass workflow for modern web design. We shouldn't be designing a complete system in Photoshop anymore. People want to be able to interact with the design and we shouldn't be doing things twice. Find awesome Sass and Compass tools that fit within your workflow, visit www.sache.in to find or submit your own!

Chris Michel

February 25, 2014
Tweet

More Decks by Chris Michel

See All by Chris Michel
Stop Working from a Prison Cell
hatefulcrawdad
264
18k

Other Decks in Design

See All in Design
顧客信頼性向上のためのデザイン
mizuena
1
600
忙しい人のためのClean Architecture
yuriemori
1
110
saya020
saya020
0
120
イカれたUIを作ろうの会のスライドdoke
yd_niku
0
21k
WordPressからデータ構造設計のヒントを得る / Data Structure Design Tips from WordPress
yuyaink
0
200
非エンジニアの私が エンジニアと「協働」する ために心がけていること
nabemasat
1
540
Recreating the DuBois Data Portraits
ajstarks
5
2.9k
GMOペパボにおける業務体験リサーチ
ooyama01
1
770
opening.pdf
misty_marsden
PRO
0
260
Froghoppers
soposiii
1
230
Stardust Ranch
ryanm519
0
120
【Designship2022登壇資料】企業の経済活動をデザインし、日本のマーケティングにイノベーションを起こす
sevendex
1
280

Featured

See All Featured
BBQ
matthewcrist
75
8.2k
It's Worth the Effort
3n
177
26k
What’s in a name? Adding method to the madness
productmarketing
PRO
13
2k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Adopting Sorbet at Scale
ufuk
65
7.9k
Design by the Numbers
sachag
271
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
KATA
mclloyd
12
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Side Projects
sachag
451
38k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k

Transcript

  1. View Slide

  2. View Slide

  3. FROM A
    Hi, I’m Chris
    @hatefulcrawdad

    View Slide

  4. Santa Cruz

    View Slide

  5. Santa Cruz

    View Slide

  6. View Slide

  7. A NEW PROCESS
    for web design is born

    View Slide

  8. What’s the Process?

    View Slide

  9. Figure out the flow

    View Slide

  10. Example Sketch

    View Slide

  11. Decide on Content

    View Slide

  12. Quick Sketches

    View Slide

  13. View Slide

  14. Blog home

    View Slide

  15. Blog post

    View Slide

  16. Code!

    View Slide

  17. TOOLS USED
    to kill pixel-perfect Photoshop

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. Thanks!

    View Slide