Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing in the Browser - Design for Drupal, Boston 2010

3,745 views

Published on

Published in: Design, Technology, Art & Photos
  • Be the first to comment

Designing in the Browser - Design for Drupal, Boston 2010

  1. 1. DESIGNING IN THE BROWSER <ul><li>Mason Wendell </li></ul><ul><li>Canary Promotion + Design </li></ul>
  2. 2. OBVIOUSLY DIDN’T USE PHOTOSHOP
  3. 3. WHAT IS DESIGNING IN THE BROWSER?
  4. 4. WHAT IS A WEB DESIGNER? <ul><li>We are defined by our medium </li></ul><ul><li>And excel when we exploit it </li></ul>
  5. 5. DESIGN A WEBSITE, NOT A PICTURE OF A WEBSITE NOT A PICTURE OF A WEBSITE
  6. 6. WHAT IS DESIGNING IN THE BROWSER? <ul><li>Using markup and CSS as primary creative design tools </li></ul><ul><li>Creating in CSS, rather than </li></ul><ul><li>Photoshop plays a supporting role </li></ul>
  7. 7. WHAT’S WRONG WITH THE USUAL?
  8. 8. BUILD YOUR DESIGN TWICE! <ul><li>Once in Photoshop, then again in markup/css </li></ul><ul><li>Two completely different mediums with vastly different abilities and limitations </li></ul>
  9. 9. DESIGN THE IMPOSSIBLE! <ul><li>Easy in Photoshop </li></ul><ul><li>!= </li></ul><ul><li>Easy in CSS </li></ul>
  10. 10. DESIGN THE IMPOSSIBLE! <ul><li>Hard in Photoshop </li></ul><ul><li>might = </li></ul><ul><li>Easy in CSS </li></ul>
  11. 11. DESIGN THE IMPOSSIBLE! <ul><li>Hard in Photoshop </li></ul><ul><li>might = </li></ul><ul><li>Easy in CSS </li></ul>
  12. 12. DESIGN THE IMPOSSIBLE! <ul><li>Hard in Photoshop </li></ul><ul><li>might = </li></ul><ul><li>Easy in CSS </li></ul>
  13. 13. THAT’S JUST TOO HARD TO CHANGE HARD TO CHANGE <ul><li>fonts & global typography </li></ul><ul><li>color palate </li></ul><ul><li>&quot;just a few small changes&quot; translation: You'll have to tweak your whole document, and all documents for the whole site </li></ul>
  14. 14. WHAT HAPPENS WHEN I MOUSE OVER? <ul><li>Can't show interactions well, if at all </li></ul><ul><li>You have to show a client two images just to show a simple mouseover.  </li></ul><ul><li>How do you demo the speed and easing of a javascript slideshow? </li></ul>
  15. 15. THAT’S NOT WHAT I APPROVED <ul><li>Why are the fonts different? </li></ul><ul><li>I can’t see my content below the fold! </li></ul><ul><li>It looks different on my boss’ PC! </li></ul><ul><li>It looks different on my iPhone! </li></ul>
  16. 16. “ OLD FAITHFUL”, RIGHT?
  17. 17. “ OLD FAITHFUL”, RIGHT?
  18. 18. “ OLD FAITHFUL”, RIGHT?
  19. 19. “ OLD FAITHFUL”, RIGHT?
  20. 20. “ OLD FAITHFUL”, RIGHT?
  21. 21. WHY DESIGN IN THE BROWSER?
  22. 22. WHY DESIGN IN THE BROWSER? <ul><li>More accurate designs </li></ul><ul><li>More web-native designs </li></ul><ul><li>More flexible designs </li></ul><ul><li>Stay on scope </li></ul><ul><li>Catch problems early </li></ul><ul><li>Happier clients </li></ul>
  23. 23. YOU’RE WORKING IN THE MEDIUM YOU’RE DESIGNING FOR DESIGNING FOR DESIGNING FOR
  24. 24. EVERYTHING YOU DESIGN IS BUILDABLE <ul><li>Because you just built it when you designed it </li></ul><ul><li>You don’t need to guess whether your design is codeable </li></ul><ul><li>Still push the limits, but now you know which limits you’re pushing. </li></ul>
  25. 25. MARKUP ASKS QUESTIONS THAT PHOTOSHOP DOES NOT
  26. 26. MARKUP ASKS QUESTIONS THAT PHOTOSHOP DOES NOT <ul><li>What to do if this headline wraps? How does that affect leading and margin settings? </li></ul><ul><li>Design for interactions. </li></ul><ul><li>CSS & JS can help you design and prototype simple features quickly </li></ul><ul><li>Design for typographic details </li></ul><ul><li>Baseline grids, letter spacing, fancy ampersands, correct quotes and dashes </li></ul>
  27. 27. PLAY WITH THE COOL NEW TOYS COOL NEW TOYS <ul><li>rounded corners </li></ul><ul><li>@font-face </li></ul><ul><li>alpha transparency </li></ul><ul><li>text and box shadow </li></ul><ul><li>rotation and other transformations </li></ul><ul><li>CSS animations with transitions </li></ul><ul><li>more, obv </li></ul>
  28. 28. YOU MAY ALREADY BE DOING IT BE DOING IT <ul><li>At least a little. </li></ul>
  29. 29. CLIENT SEES THE REAL THING FROM THE START <ul><li>The design they approve will be the same as the design you deliver. </li></ul><ul><li>You can demonstrate browser inconsistencies from the start. Then decide with your client what to do about them. </li></ul>
  30. 30. HOW TO GET STARTED
  31. 31. WHAT DO YOU NEED? <ul><li>All the browsers </li></ul><ul><li>Text editor </li></ul><ul><li>Graphics Editor </li></ul><ul><li>Firebug, Webkit Inspector, Firebug Lite </li></ul><ul><li>Sass & Compass </li></ul><ul><li>xrefresh </li></ul>
  32. 32. USE PHOTOSHOP ONLY AS MUCH AS YOU NEED TO <ul><li>Use it to sketch </li></ul><ul><li>Use it to make the graphics you need. (Not to pretend it's a browser) </li></ul>
  33. 33. MAKE A PLAN
  34. 34. START WITH CONTENT <ul><li>Get as close to the real content your project will have as you can.  </li></ul><ul><li>Placeholder images and text can be used to help you work quickly, if used with care. </li></ul>
  35. 35. SKETCH AND WIREFRAME <ul><li>This is where you'll come up with your basic layout and concept </li></ul><ul><li>Use paper, a tool like balsamiq or gomockingbird.com (or even Photoshop!) </li></ul>
  36. 36. YOU’RE DOING THESE STEPS ALREADY, RIGHT? <ul><li>Excellent.  </li></ul>
  37. 37. BUILD THE BASIC LAYOUT FROM YOUR WIREFRAME <ul><li>Write a simple HTML document </li></ul><ul><li>reflect the structure of your wireframes </li></ul>
  38. 38. BUILD THE BASIC LAYOUT FROM YOUR WIREFRAME <ul><li>Use a css framework, at least at first. Blueprint, 960.gs </li></ul><ul><ul><li>They're well tested and near-proven to give you the layout you expect. </li></ul></ul><ul><ul><li>Think of them as open source CSS snippets libraries. Take what you need. </li></ul></ul>
  39. 39. ADD SOME BASICS <ul><li>Typography </li></ul><ul><li>Simple backgrounds and borders </li></ul>
  40. 40. Make the shift to thinking creatively with CSS
  41. 41. MAKE THE SHIFT TO THINKING CREATIVELY WITH CSS <ul><li>Play and experiment </li></ul><ul><li>CSS becomes your new tool palate </li></ul><ul><li>It always has been, in a way. </li></ul><ul><li>Work out snippets of your design in Photoshop and quickly build your solutions </li></ul>
  42. 42. EMBRACE PROGRESSIVE ENHANCEMENT <ul><li>Start with content </li></ul><ul><li>Add layers of css complexity </li></ul><ul><li>Enhance for the latest and greatest </li></ul><ul><li>It's fun & and you'll stay sharp </li></ul><ul><li>All browser makers will support these new features soon enough </li></ul><ul><li>Use advanced techniques liberally. They're fast, lightweight, and let you be creative. You can adjust for old browsers and the “real world” later.  </li></ul>
  43. 43. BEING DRUPAL-AWARE
  44. 44. 1. GENERATE YOUR RAW MARKUP FROM DRUPAL <ul><li>Slower to build your raw markup, because you need to build the site first.  </li></ul><ul><li>More accurate </li></ul><ul><li>Best for simple sites and re-theming existing sites </li></ul><ul><li>If this is your route your markup may be more complex but you'll skip the next step. </li></ul>
  45. 45. 2. ANTICIPATE DRUPAL <ul><li>use your own markup, and be prepared to bend Drupal to your will </li></ul><ul><li>use snippets from drupal in your markup (nodes, blocks, views, etc) </li></ul><ul><li>be aware when you're designing what will become nodes, blocks, and views. Document these with <!-- comments --> to help your themer </li></ul>
  46. 46. FEELS LIKE THE FIRST TIME <ul><li>Design your homepage in Photoshop </li></ul><ul><li>and IMMEDIATELY build it in CSS </li></ul><ul><li>Use that as your basis for designing the rest of the site in browser </li></ul><ul><li>Team up with your front-end developer and become Voltron </li></ul>
  47. 47. DEMO
  48. 48. DESIGNING IN THE BROWSER <ul><li>Mason Wendell </li></ul><ul><li>canarypromo.com </li></ul><ul><li>twitter.com/canarymason </li></ul><ul><li>LINKS </li></ul><ul><li>forabeautifulweb.com </li></ul><ul><li>24ways.org/2009/make-your-mockup-in-markup </li></ul>

×