Designer == Coder

lots of folks have been talking about how designers need to learn how to code. i agree, but also: should developers learn design principles?

There should always be a little cross-training in every industry. It improves communication and mutual respect. A serious UI/UX designer isn’t trying to just make something “pretty.” More like, “pretty awesome.” (Heh!) But experts should be left to do what they do best: design experiences or code the backend. Very few can do both equally well. One of the complications is that on the web, there are no decent design tools. On the Web, design is CSS. The code is the design control. Instead of a paint bucket with red as the color, you have to create or specify an HTML object and give it this property:

background: #c00000;

And in order to “paint” on an HTML canvas, a designer needs to know some code to get it done. I don’t think anyone should expect a UX designer to code advanced queries and JavaScript. But he should be able to clearly describe the user’s needs and expectations, and understand the capabilities and limitations of every technology — just as an established print designer knows some paper types have better color reproduction than others.

When I interned at the Naples Daily News in 2006, I designed newspaper layouts as a copy editor. The layout software we used was code-based. Every headline, byline, photo caption and article text had to be set with special codes not unlike HTML. I had an epiphany later on, thinking back on this experience while I was dabbling in advanced CSS: Programs like QuarkXPress and InDesign merely removed the coding aspect from design. It replaced markup with buttons and toolboxes.

Today, when I “design” a website, I often think in desktop-publishing terms: image boxes, text boxes, headlines, paragraph styles, all of which have either CSS or HTML equivalents. A “div” for example can be practically anything, either a text or an image frame, depending on the CSS. Similarly, when I draw a box in InDesign, almost anything I can imagine can be placed inside of it. Because I understand how a CMS works, I can also imagine divs and other objects as “placeholders” for dynamic data, like a list of headlines.

It is therefore not hard to imagine better design tools built for the web that are as powerful as InDesign is for print. In fact, Adobe Muse strives to offer this very thing. All it’s missing is the ability to integrate with content management systems, which can’t be too far away. After all, InDesign itself has XML import/export capabilities and can do simple data-driven documents out of the box (a glorified mail-merge), but even more is possible with InDesign plugins.

In other words, someday soon, designers can get back to strictly designing* and coders back to coding.

*Of course, another roadblock is browser compliance with HTML and CSS specifications. Browsers need to be as predictable as a PDF reader. A document creator should be able to use standard tools and create something that he is reasonably certain will be represented the same way across all browsers, operating systems and devices, just like today’s PDFs.

A hack job toward single-post exporting

I spoke too soon. Somebody already wrote a plugin that lets you export a single post into an InDesign-friendly format: tagged text, no less.

So, of course, when I came across it my immediate desire was to hack it up and see what I could make it do.

First was to see how I could manipulate the InDesign tags to fit the stylesheets we have in place at The Daily Cougar. Easily accomplished by exporting a complete story (headline, cutline, etc., included) into tagged-text and looking at the guts of it.

This got to be pretty interesting, so I went on a tangent, and realized I could access all of the WordPress functions available through the loop. That meant I could export the headline (the_title) and category (get_the_category) fairly easily. The trick would be writing some simple functions to fetch our custom-field driven subheadline and bylines. And the icing on the cake would be to grab the cutline from the first image attachment of the article.

So, long story short, I’ve got a workable web-to-print workflow piece, customized for our environment and ready for testing in the wild.

Next up: hack the plugin’s “Print post” function to generate a clean XML document that could be imported into any page layout program. If it seems worthwhile, maybe I’ll offer it up to the plugin authors as a new feature.

Man, I’m a huge nerd.