SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Personality in Web Design: Atmosphere, Character And Brand Feel

November 3, 2010 by Shawn Borsky 12 Comments

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.

Apple Developer Center

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.

Symbian Developer

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.

Image

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.

Gramercy Tavern

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.

Alpine Meadows

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.

Awesome JS

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.

Filed Under: Article, Business, Design

Comments

  1. James Hind says

    November 4, 2010 at 4:04 am

    I think you have to be careful you don’t make it too personal, it can alienate some people.

    I do think you have to be careful not to overdo it though, especially in certain industries.

    I run a site that has just launched to help new car buyers (www.carbuzz.co.uk) and we had fierce discussions over how fun and playful we thought the site/brand should be. After all, buying a car can be quite a serious business.

    In the end, gladly the more playful designs won out. Though we have had some criticism for looking too ‘cartoony’ from some, but then lots of people said they love the design!

    I also think that the shades of colours used can impact how usable people perceive the site, bright colours seems to draw people into using a site (in my v.limited experience).

    Of course the copy also ties in with the personality, it has to match the look and feel of the site.

    Good article!

    James

  2. Hitesh Mehta says

    November 4, 2010 at 4:44 am

    A very well written and thought provoking article.

    @HiteshMehta

  3. benedetta.s says

    November 4, 2010 at 10:13 am

    Thank you very much for this article. It’s really interesting!

  4. Adrian Grossett says

    November 5, 2010 at 4:54 am

    Great article very informative – I also believe that interaction with clients as a designer is paramount – in order get a feel for what the clients wants – at least in the initial development – before providing the finish website. As James says making it to personal can be a mistake a good way to avoid this to suggest current websites that have variations in designs (or simply ask them what websites they have seen on the internet) – and let them advise you which design/elements of the websites – they would like on their website – thus saving time and assisting with the construction of the initial home page mock up.

  5. Eva says

    November 5, 2010 at 5:02 am

    This article was the best lunch break entertainment I had in a while, thanks a lot Shawn :D

    Cheers Eva
    @friendsofdesign

  6. Edwin says

    November 6, 2010 at 12:18 pm

    Great article. One comment on the subtle design and Gramercy Tavern in New York. As clean as the design is, the photography really makes it all mesh together. Good photography compliments all websites and it is evident in this example, because without good imagery, the site would be pretty dull.

  7. Bryan says

    November 9, 2010 at 8:40 am

    That was a great long read! Thanks for the information. Will be a great help once I start doing my own web design.

  8. A Fresh Web Design says

    November 11, 2010 at 3:46 pm

    Great article! It’s really important to think about what kind of personality you want your site to convey and what sort of audience you want to attract. A friend of mine recently redid his site from a bright colorful design to a darker, sleeker design hoping to attract more corporate clients.

  9. Brett Widmann says

    November 14, 2010 at 7:28 pm

    All valid and good points to think about, especially the atmosphere and texture. Great article!

  10. Markthousands says

    March 1, 2011 at 5:46 pm

    Good stuff!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022