Better Websites With Color And Typography
By Mike Hauben, Editor, JewelryEcomm.com
Have you jumped onto the trend of redesigning the aesthetics of your website to appeal to millenials? The grey, muted colors that look like you’re selling Abercrombie jeans? Congrats. Your website now looks like everyone else’s.
There are a few ways to really improve the visual design of your website without messing up the integrity or functionality of your site. Why are so many jewelers making such boring, cookie cutter websites?
The two biggest missteps I see in jewelry websites is not using color to brand the page, or making poor typography choices. In this article, I’ll share my views on each and explain how to use these two elements to make your site a bit more polished.
I understand the trend right now is to make your website as boring and bland as possible to try to appeal to millenials (which is silly – who decided that was the “millenial” look?). But just because a couple big brands start going towards that trend, doesn’t mean you should.
Contrast not only plays a big role in the overall design and look of your site, but it seriously effects readability as well.
To put it simply, look at this:
The second graphic – with the darker green background, bolder headline font, and darker body font – stands out much more than the first graphic’s color choices.
Websites that have higher contrasts in colors are going to be easier to read and navigate. They’re also going to “pop” more and leave a lasting impression.
If you really want to take a deeper dive into this, check out Brent Jackson’s tool called Colorable.
This next tip is purely a personal opinion, but understanding how I choose colors for sites may be helpful for you.
At the top of this jewelryecomm.com site, you’ll notice I use a very dark blue (almost black on a lot of monitors) with brighter blues and yellows in the header. The reason I use colored headers in all the sites I make is because, firstly, I want to brand the website with the business’ colors. But secondly, I make the header colored because the body – the main portion of the site that will show your information, products, etc – is probably going to have a white background. So as a visitor scrolls, I want them to still always see that colored header so the whole page isn’t just a big block of white. Typically, I’ll use the brand’s primary color in the navigation, and then incorporate that color somehow in a nice big “hero” image, which is a large, welcoming graphic on the homepage to show your visitors what you’re all about. Like this site I designed for Lenoci Fragrance Group:
You can also see the same type of color choices in the menu and header in the old Centurion website
This is all purely personal preference. But this is the best way to do it usually, I think. It looks nice and improves site usability.
There are two conversation topics I frequently harass my wonderful Fiance with. First, is comics. I can ramble about superheroes for 20 minutes before I realize Laura is chuckling at me. The second topic I often ramble about is typography.
(Yes, I will have actual conversations about fonts. I’m a designer. Don’t judge.)
I probably put two full days into deciding fonts for a website. It’s so easy to overlook, but your font choices are an enormous design component throughout the entire site – they’re everywhere! Choosing the right fonts can make a site look completely different.
To show you this example, I just quickly grabbed a template website and changed the font.
The font change really makes the site feel a bit different.
As a rule of thumb, I usually like to keep the main body font of the site something very clear and readable. I’m a little more creative with the headers and title fonts.
It’s best to use one of Google’s fonts. They have a huge array of fonts to choose from that work properly on all devices, and they can usually be used on any website.
To browse Google’s fonts, check out fonts.google.com.
I hope these little design tips prove to make a big difference!