March 25, 2007

How CSS made me a better print designer

Things change. I've realized this inevitability of life and embraced it. The last two years have been marked by a dramatic change in my work away from print and into the expansive realm of web design. That's why when I was asked to design a 150+ page training book this past month, I jumped at the opportunity. "It'll be like old times" I thought to myself. The endless expanse of folios; the grids; the typesetting; and when it's done—ahhh—the smell of fresh ink on paper.

The allure of designing a substantial printed piece, not a mere letter size flier or trifold brochure, but a book is undeniable. It's a problem solver's playground—taking a graceless Word doc and transforming it into literature. So, with mouse in hand, I set off to design a book with the noble charge of educating it's reader and I discovered some interesting things along the way.

Lesson 1: Feeling trapped? Build some walls.
My design process isn't a speedy one. I'm a perfectionist; constantly going back and rethinking each decision I've made up to the present. The result of this agonizing process is often substandard productivity and a finished piece that I can't stand to look at. There is a threshold that I pass through when so much energy has been invested into a project that I can no longer love it, no matter how good it may be. This is the plight of the perfectionist.

Surprisingly, it was web design that lead me away from my perfectionist tendencies. I'm now used to working within the constraints of the web: scant typeface selection; low screen resolution; image optimization; plus a myriad of technical limitations. When I dug my heels in on the book project I decided to approach it much like a website by limiting my options. I created an on-the-spot style guide dictated by the basic demands of the project: lots of information = highly legible typefaces; thin photography budget = dramatic use of scale to create visual interest. By building walls for the path ahead I could find the door at the end of my creative corridor without getting lost along the way. Rather than agonizing over the thousands of typefaces to choose from, I considered larger design issues. In the end, my finished piece is all the better for not having traveled the path of perfection. Plus, I can look at it without cringing.

Lesson 2: The idea is it
The most dramatic shift in design thinking I've undergone over the last couple years has been that aesthetics aren't it. The crux of any great design is not the look, but the idea and the quality of the idea's execution. Doug Fuller, my first art director and design mentor, tried to instill this in me but it didn't fully take hold until I began learning CSS web design. With CSS it is vital that the designer carefully consider the site's content, and how to best communicate it. In this mode of though the substance defines the look, not the other way around. While designing the training book I found myself surrendering the look to the idea more than ever before.

Lesson 3: Get some style(s)
When designing in page layout programs I had always used styles, or so I thought. I certainly created lots of styles, a method for applying particular attributes to blocks of text with the click of a button, but how well did I implement them, or even understand them? After using styles in web design I began to realize how poorly I had employed this method in print. I'd often create a style but then not use it, opting instead to format subsequent blocks of text by hand because it just seemed easier. Or creating a style only to change it's formatting by hand, but not apply the new formatting to the style. For styles to work, they have to be maintained and used across the board. If type formatting changes need to be made, they should be done via the style, and not the paragraph.

CSS style sheets for web design have taught me to give styles the respect they deserve. As with all things on the web, they have to be built right or they won't perform. And so, after agonizing over so many web style sheets I finally found myself getting the most out of my print styles on the training book. Between this and the other lessons I've learned from CSS, my book actually turned out looking good, ahead of schedule and under budget. Style me happy.


Anonymous said...

Very good blog! I find it amazing that there are so many abbreviations for expansive words like CSS, assuming your meaning cascaking style sheets...Congrats on writing your manual and it being under budget! Keep it up!

Anonymous said...

Oh goodness, i cant spell, i meant *cascading style sheets, not cascaking, though if i was into camping and outdoorsy stuff, i might call canoeing; cascaking...
cascaking is almost as annoying as the word bedazzled.

Daniel Worthington said...

I know what you mean when you talk about constraints being a boon to creativity. I love the interplay between the creative and the technical for this very reason. You have a set of rules that you must work within and that work becomes a play between and within the rules. This is what's wonderful about Legos, Web Design, Architecture... I could go on.

Since you mentioned quality, you might like this article if you haven't already read it:

Andy talks about how quality ought to be the aim in web design, and standards are simply a means to achieving quality of design. Of course in web design quality means embracing the nature of the medium.

P.S. Found your blog through your "I" on Word It.

Studiostein said...

Daniel, I hadn't read Andy's article on quality. Actually, it's practically a manifesto. I enjoyed his point of view. I hadn't thought about this quality vs. standardization argument before.

The wonderful thing about web standards is that, if done right, it is by it's very nature high quality. Then there's just the matter of evangelizing this aspect of web standards.

Thanks for your input. I'm very glad to see people coming to my site from Speak Up.