Designers: Break your Design

Developers, as a rule, hate comps. Now, I appreciate the need for them. When a designer has to come up with a design, sometimes you need something to guide your vision. Something fast that moves as quickly as your idea. Photoshop works well for this. You can come up with a pretty design and tweak it into place in no time.

Developers just hate it when that's what's delivered to them to implement.

There's all kinds of reasons why, but I'm going to focus on one particular problem here:

Comps are perfect.

They're the perfect site. The perfect amount of text. The perfect number of features. The perfect images that in no way clash with your design, but instead bring out its subtleties. The titles are never too long, the captions are the right length, no long words are used, and no one has tried to pervert a feature to do something completely different.

Sure, if the content of a site were done completely by designers, I'm sure they'd be anal retentive about making sure the design was never broken by silly things like 'ugly feature image' or '1500 word article.' However, content is rarely handed over to designers. It's handed over to content editors who have suppliers who don't understand why they might have to choose a new picture or tighten up a press release. Who cares if it came from the press secretary?

Color schemes

You picked the perfect images for your comp. Now pick the worst. What is, reasonably, the worst image that could be put on the front page of your design? NASA is chock full of beautiful images. We also have some very, very boring images that pertain to amazing advances in technology and scientific knowledge. Anything to do with possible planets in other solar systems? Man. Hope you like monotone.

We also have images that are full of all sorts of colors. Nebulae have a way of picking some strange color palettes. Not very considerate of them.

Yes, no color scheme is ever going to compliment every image out there. The point is to see how badly your design is broken.

Content Wells

What happens if your client hires the grandson of Toltzoy to be a staff writer? He likes long, windy tracks of text. He never turns in an article under 2500 words. He can't conceive of 'blurbs' that are only 500 characters long.

Twitter is his anti-Christ.

What can Johnny Tolstoy do to your design? Does it grow elegantly? Does it deal with long words with aplomb, or does it get that weird justification issue where you end up with words spaced out an inch apart?

If there's issues, you can actually solve this two ways: make the design 'growable,' or force only a certain number of words per page, making use of 'next' pages. If you go with the latter, make sure the developers know. Really know. Don't tell them. Put it in big red letters on the comp, so every time they look at it, they remember that requirement.

Oh, and be prepared to hear their groans. Most geeks that I know HATE the 'next' feature.

The other kind of person your client can hire is someone whose muse is e e cummings. Simplicity in all things, he never writes more than a paragraph or two. What does that do? Is your navigation three times the length of the article? Is the main content well pushing everything out, so that when it collapses, the site becomes a mishmash of divs with no real order? Have you braved your design for "Simplicity, simplicity, simplicity"?

Blurbs

Blurbs are a popular feature of websites today. I'm betting you've included a few in your designs. I don't blame you. They add more interest than just a bunch of titles and links, and are fun to style around.

Blurbs are also a great place to hide implicit requirements, or bring out a new place to break your site.

What do I mean by implicit requirements? Those are the fiddly little things that you want, but don't state directly. Like, a blurb box should only have four lines in it. Do you know how variable four lines can be? Different browsers will use slightly different fonts. Different OS's will use completely different fonts. Sure, they'll look the same, but they'll be just different enough to mess with you. One day, it'll be four perfect lines. The next, it'll be five and a half.

Magic. And proof that the god of fonts hates you.

So put too much text in a blurb. Put too little. Consider selling the devs on making something that will auto-concatenate your blurb if some content editor gets cheeky.

Degenerates are going to use your design

Really. Content editors are a bunch of sneaky degenerates when it comes to site designs. They'll take the features for which you had a specific set of ideas for, and they will use it for their own purposes. I've seen them do things to views that would make your skin crawl. They suddenly need a news section? They grab the thing that looks closest to it. They'll try to make all the cool widgets do what they need them to do. It's going to look horrible.

What's the worst thing they could do to your cool features? Should you consider adding a few more, or making them more modular, to keep the mongols at bay?

Damn users and their poor eyes

There's nothing that will break a design faster than pressing Control - + or -. Man, users love to change the font on a page. Sure, your site may have the perfect font size for all users, but if the site before yours used teeny tiny fonts (or honking huge), you're screwed.

So, if you really want to wow people, make that site grow gracefully.

Why can't all users have an awesome monitor like mine?

We do a test in our group, started by Pydanny, where we look at the header of a site and put our fingers up to it, the count how many fingers some glorious header pushed down the page content.

You're a designer. You have this huge, wonderful screen. The finger test probably seems really odd, when your screen is thirty fingers high or more. We poor souls on laptops only have twelve fingers at most. If your gorgeous header is over four or five fingers high, You've now, along with tool bars and such, taken up half our screen. Every time we load a new page, we have to scroll down to get any content.

Sure, we may think 'oh, pretty header' the first time we load the page, but trust me, four or five clicks in, it morphs into 'god-damn header.'

So, break your design by grabbing someone's 12-inch MacBook and seeing how your design looks on their screen. Hell, if you want to get really adventurous, try an Eee PC! If you can look good on the big monitor, the laptop, and the netbook, you've reached some designer-geek nirvana.

Argh! Too many!

It can be a lot. I've had designers in the past tell me the above things are a technical issue, not a designer issue, and developers should be solving them, not them. Technically, yes, they could be solved by a developer.

Go and look at how your developers dress. Decorate their cubes. Design their own websites. Ask them about what design should be (we'll answer quickly. We're opinionated little f'ers). Look at the sites they think are designed perfectly. Feel your soul atrophy in their stark landscapes.

Do you really want them un-breaking your design?