Your SlideShare is downloading. ×
  • Like
  • Save
Designing in the Browser - Design for Drupal, Boston 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Designing in the Browser - Design for Drupal, Boston 2010

  • 3,375 views
Published

 

Published in Design , Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,375
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • hiI'm Mason Wendell and i run Canary Promotion + Designand I've been designing websites for a long timeand for a long time i'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 & 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

Transcript

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