Quality is often found in the small details. This is especially true for your brand’s website. The aesthetics (also referred to cosmetics) of a website refer to simple—though still impactful—design additions. Simply put, aesthetics give your site personality and movement.
This might include brand elements, such as colors, icons, animations, and typography. Each visual element works together to showcase who you are, what you do, and how your products/services help others. And the more recognizable your site is towards your brand, the better.
Not a fan of reading interviews? No worries! Listen to Episode 3 of Clokendagger's podcast, Beneath the Brand, for tips on how to choose the right cosmetics for your website.
Q:What are examples of website cosmetics?
Josh: When we’re dealing with the user interface and user experience of a website, the cosmetics refer to the little design details that help separate your site from a standard website template.
This might include:
- Adding hover states to buttons
- Using horizontal rules to break up content
- Implementing scroll animation to sections
- Featuring brand related icons, colors, and graphics
These are all website cosmetics that help support the overall aesthetic of the site.
Q: Why are they important and something you shouldn’t overlook?
Josh: Website cosmetics are important for a few reasons:
First, they help separate your site from others by customizing your template. Little details go a long way and show that you care about how your site looks to potential customers. Second, they engage the user and create a pleasant experience when navigating your pages. Third, they help tell the story of your brand, including your services, target audience, and experience within the industry.
Q: How do cosmetics relate to branding?
Josh: Brand elements, like colors, fonts, or typography, are a great way to relate your website’s cosmetics to your brand’s persona. As you noted, you want your site to look and feel like it represents who you are, what you do, and how your products/services help others.
Q: What are good vs. bad cosmetics (examples)?
Josh: Since cosmetics relate to the website user interface, I won’t talk about the obvious design choices that should be made. These would include using your primary brand color as an accent color throughout the site. Instead, let’s focus on the subtle details that show the level of creativity from a web designer.
Breaking Up Sections: One good cosmetic is using subtle design details to break up sections of content. Think of a different background color or horizontal rule. This gives the site contrast and allows you to highlight specific parts of a webpage.
Scroll Animation: Another good cosmetic idea would be adding a scroll animation to sections of your site. This would mean that as the user scrolls down the page, content gradually fades into view. It gives your site movement and separates it from sites that are static.
As for bad cosmetics, this may be a personal preference, but I’m starting to see a lot of sites with photos and backgrounds cropped diagonally. To me, the diagonal cosmetic would be fine for a company that uses this design treatment in a logo or as part of the brand, but outside of that, it’s a bit tacky.
Another bad cosmetic is the overuse of bright or high-contrast background colors because they make your site look blocky and hinder the user experience. Instead, I’d recommend using light or low contrast colors, such as gray and off-white. High contrast colors, such as black, are okay if you're highlighting a specific section, but don’t overuse them on a single page.
Q: How do you know your site’s cosmetics are up to par? In other words, what are some questions I should ask about my site’s cosmetics to know whether I’m on (or off) track!?
Josh: The first question you should ask yourself is does your website look neat? I know that sounds cliche, but if your answer is not an immediate yes, then it could probably use some cosmetics.
Next, consider whether design elements of your brand are incorporated into the site, such as colors, typography, icons, or patterns.
Finally, ask yourself: does my site have some movement to it or is it static?
Q: What is your advice to small business owners on cosmetics?
Josh: My advice to designers is to be pixel pushers and pay attention to detail. I know many in the industry will frown upon this because it takes time and energy away from getting more clients. But I’m one for quality, not quantity.
Q: Any last thoughts?
Josh: Think of your website cosmetics as your wardrobe. If you wear gym shorts and a t-shirt, your appearance reflects that you're going to work out.
If you’re dressed to the nines with a suit and tie, your appearance reflects that you’re going to an important event. In other words, make sure your website and cosmetics reflect how you want your brand to be perceived to others.