Good design has the power to boost conversion rates of your website. Choosing the right tone, colors, fonts, and other visual elements all influence whether the customer decides to leave or stick around. The power of design can be seen in any grocery store. Whenever a consumer is choosing between two products, they will subconsciously examine the packaging. Brands that utilize attractive packaging will evoke a feeling of trust from the consumer. Even if two products are alike, a consumer will often choose the product with superior branding. When building a website, is important to realize that the customer will always be comparing your site to others, and this is where your design plays a vital role in establishing customer confidence. We will examine how tone, color, and fonts can amplify the look and feel of your site.
Set the right tone
Before dealing with colors, it is important to decide whether your site will be dark, neutral, or light. Light backgrounds are a popular choice for making the content stand out, and they are easy to manage. Most e-commerce websites are lighter because the products stand out and become the star of the show. Light sites are typically easier to manage because they don’t require special photography or design to make the content fit in. If subtlety is a goal, then a neutral color (or grayish) palette will work well. With stark white or pitch black backgrounds, a website can sometimes overwhelm the eye or be visually loud. If there is too much visual noise, then everything can shout for the site user’s attention. When the overall tone of a site is neutral, then splashes of bold color will carry a lot more visual weight and attract the customer’s attention. This allows you to guide your customer’s eye to important call to action links, such as a checkout button, or a promotional banner. If you prefer a darker site, then you need to make sure that your images and wording will work within this context. For example, your photographs may look best with a darker background, and your text should not be stark white. Choosing the right tone depends on your target audience, and will be the foundation to the branding of your site.
In order to understand the difference between dark, neutral, and light, checkout the following e-Commerce sites…
The Dark Side –
Tumi sells high-end luggage for business, travel, and every day. Their site exemplifies how a dark tone can work in an elegant and powerful way. With the use of gray text, bold imagery and a limited use of red, they guide the eye in a seamless manner from product to checkout. Although a majority of their site is dark, they still utilize a white background for their products, which tends to be a best-practice for e-commerce sites.
A Neutral Approach –
Apple exemplifies a cutting edge and minimalistic site that uses an overall light color palette. Their site is easy to navigate, and has been stripped of unnecessary visual elements. The website does not get in the way of the products, and the overall design becomes a pleasant afterthought. This lighter approach works best with strong content, and is typically user-friendly.
Establish a color palette that makes sense
Choosing the right colors involves a deeper understanding of color theory, which is the study of how pure colors relate to each other and the effect of their combinations. We will go over a few of the most recognized color relationships below…
• Monochromatic – Using one hue (pure color) and varying the saturation (intensity of the color) or brightness. This palette provides a very cohesive look, and tends to work well.
• Complementary – Using two hues that are directly opposite of each other on the color wheel. The most common examples of complementary colors are: orange & blue, green & red, along with yellow & purple. These colors will provide excellent contrast to allow visual elements to pop and draw attention.
• Neutral – Using muted colors can provide an interesting look and prevent visual noise. When colors become too saturated or bold, then can distract the customer from important information.
• Accented – The use of muted colors, with one color high in saturation. Using one accent color (such as lime green) for links and call to action buttons will help to guide the customer’s eye. By eliminating superfluous colors, the site becomes more focused, and the user knows where to click next.
• Warm – These colors range from red to yellow, and sometimes a shade of purple. dark web links Think about the color of fire. By using this palette, the site can certainly provide a warm feeling. Warmer colors tend to jump off the screen.
• Cool – Colors ranging from purple to green are often referred to as cool. Cooler colors evoke a very pleasant mood, and tend to recede on the screen.
Aside from theory, it is also important to consider your target market. Pay attention to popular websites that are geared towards your target audience. What colors do they all have in common? By examining successful sites, you can determine how to shape your color palette.
Here are a few tools to help you choose a color palette
• Kuler adobe
Choose fonts the smart way
The worst way to choose a font is purely based on whether it looks cool or cute. When a customer has to squint to read a font, they will not be thinking about how neat it looks.
Here are a few factors to consider before selecting a font…
Legibility: Make sure the font is legible at a small scale, such as 12 pixels. Also, make sure the font looks good as a header or paragraph text. Some fonts are meant for paragraphs, while others are meant for headlines.
Availability: Not everyone has a font installed on their computer. Although there are ways to embed a font in your website, it is best to stick with common web fonts, such as Arial, Georgia, Verdana, or Trebuchet MS. Other common fonts are: Andale Mono, Courier New, and Times New Roman.
Style: If Arial sounds boring to you, I don’t blame you. There are many new web-friendly fonts being published today, and Google Web Fonts is a great way to find unique fonts that look good in most browsers.