4. Build Your Design
Twice!
• Once in Photoshop,
then again in markup/css
• Two completely different mediums
with vastly different abilities and limitations
7. That’s just too hard to
change.
• fonts & global typography
• color palate
• "just a few small changes"
translation:You'll have to tweak your whole
document
8. 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?
9. 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!
17. Everything you design is
build-able, because you
just built it when you
designed it.
18. What do you need?
• All the browsers
• Text editor
• Graphics Editor
• Firebug, Webkit Inspector, Firebug Lite
• Sass & Compass
• xrefresh
19. Play with the
cool new toys.
Most of that you need can be achieved in CSS3
• rounded corners • rotation and other
transformations
• @font-face
• alpha transparency • CSS animations
with transitions
• text and box • more, obv
shadow
20. Use Photoshop only as
much as you need to.
• break out your image editor for other
things
• Use it to make the graphics you need.
(Not to pretend it's a browser)
21. 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
what to do about them.
25. Sketch and/or
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!)
26. 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.
29. 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.
30. 2. Anticipate Drupal
• use your own markup, and be prepared to
bend Drupal to your will (to a point)
• 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
32. 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.
33. More CSS Frameworks
• Typography
• Forms
• Baselines
• Fluid layouts
• Study them and take what you need.
35. 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.
