Wireframing in the real world

The advertising blocks allow you to create simple forms like the above, and you immediately think “Hmm, this looks very peaceful and sedate, what a clean application” It’s the same effect you get from using chunks of Lorum Ipsum text, or even using gray bars to indicate text. You fool yourself into thinking that the application is going to look pristine with all that neatly formatted text and beautiful background advertisements.

The problem is that you’re designing in a fantasy land where headlines don’t wrap, Helvetica is always available (and beautifully anti-aliased), text can be justified and adverts are just gray boxes. You pass these “fantasy wireframes” over to the graphic designer who follows your assumptions and voila you’ve got yourself some gorgeous pictures. If you’ve been careful, you’ve got the client to sign off at each of these stages, and everything is going great. Now, if only the site didn't have to display real data, real adverts, and real content you’d be laughing all the way to the bank.

Let’s look at how that previous sign up form can (and often does) work out. Not so peaceful now, is it? You rarely see those adverts in a wireframe, yet they’re far closer to the real thing. And this is before we get into the world of flash ads, talking emoticons, and those mental ones where the character steps out of the advert and onto your page to talk directly to you.

Here are two examples from Bebo & Facebook where I’m sure a gray box saying “advert” seemed harmless, but what actually ends up there is atrocious. The Bebo advert actually copies the standard Bebo alert box styling, and will say anything from the typical “ You’ve just won a car”, right through to “Your profile has been deleted, click here to recover”. The facebook “Sparkey” application has more adverts in it than an American sitcom; 5 of those links are hidden adverts, the remainder are part of the application.

The sooner you include real data in your designs, the better your design will be. Would you really include a photo gallery if you knew all the images were blurry distorted 30px gifs? Would you really include a “News & Events” section if there were never any events? It doesn't matter how well you can design, you’re not the only input to system. The quality of images and content is a constraint on your design, just like browser support or accessibility. If you don't factor it in, you're not doing your job properly.

Related

• Line break FAIL Just give a 30 character preview of the description here, what could go wrong...
• Jason Fried on Advertising -The advertisers want to win your customers’ attention but customers want to focus on the task at hand.
• Andy Rutledge on Design Criticism - If you’re a designer, get it straight right now: it doesn’t matter how much work you put into it or how much you wanted to do a good job or how much cool collaboration you experienced on the project or how silly the client’s constraints were or how poor the working conditions are at work. It is only the results of your work that matter. Ever. Period.