The Importance of Character in Web Design

As you previously know, Template Monster originally published a post entitled Ugliest Websites of World’s Top Hotels that caused a burst of comments both criticizing and encouraging. This fact couldn’t leave us indifferent, and consequently, we made Supersonic Redesign of the worst (in our opinion) hotel website – the website of the Hotel Goldener Baer in Vienna. For all that, we got even greater amount of feedbacks (many thanks for them), and what was truly exciting that one of the active participants of the dispute, mentioned above, drew a sketch depicting his own vision of a new design for Goldener Baer website. As we know, in any design, as well as in any web design, various approaches are possible. Thus and so, we invited Steven to complete his sketch and write a guest post on Template Monster’s blog to acquaint our readers with alternative (in relation to our) redesign variant.

It should be noted that our approach is in marked contrast to Steven’s. He initiated with logo and corporate style changes. We focused on a website, and intentionally didn’t make any logo modifications since it would have entailed the change of corporate style which is far expensive than simply website redesign. Through differential approaches, we cannot accede to Steven’s criticism of our variant, but we have concluded to leave the original text to let the readers decide whose approach and whose variant is better.

So gain a deep insight into what Steven Moseley has written:

“Although the original Hotel Goldener Baer website looks about 15 years outdated and poorly designed, it contains a visual language that speaks very directly to the “character” of the Hotel.

How so? The Goldener Baer is a historic structure – textural, rustic, quaint. Consequently, the hotel’s website is also very textural, rustic, and quaint – indeed, to a fault, but that’s beside the point. The site has “character”. We’ll get more into what that means later.

Although the Supersonic Redesign of the website is unarguably more professional and usable (vastly so), the character of the Gold Baer somehow got lost in translation.

The redesigned website no longer speaks a rustic, quaint language. Instead, it speaks a corporate language, with chamfered boxes, radiused corners on buttons, pastel green and blue colors, and soft gradients. The only real texture in the site is in the background, but it doesn’t “feel” old-world. Instead, it has the feeling of mid-20th century wallpaper (not the kind you put on your computer desktop – the kind you actually paste onto walls!) In the new site, the stone textures, gold highlights, and serif typography used in the old site are all gone – and along with them, all of the character that define the hotel.

So what is character and why is it important to web design?

Website design is much interconnected with marketing – it is, in fact, an extension thereof for many businesses (exceptions to the rule being web companies and utilities, such as Google, Wikipedia, YouTube, Facebook, etc.). Especially in industries such as hospitality, visual marketing is very important to defining the brand. Any form of visual marketing, in order to be successful in creating a brand, has to graphically represent the “character” that the client wants to transmit. Character is a term used in the advertising industry to describe the outward personality a business wants to portray to its customers. Typically, in creating an ad strategy, agencies start by defining a business as if it were a person, or as if it had a personality. Sometimes, businesses pick actual characters from movies that convey the personality they want their company to represent in the eyes of consumers, as this is an easy way to convey a proposed personality to virtually anyone.

This extremely important step in branding can’t be ignored in web design. In our own work with Fortune 500 companies, we often receive 20-50 page documents from our clients outlining their Design/Branding Guidelines. These guideline documents are carefully constructed to define a brand, a character, and rules for how vendors should properly portray that character. Of course, smaller clients don’t have the same multi-million-dollar marketing budgets, and usually don’t even have a single page outlining their brand guidelines. Many businesses haven’t even thought about how they want to be perceived. But these companies still have a character – even if it’s not written down. As a web designer working for small businesses, it’s your duty to analyze your clients’ businesses and figure out their character before you begin.

So how do you define a company’s character?

Before you even open Photoshop, you should spend a good amount of time learning about your client’s business. Speak to the company’s founders, learn their ideals, learn how they deal with customers, visit their place of business, and get to know them as people. Often times, a small business, especially if a sole proprietorship, will take on the character of its owner or manager. You should get to know this person well. You should also find out about the company’s target market. Do they primarily sell to 15 year-old middle-class girls, or 45 year-old professional men with 6-figure salaries? The same character will not appeal to both audiences. If the business’s character isn’t in synch with their audience, you should advise them as such and propose changing it (even if slightly).

When you’ve figured out who your client is, and who their customers are, then you should create a list of qualities that your business has that would appeal to the target audience. In the case of a luxury casino-hotel (e.g. the Bellagio, listed in the original article in this series), some of those qualities might be Lavish, Successful, Adventurous, Cool, Confident (a little Arrogant?) and Sexually-Appealing Then, think of all the characters you’ve seen on TV and in movies, and determine which of those characters would most closely represent your list of qualities. For example, Neo from the Matrix is Cool, sometimes Confident, and Adventurous, but he’s missing some of the important qualities in our list above. He’s not Lavish, not very sexual, or successful – he’s quite a tragic hero, in fact. As it turns out, he wouldn’t very well represent a luxury casino, though he would probably be a good character for a technology company, because he’s got some other qualities that well-represent that type of brand. So who would be a good character for a casino? James Bond, maybe? He’s confident, lavish, and highly sexual. But which flavor of Bond would be best? They’re each a little bit different. Sean Connery, Roger Moore, Pierce Brosnan, maybe? Probably not Daniel Craig – his Bond is a little too violent.

When you’ve identified the movie character who best represents the qualities you want your client’s business to portray, you should then narrow down your list of character traits to 4-5 descriptive adjectives of your chosen character that you will use to define your brand in its entirety. From these adjectives, you will be able to derive a visual language based upon graphical styles that well-represent the character you’ve defined. You’ll also be able to define writing style, audio/visuals, and more, but those don’t pertain to the general design of a site, so we’ll leave them be.

Applying these tools to the Hotel Goldener Baer…

Looking at the existing website of the Gold Baer Hotel, and reading their self-description, we can assume that their desired character is definable as:
• Mix of old & new
• Rustic
• Quaint
• Helpful (convenient)

Admittedly, these aren’t the sexiest or easiest group of words to work with. Some are, in fact, contradictory in image. Nevertheless, they do define a character. The Gold Baer wants to be seen as a little old villa with a modern twist. Their building appears to be a late 19th century structure, and the interior seems like an inexpensive 1980s remodel. Again, not the easiest thing to work with. The existing website, it seems, well-represents the company’s branding strategy – use whatever’s cheapest (not a good way of defining a brand).

This shouldn’t be a road block for us as designers, though. We should see this as an opportunity to fill in the gaps and help a company define a brand that will be effective for them. The most attractive parts of the Gold Baer’s brand are its name, which conveys a sense of quality and quaintness, and its historic structure. From these, we can alter the character slightly to be the following:
• Historic, yet Stylish
• Rustic
• Quaint
• Rich in Lifestyle, but not in Wealth
• Romantic

So who would be a good character to represent the above? Cinderella, maybe? Better yet, how about the character Elizabeth Bennet from Pride and Prejudice, as portrayed by Keira Knightly? Maybe a little too intense, but she definitely fits the role pretty well.

The redesign of the Gold Baer website…

From the above analysis, we developed a visual language. Old stone, a textured old-world paper with embossment and a fine border, lots of gold accents, a new logo with a gold seal of a bear (the bear is no longer a cartoon image with a literal representation of a gold-colored bear, but a more impressive graphic that could actually be a modernized version of an old-world coat of arms). The paper looks like something Elizabeth Bennet might have actually written a note on. The seal could be her stamp.

The photos of the hotel are scattered across the front page like snapshots, the form fields are textured cutouts, buttons are golden, with starbursts on the corners. Fonts are a combination of Serifs and Scripts for titles, elegant fine-lined Sans Serifs for the main menu and subtitle, and default Sans Serif for the body (for legibility). We even threw in a floating old book and a quill at the bottom of the site to add a quaint feeling that could be lost with pretentious iconography or gold-overkill. These real-world “found” objects ground the site with a language that proposes an experience.

In all, the deep colors, rich textures, and floating objects give the site a highly engaging tectonic appeal. You almost feel like you can reach out and touch it. The combination of elegant fonts and gold accents lend an air of snobbery, but those are offset by the quaintness of the photos, old book, and quill. The site successfully maintains the character that defines (or should define) the Gold Baer, and does so in a website that is usable, attractive, and appropriate to the business.

I hope it helps some people learn the importance of character in web design!”

by Steven Moseley,
President, Transio Web Design
Owner, Web Design Forums