Reflecting Your Brand Values in Your Website Design

Andrea Ferguson

Andrea Ferguson

President at AndiSites Inc.
Andi is founder and President of AndiSites Inc. She writes about website design and development, best practices, and random stuff her busy brain thinks would be useful.
Andrea Ferguson

Defining your brand values is crucial to the success of your business. Knowing what your company stands for aligns and strengthens your team. Defining your personality (e.g., caring, family-friendly, professional, exclusive, etc.) is also an important part of humanizing you to your customers and clients; it lets them know what to expect when they work with you.

Written content often expresses brand values, and websites typically include carefully-chosen words and phrases on their home page, or “About” page, or a “Mission & Vision” page. But it shouldn’t stop there. Reflecting your brand values in your website design communicates in effective ways that don’t rely on written text.

Examples of Reflecting Brand Values in Website Design

Following are two examples of how website design elements reflect common but different brand values:  Friendly (warm, caring, down-to-earth) vs. Elite (exclusive, high-end, premium).

Friendly

Healthy Aging NC partners with nonprofit organizations, government, and businesses to provide innovative community programs and services for North Carolina older adults and adults with disability. Healthy Aging NC’s brand values include trustworthiness, warmth, and usefulness. Their award-winning website (designed and developed by AndiSites) reflects these values through welcoming design elements and easy-to-find, easy-to-use information.

hanc

  • Color:  Bright, cheerful, solid color palette
  • Typography:  Rounded, sans serif font; larger type size
  • Design Elements:  Curves; rounded corners; minimal use of straight lines
  • Navigation & Calls to Action:  Simple, clearly-named menu labels; traditional functionality (single level plus one dropdown); large, bright buttons
  • User Experience:  Fast load time; obvious links; clear user pathways. Users can register for space in workshops directly on the site (no need to wait for confirmation).

Elite

Villa Feltrinelli is a grand hotel overlooking Lake Garda in Italy. With rooms starting at $1,300 night (in low season), the property caters to a select group of customers. Although the website has little text, the hotel’s brand values are apparent–luxury, privacy, and exclusivity. The website (not designed or developed by AndiSites) reflects these values through an intentionally limited design and work-for-it navigation–reinforcing that the property isn’t open to just anybody.

villa

  • Color:  Muted, desaturated color palette
  • Typography:  Sharp, serif font, including italics; smaller type size
  • Design Elements:  Thick lines; sharp corners; minimal use of curves
  • Navigation:  Hidden menus (must click on “hamburger” icon in upper-left or hover over small, thin marks along right edge); icons for navigation instead of text (e.g., bell icon in upper-right links to Reservations page).
  • User Experience:  Slow-loading pages, each with loading animation and a percentage-progress icon; user must try different actions (click, hover, scroll, etc.) to navigate. User cannot make room reservations directly on the site—they must “request space only,” and wait for confirmation.

Your website is often the first way that potential customers get to know you. Be sure it properly reflects your brand values, in text and in design. Too close to it to know? Contact us. We’re happy to take a look with fresh eyes.