Personality in Web Design: Atmosphere, Character And Brand Feel

As a consumer, we seek out products, services, and practitioners that are friendly, helpful, interesting and overall pleasant to deal with. When you select individuals and organizations to interact with or do business with you are making a decision based on the totality of their behavioural characteristics and how you emotionally react to them.

Oddly enough, that is the very same way that Merriam – Webster’s defines the word “personality”. It not too hard to see – after all, the word “person” is right in there.

When a user interacts with anything online they want comfort, reliability and character. In short, users want a human feeling from the product. We want a real face on companies, websites, brand materials, and products. Why? Simple. We understand the world by how we emotionally react to it. As designers, we have the unique ability to tap into the emotional decision making process.

Finding the personality

At the end of the day, personality is about user experience. People look for unique, fun or pleasant experiences when they deal with businesses or other individuals. Understanding your personality is identifying what kind of user experience is offered. While personality can encompass many elements there are a few key points that we can look out for when trying to communicate through design.

Attitude

Attitude is one of the more subtle features of personality but it is also the most effective. The way you approach customers or how you approach your craft is specific and unique. An attitude can refer to respect, methods, language or reactions.

Language and Respect

It is an important feature to take note of how much respect is imbued in how you do business or interact with users. Respect is the main mechanism for expressing that you place value in the customer. Respect can be expressed in responses, attentiveness, and speech.This can also be evident in greetings and salutations such as the difference between “Greetings” and “Hey”.

While both are perfectly acceptable, one places more propriety in its language than the other. This could be the difference between how a classy piano bar and a casual beach bar respect their customers. Be careful how you present yourself, because it is important not to misrepresent the kind of approach you will receive from the business.

Visual Language

When we speak of language it doesn’t just refer to actual text or dialogue. Visual language is less specific and can be reflected in type choices, alignments, color usage, and design style. To better grasp what visual language does, let’s see how the attitude of two developer websites is conveyed. In the example below, you will see Apple’s developer center and Symbian’s developer site.

In the example above, the interface is extremely clean, sleek and crisp. The tasks for beginning to develop for Apple are front and center and are accompanied by structured groups of information with very little visual noise or texture. Apple wants to be streamlined but still pleasant. There is an attitude of friendliness but also a desire to get down to business and build solid products.

This is indicative of Apple technology and development, so the attitude is accurate.

In a stark contrast to Apple, Symbian’s developer site has a much more fun and much less structured approach. It is clear that Symbian is much more concerned with communicating how creative and fun it is to develop for their devices. This is evident in the strange and sketchy illustrations, the focus on community stories, the slight humorously illustrated icons, the rough and free form typeface choices, and the painted elements and shaky line borders.

While the information isn’t really less structured than Apple, the approach is focused differently and accurately communicates Symbian’s personality and attitude toward their developers. The overall effect is an atmosphere of creativity versus Apple’s more streamlined approach.

Atmosphere

The best way to think of the atmosphere is as the dominant emotional environment. The key word here is emotional. Whether you are entering an office, a restaurant , a mechanic’s shop, or viewing a website you immediately get an emotional sense of what to expect. What this means is that a customer immediately forms a set of expectations about what they are about to experience.

We assess the atmosphere based on a number of factors such as color, texture, quality, organization, etc. Look at the photo below, it should give a clear expectation of what you will get when you dine at this restaurant.

The human mind is constantly forming emotional ties, labels and expectations based on a number of common indicative elements such as color, texture, organization, overall quality, etc.

Color

Color has a powerful ability to affect our mood and our senses. We associate color with feelings and ideas. Color is more than just copying a business logo or a menu. Certain shades of colors are even described as warm and cool. This because we associate reds, yellows, and oranges with fire, the sun, a nice day, sand, beaches, etc. While we associate cool feelings with ice, snow, low lighting, etc…

These emotions are tied to our experiences and they are just as powerful as a decision making mechanism.

Texture

Texture is a tactile sensation but it certainly does not require you to actually touch it. Texture should seek to invoke a feeling or memory. Texture is extremely indicative in appearances and connotations. Refer back to the photograph above. Notice, the clean, but natural wood flooring, take notice of the smooth dark chairs, counters, and shelves.

Did you imagine smooth wood sliding against your hand? What about the solid “click” of formal shoes on the floorboards or the scent of mahogany and lacquer? Most of these memories passed through your mind without you even thinking about it. But our minds are able to relate our emotions to our memories and recall how we felt about these things.

Even the most subtle details can be vivid if the emotional reaction was important or strong. Such details as candlelit tables, and elegant wine glasses are all part of the texture of this business. This is the core of the personality and it is essential that a website or any type of marketing communicates the impact of the experience.

Quality and Organization

Quality has fallen into somewhat of a buzz word status. This means that people simply assign less value to the word. However, when analyzing a business, it is not hard to measure its quality level. How carefully do they handle their craft? How organized are they? Do they follow-up with customers and constantly look to make them comfortable and assured?

This is another element that we must take note of as designer to accurately reflect it in our web designs. If a business identity and personality calls for them to feel haphazard or disorganized (such as a beach themed company or a bar), then it may not be best to present a well-organized, clean website design.

Translating Personality Traits

When you begin the process of actually translating the personality of a business or individual to a web design you must first spend the time to analyze all the traits and then focus in on the strongest and most memorable elements. As I mentioned before, memory breeds emotional responses and those are what we want to invoke.

The human mind can latch on to particularly faint cues and seemingly subtle details to attach memories and connotations to a place, business, person, or feeling. These clues in context with the message are what we call connotation – a non-literal meaning or idea that is suggested by or associated with a word or thing. To put it a different way, of what does this particular thing generally make you think?

For instance, candlelight generally carries connotations of romance, serenity, and elegant ambiance. Connotation is a powerful tool that designers can easily leverage. By recalling certain objects, colors, or textures we can evoke a connotation that we want to be associated with the business or individual featured on the website.

Subtle is strong

All of the different elements of personality are important to keep in mind. However, it is not always practical to use the exact images and objects that we want to attach experience and emotion. This is especially true in the web medium.

Let’s take our previous example of candlelight for a classy restaurant. We have noted that the business exudes importance cues like elegant atmosphere and a classy dining experience. Its not possible to simply have a picture of a candle, have a photo of a tuxedo, or use a flowery script font.

Those are too garish and inelegant. We have to use blurs, desaturated color, simple design and evocative photos to translate that promise to a potential customer. Let’s specifically look at Gramercy Tavern in New York.

While there are not a lot of specific textures and patterns, the design of this website is extremely evocative of what you can expect. The subtle blurs of an environment photos lends the soft cues of a classic atmosphere with low lighting. Alluding to the tendency of the background noise and environment to become a blur when you are enjoying yourself.

The text exudes confidence and has noticeable breathing room, which denotes a short but fine selection and a warm and enjoyable ambiance. The website works with simple overlays on bright and elegant photos of the location and staff. The photos are particularly casual and crisp. They depict customers interacting with each other or helpful staff juxtaposed with descriptive photos of their dishes.

Overall, there is a confident, classic and pleasant personality broadcast from this site. If you have ever enjoyed the tavern, you would find that it is spot on.

Focus on experiences

Personality doesn’t always have to be extremely subtle. Sometimes an identity relies on heavier approaches to evoke feelings. The next example is the website for a Lake Tahoe Ski Resort. Of course, when you think of a ski resort, you will recall images of ice and cold temperatures. Those certainly aren’t inviting ideas. Most people enjoy snow by escaping from it; enjoying a hot cup of cocoa, being close to loved ones, being warm and cuddling, and creating memories in the process.

The designer of Alpine Meadows knew this and made some intelligent decisions to really push the personality of the resort to us.

To recall the warmth and escape from the cold, the site uses a plaid background which carries connotations of flannel, an extremely warm and durable fabric. The home rotator is set in a photograph frame to recall the process of memories being made. The top navigation uses a rugged and rough fabric to evoke the sportsman-like nature of the resort.

While you will love escaping from the cold, the designer also knew that people will vacation to do outdoor type activities like skiing and hiking – things you can’t do without some good padding and warmth. As a result of these decisions, you get an exciting and warm expectation of how you will be able to enjoy the Alpine Meadows resort.

Character or experience

You will notice that some businesses such as restaurants, bands, and hotels have an easier time building a powerful personality. This is because restaurants, bands, and hotels are inherently about the experience. While this is absolutely important, it is true that some business is more focused on delivering a product or service.A positive customer experience is secondary to the actual objectives of that business. In this way, it may be harder to translate the personality to the web for such companies.

However, this simply means that personality becomes more about the character of the people less about the experience of the service.

For companies like this, such as web, professional, or office related companies, personality becomes more about the people behind the company. The company culture and human side of the service is the most important way that customers will evaluate you. While it seems crazy, most users make choices based on emotion not logic.

Don’t believe it? Think of leading companies in different large industries. Companies like General Electric, Coke, or Starbucks to name a few. Are they necessarily the absolute best in the industry? Probably not, but odds are they offer the right balance of personality, culture, service, and positive experience.

This does not mean that your blog or company photos are the most important element. In fact, in some cases it may be totally inappropriate. The point is that your interests, humor, passion, and creativity should show through in every each piece of design, language, and page element.

Let’s look at an example.

In the above example, we look at Awesome which is development company that focuses on Javascript. Sounds straightforward, but if that were all that matters to this company then they wouldn’t have a cool looking retro robot on their homepage. The design is clear and attractive but the choices in color, language, type, and illustration speak much louder.

Elements such as the call to action “Fire when ready” and reference to browser testing as “Common Sense Test” are powerful.

While these are small anomalies in language, they communicate a human side. This shows a sense of humor and confidence in what they do. You may be thinking that humor doesn’t communicate confidence, but rather it says that the team is not serious or professional. However, taken in tandem with a clean layout, flawless execution of Javascript, clear actionable steps, and simple navigation, these elements combine to tell users about a team of experts who are confident and most likely great to work with.

Conclusion

Remember: personality is about emotion.

While we would love to believe that we make our decisions based on pure cold logic, the human mind simply doesn’t operate that way and we shouldn’t expect it to.

If it did, then everything would be white and gray. As designers, we have the unique ability to consider different concrete and emotional elements when building business solutions. This is our most powerful skill as designers. It enables us to communicate beyond simple functionality and usefulness to interact with people’s real decision making mechanisms.