I'm considering writing about top tips for print designers working on the web. Right now all I've got is "Your baseline grid doesn't exist" and "Think about it before you make it different". Any 'top of the list' thing y'all can think of?
I'm considering writing about top tips for print designers working on the web. Right now all I've got is "Your baseline grid doesn't exist" and "Think about it before you make it different". Any 'top of the list' thing y'all can think of?
Malleability. You aren't designing for one type of paper run through a specific printer with controlled results. It's like designing for thousands of output variations. Multiply this several times when you consider *editable* text (pervasive) or multi-lingual content.
Evolving. The tech behind design for web is improving super fast right now. Embedded fonts, programmatically rendered and animated elements with CSS3, & much more. Learning about these things, even if you don't use them, helps.
States. A printed page is an artifact left behind. Interactive interfaces like web pages have loads of potential states: rollovers, animation, transitions, media elements, etc. Also consider visitor's context as a state.
Oops ran out of letters...
Thanks for including me.
I'm confused, though, why you dismiss the importance of a type-defined / type-inclusive baseline grid as part of a rich media layout. Sure, the tools aren't quite as exact, and pixel alignment can be more difficult on screen than it is with print, often requiring multiple approaches to guarantee consistent behavior across browser and OS combinations, but it's still incredibly important and definitely possible.
If anything, at this point - with java and ruby and HTML5 tools to allow type-based layouts and the wide availability of good webfonts - it's more important than ever to demand a high level of consistency and exactitude in design for screen, just as we would in print.
@jlt Yeah, that could definetly use some qualification
When fluid width columns are involved a *true* baseline grid can very quickly go to hell. Images scale and no longer match, text blocks wrap and throw things off, etc.
That's not to say that I think establishing a vertical rythm is unimportant - quite the opposite. Maybe it's more accurate to say "there is no global baseline grid", instead I think developing a consistent system of margin/padding (probably based off the type size) should be the focus.
I really feel like I need some examples to flesh out the idea, but that atleast gives you an idea what I was thinking
@stevenosloan I'm not sure this counts as "true" (and I've actually tried then abandoned using it) but this development kit purports both responsive behavior and baseline gridyness. fluidbaselinegrid.com
more the content under the image flows with it, so it can get off the grid cl.ly, same thing would happen with "smaller than base" type if the number of lines changes due to wrapping
Thanks for your feedback! Team Branch
Please refresh the page and try again.