DESIGNING IN THE BROWSER <ul><li>Mason Wendell </li></ul><ul><li>Canary Promotion + Design </li></ul>
OBVIOUSLY DIDN’T USE PHOTOSHOP
WHAT IS DESIGNING IN THE BROWSER?
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>
DESIGN A WEBSITE,  NOT A PICTURE OF A WEBSITE NOT A PICTURE OF A WEBSITE
WHAT IS DESIGNING IN THE BROWSER? <ul><li>Using markup and CSS as primary creative design tools </li></ul><ul><li>Creating...
WHAT’S WRONG WITH  THE USUAL?
BUILD YOUR DESIGN TWICE! <ul><li>Once in Photoshop,  then again in markup/css </li></ul><ul><li>Two completely different m...
DESIGN THE IMPOSSIBLE! <ul><li>Easy in Photoshop  </li></ul><ul><li>!= </li></ul><ul><li>Easy in CSS  </li></ul>
DESIGN THE IMPOSSIBLE! <ul><li>Hard in Photoshop  </li></ul><ul><li>might =  </li></ul><ul><li>Easy in CSS </li></ul>
DESIGN THE IMPOSSIBLE! <ul><li>Hard in Photoshop  </li></ul><ul><li>might =  </li></ul><ul><li>Easy in CSS </li></ul>
DESIGN THE IMPOSSIBLE! <ul><li>Hard in Photoshop  </li></ul><ul><li>might =  </li></ul><ul><li>Easy in CSS </li></ul>
THAT’S JUST TOO  HARD TO CHANGE HARD TO CHANGE <ul><li>fonts & global typography  </li></ul><ul><li>color palate  </li></u...
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 clie...
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! <...
“ OLD FAITHFUL”, RIGHT?
“ OLD FAITHFUL”, RIGHT?
“ OLD FAITHFUL”, RIGHT?
“ OLD FAITHFUL”, RIGHT?
“ OLD FAITHFUL”, RIGHT?
WHY DESIGN IN THE BROWSER?
WHY DESIGN IN THE BROWSER? <ul><li>More accurate designs </li></ul><ul><li>More web-native designs </li></ul><ul><li>More ...
YOU’RE WORKING  IN THE MEDIUM YOU’RE  DESIGNING FOR DESIGNING FOR DESIGNING FOR
EVERYTHING YOU DESIGN IS BUILDABLE <ul><li>Because you just built it when you designed it </li></ul><ul><li>You don’t need...
MARKUP ASKS QUESTIONS THAT PHOTOSHOP DOES NOT
MARKUP ASKS QUESTIONS THAT PHOTOSHOP DOES NOT <ul><li>What to do if this headline wraps? How does that affect leading and ...
PLAY WITH THE  COOL NEW TOYS COOL NEW TOYS <ul><li>rounded corners  </li></ul><ul><li>@font-face  </li></ul><ul><li>alpha ...
YOU MAY ALREADY  BE DOING IT BE DOING IT <ul><li>At least a little. </li></ul>
CLIENT SEES THE REAL THING FROM THE START <ul><li>The design they approve will be the same  as the design you deliver. </l...
HOW TO GET STARTED
WHAT DO YOU NEED? <ul><li>All the browsers </li></ul><ul><li>Text editor </li></ul><ul><li>Graphics Editor </li></ul><ul><...
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....
MAKE A PLAN
START WITH CONTENT <ul><li>Get as close to the real content your project will have as you can.  </li></ul><ul><li>Placehol...
SKETCH AND WIREFRAME <ul><li>This is where you'll come up with your basic layout and concept  </li></ul><ul><li>Use paper,...
YOU’RE DOING THESE STEPS ALREADY, RIGHT? <ul><li>Excellent.   </li></ul>
BUILD THE BASIC LAYOUT FROM YOUR WIREFRAME <ul><li>Write a simple HTML document </li></ul><ul><li>reflect the structure of...
BUILD THE BASIC LAYOUT FROM YOUR WIREFRAME <ul><li>Use a css framework, at least at first. Blueprint, 960.gs  </li></ul><u...
ADD SOME BASICS <ul><li>Typography </li></ul><ul><li>Simple backgrounds and borders </li></ul>
Make the shift to thinking creatively with CSS
MAKE THE SHIFT TO THINKING CREATIVELY WITH CSS <ul><li>Play and experiment </li></ul><ul><li>CSS becomes your new tool pal...
EMBRACE PROGRESSIVE ENHANCEMENT <ul><li>Start with content </li></ul><ul><li>Add layers of css complexity </li></ul><ul><l...
BEING DRUPAL-AWARE
1. GENERATE YOUR RAW MARKUP FROM DRUPAL <ul><li>Slower to build your raw markup, because you need to build the site first....
2. ANTICIPATE DRUPAL  <ul><li>use your own markup, and be prepared to bend Drupal to your will  </li></ul><ul><li>use snip...
FEELS LIKE THE FIRST TIME <ul><li>Design your homepage in Photoshop </li></ul><ul><li>and IMMEDIATELY build it in CSS </li...
DEMO
DESIGNING IN THE BROWSER <ul><li>Mason Wendell </li></ul><ul><li>canarypromo.com </li></ul><ul><li>twitter.com/canarymason...
Upcoming SlideShare
Loading in...5
×

Designing in the Browser - Design for Drupal, Boston 2010

3,443

Published on

Published in: Design, Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,443
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • hiI&apos;m Mason Wendell and i run Canary Promotion + Designand I&apos;ve been designing websites for a long timeand for a long time i&apos;ve been designing websites in photoshop, and not in the browser. working in programs like photoshop has been the only way to go unless you wanted sites that looked like this:
  • recent developments like the release and adoption of new browsers like chrome, safari, and firefox,and their inclusion of web standards like css2 and css3 have made it a much more viable option to DESIGN websites using markup, css, and the browser itself as your primary design tools.
  • Some things get lost in translation
  • leads to extra work in CSS potentially sloppy
  • how can you demonstrate fast &amp; exciting VS slow and classy
  • you might be used to the differences in type, but most people aren’t I’m having these conversations with a client now. But I’m having them early. The worst time to have these discussions is at the end of the project. No one wants to reset the project at that stage Decide with your client how much effort you will put into MAKING OLD BROWSERS LOOK LIKE NEW BROWSERS
  • you inherit the browser’s strengths and the LIMITATIONS as well. This is a GOOD thing.
  • This doesn’t mean you don’t push limits. It means you know which limits you’re pushing.
  • What to do if this headline wraps? How does that affect leading and margin settings? Have you designed for all possible list types? Tables? Widgets? Form elements? How about fluid layouts?
  • Design for interactions with the user. CSS and JS can help you design and prototype simple and complex interactions Design for typographic details, like baseline grids, letter spacing, fancy ampersands, correct quotes and dashes
  • Most of the old photoshop-only stuff can be achieved in CSS3
  • I found I was presenting fewer and fewer templates to clients, and shifting some of my creative thinking to the CSS stage, as deadlines creeped up.
  • by removing the need for clients to guess at how a site will be used you gain their comfort and confidence
  • mostly things you already have
  • 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>

    ×