Sunday, September 7, 2014

Bringing Sexy (Website Templates) Back While Finding Your Inner MMA Design Referee

For those of us who still remember Quark Xpress, massive drop shadows and dial-up modems, the word “template” usually brings visions of PowerPoint proudly displaying ornate gold frames, dramatic mirror text and excessive embossing. For those of you who do not remember this – consider yourself lucky and get off my lawn.

With the rise of blogs and later on responsive design came a slew of templates in the vein of WordPress and the world became a happier and prettier place. These templates not only proved that templates can be sleek, sexy and a joy to experience but it taught us some important, basic things about designing for content that will ultimately be controlled by others. And in today’s world, isn’t that pretty much every single site other than your company’s website?

While portfolio type designs and blogs with big beautiful images and little text is now a breeze, the reality is that most of us design for clients who want a great digital experience while also including a lot of information. A chunk of that information often needs to live on the homepage. Most final images will not be sweeping vistas of a canyon adorned by the ultimate Instagram filter. The font could be Arial or anything that’s free. And the headlines could be full sentences. With commas.

So let’s talk about how we can work with these kinds of realities when it comes to larger companies. Companies who want their own look yet need a templatized format, design parameters to keep their brand integrity and some safe guards in place to prevent rogue starbursts and aforementioned mirror effects.

clip_image002

1. Keep it clean. Keep it easy.

Taking a lesson from our WordPress templates – notice how all these designs are clean, simple and without fuss? All fuss does is give opportunity for a self-indulgent mess. If you like me at times design something while thinking “why is this here?” and fail to answer your own question: take it out.

2. A little control goes a long way – identifying areas that are low risk/high reward

When working on templatized design, we as a rule lock some areas down while allowing a higher degree of customization in others. Start with identifying which areas of your template that will be heavily edited vs. sections that are more permanent. Keep areas (like rotators, news and other high turnover areas) simple and focus your elaborate designs on more permanent fixtures like navigation and business areas usually located under the rotator and to a certain degree, the footer.

clip_image004

3. Protect your type at all times.

Consider me your MMA referee of type. No template will dissolve into a glorious disaster faster than a template that does not control its type. These days, pretty much any site we do is responsive. Responsive sites still tend to heavily utilize rotators, which I personally find somewhat maddening (and others do too) but that doesn’t change the reality that rotators are still a staple on most websites. Rotators, in addition to having several large images, tend to have type sitting on top of them. And since you are most likely not controlling those images, always make sure to control your type.

For example – look how lovely this looks. Someone really took the time to prep this image and type so it could work well:

image

But oh, hey, not everyone is a designer and this is what happens when an image hasn’t taken type into consideration.

clip_image008

And then there is the responsive aspect of things. An image can be lovely in a desktop format:

clip_image010

But less so when in a tablet format:

clip_image012

Although it might not be as elegant and beautiful, sometimes taking a safer type treatment, like a blocked out background or a dark gradient is a better bet than going with that gorgeous first option. Say it with me: if you can’t read it, it’s not all that beautiful.

clip_image014

So again – protect your type at all times. You might not get a knockout but you will always win on points.

4. Consider the whole experience. Templates are not just for homepages.

Since a lot of conceptual design provides a heavy focus on the homepage and one interior page, it’s easy for a client to be blinded by the shiny promise of a sexy homepage template and forgetting that the branding experience extends throughout the site (and who can blame them?) While showing an interactive experience in a static medium (such as a PDF) is hard, speaking to this fact is imperative.
An overcrowded templated homepage is like a cranky attitude obscuring an amazing personality. And a gorgeous homepage without the same branded consideration on the ENTIRE interior is well, just a pretty face.

clip_image016

We want our templates to be the whole package.

5a: Put together some simple guidelines.

So you’re a designer. We have pretty awesome jobs. We know what looks good most of the time. It’s obvious to us. But just like I cannot comprehend spatial relations, statistics or the game of baseball, not everyone responsible for content knows what looks good. That’s the reason us designers have a job after all, so let’s maximize the probability of a beautiful digital experience.

Something I have found to be very helpful, especially for templated sites where a lot of content is TBD, is to put together a brief guideline for content along with a visualization of what areas are customizable. Not only does this give someone who doesn’t get paid to spend hours looking for the perfect image on OFFSET.com a good overview on how to make solid design decisions. This isn’t to be confused with a website style guide. It’s simple directions for customizable areas, photography, type, character limits, etc.

clip_image018

B: Budget for it.

While this isn’t three-months-spent-mired-in-brand-guidelines kind of time consuming, make sure to budget a handful of hours to put this together so no one gets surprised. An ounce of guidelines is worth a pound of anxious client calls when the content they upload isn’t optimized (aka looks bad).

In conclusion: when in doubt with templates, cite your inner MMA Design Referee – “keep it clean and protect your type at all times.”