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

The Coding Designer's Survival Kit

canarymason
December 15, 2011

The Coding Designer's Survival Kit

Web design in the browser using Survival Kit, a toolset for modular design, Sass, and javascript
Drupal Camp NYC, Dec 2011

canarymason

December 15, 2011
Tweet

More Decks by canarymason

Other Decks in Design

Transcript

  1. The Coding Designer's Survival Kit A Toolset for Designing Web

    Sites in the Browser Mason Wendell @canarymason Thursday, December 15, 2011
  2. The Coding Designer's Survival Kit How to be an effing

    web designer. Mason Wendell @canarymason Thursday, December 15, 2011
  3. Design Thinking in CSS • Play and experiment • CSS

    becomes your new tool palate • Work out parts of your design in PS Speak CSS natively Thursday, December 15, 2011
  4. Markup Asks Questions That Photoshop Does Not • What to

    do if this headline wraps? • Have you designed for all possible list types? Tables? Form elements? • Fluid layouts • Responsive design Thursday, December 15, 2011
  5. • Can’t show interactions well, if at all • It

    takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
  6. • Can’t show interactions well, if at all • It

    takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
  7. • Can’t show interactions well, if at all • It

    takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
  8. • Can’t show interactions well, if at all • It

    takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
  9. How About Animations? • Javascript, CSS3, Flash • Slow &

    Classy • vs. Fast & Exciting Thursday, December 15, 2011
  10. How About Animations? • Javascript, CSS3, Flash • Slow &

    Classy • vs. Fast & Exciting Thursday, December 15, 2011
  11. How About Animations? • Javascript, CSS3, Flash • Slow &

    Classy • vs. Fast & Exciting Thursday, December 15, 2011
  12. “Start designing from the content out, rather than the canvas

    in.” ~Mark Boulton, March 24, 2011 Thursday, December 15, 2011
  13. Style Tiles “a visual “tray” of paint chips, fabric patterns,

    and color choices that support the client’s goals” ~ Samantha Warren Thursday, December 15, 2011
  14. “...Mobile is a very constrained environment. Screens are small, networks

    are unreliable, and people can find themselves in all kinds of situations when they pull out their mobile devices. But these constraints are not only good for business, they’re good for design as well.” ~Luke Wroblewski, Mobile First Thursday, December 15, 2011
  15. • Location aware • Gestures • Orientation • Phone •

    Camera Mobile Capabilities Thursday, December 15, 2011
  16. Responsive Design Fluid grids Flexible images @media queries Brief books

    for people who make websites No. 4 !"#$%&#'(" )"*+,"#'-& Ethan Marcotte Jeremy Keith Thursday, December 15, 2011
  17. Waterfall doesn’t work No handoff, no washing your hands. •

    Client sets the spec. • Designer creates hidden functionality. • Developers don’t get the full story • What the fuck does the client get? Thursday, December 15, 2011
  18. All Together Now Spec, Prototype, Design, and Develop It’s much

    easier for designers to embrace this workflow when we embrace code as a creative tool. Thursday, December 15, 2011
  19. Hard to Change • Some changes are trivial with CSS

    • Fonts & Global Typography • Color Palate • Be careful of changes that are costly, but don’t add more creative energy. Thursday, December 15, 2011
  20. Last Minute Panic • Browser support • Interactions & Animations

    • Type rendering The worst time to have theses discussions is at the end of the project. Thursday, December 15, 2011
  21. No One Wants to Guess Don’t make them. They like

    not guessing. Thursday, December 15, 2011
  22. The Coding Designer’s Survival Kit • Starter HTML files based

    on Boilerplate • Sass mixins and patterns • Sass workflow • Javascript libraries • Templates for creating style tiles Thursday, December 15, 2011
  23. The Coding Designer’s Survival Kit What's required? • Stuff you

    need to install • Sass, Compass • Susy, Other Compass Plugins • Livereload for auto-refreshing browsers Thursday, December 15, 2011
  24. BC Before Coding Best to use as simple a tool

    as you can, until you need more power. Thursday, December 15, 2011
  25. Javascript • Dynamic Carousel • Lettering.js • FitText • Geared

    Scrolling • more all the time Thursday, December 15, 2011
  26. Sass • Adds more power to the process of writing

    CSS • Variables, Mixins, Selector Nesting sass-lang.com Thursday, December 15, 2011
  27. Sass • Two Syntaxes • SCSS: looks like CSS You’ll

    be comfortable. • Sass: clean and terse You’ll be faster. sass-lang.com Thursday, December 15, 2011
  28. Sass • $variables • +mixins • math & color •

    conditionals @if @else • @media sass-lang.com Thursday, December 15, 2011
  29. Compass • Stylesheet framework built around Sass • Built-in mixins

    for CSS3 and common tasks like list formatting • Use frameworks like Susy, Blueprint, and 960 semantically • Add your own framework compass-style.org Thursday, December 15, 2011
  30. Compass • Sprite Generation • Typography • Text Replacement •

    Trig (what?!) compass-style.org Thursday, December 15, 2011
  31. Compass Plugins • Zen Theme • Fancy Buttons & Sassy

    Buttons makes pretty buttons • Sassy Modular Scales • Color Schemer compass-style.org/frameworks Thursday, December 15, 2011
  32. Kit CSS: Step-by-Step • First, Do no harm. • Add

    functionality, not CSS you don’t need. • Considered defaults Thursday, December 15, 2011
  33. Drupal Theme • In active development • Focus is on

    CSS • Modules can handle the JS • drupal.org/project/survivalkit Thursday, December 15, 2011
  34. The Coding Designer’s Survival Kit The Kit & Podcast: theCodingDesigner.com

    The Theme: drupal.org/project/survivalkit Thursday, December 15, 2011