Improving Your Website’s User Interface using Visuals

By
Updated April 18, 2019
No Comments
Mark Teskey
Mark Teskey

Mark learned about composition and lighting through being a landscape photographer. By applying those skills to his commercial and cinematography projects, he creates imagery that is visually stunning and emotionally impactful.

Your website is important to the success of your business.

In fact, your website is ESSENTIAL to the success of your business.

This isn’t the first time we’ve talked about this, and it certainly won’t be the last.

Today, we’ll discuss a few ways you can improve your User Interface (UI). Let’s get started!

Header and Background Video

Header videos are one of the most effective ways to distinguish your website from a competitor’s. There is a reason we keep talking about header videos and their importance, and that’s because it works!

When someone first accesses your website, you need to hook them in immediately. A header image that starts playing as soon as a potential customer uses your site will do that.

video background website

You wouldn’t think that a cleaning company would be a trendsetter in the digital world, but Eagle Clean in the UK uses a clever background video on their website. Scrolling halfway down their homepage you’ll see a gloved hand appearing to wash your screen. Fun and engaging!

Scrolling Images

An image carousel that scrolls as the user explores your site creates a feeling of freshness and variety within your homepage. If you’re in real estate or have a number of different past projects or services you have provided, a gallery or carousel is a great way to give the user a taste of the range your business provides, as well as the consistency of your offering.

Website users love images. Better yet, they love high-quality images. And better still, they love original, high-quality images. It’s well worth your time to invest in them!

under armour website

Under Armour uses a scrolling header carousel to show off some of their latest shoes, clothing, and, and limited edition products.

Product Videos

Product videos will help your user interface a ton. Why? Because it adds another way for consumers to see what your product or service is all about without actually seeing it physically in person.

Think of it this way — some people refuse to buy clothes online because they want to try on the items before purchasing. While there are some products (like a home) or services (like financial advising) that require the consumer to actually be there to sign on the dotted line, giving them an opportunity to better understand what it is you do and the benefits you provide can help push them down the funnel.

asos website products video

ASOS, a clothing company based in London, not only provides great images of models wearing their clothes but videos as well. This is a great example of how giving a customer a better look at the product can help propel them to a conversion.

Large and Responsive Hero Images

A responsive hero image will require you to do two things. First, you have to go out and take a high-quality photo. Next, you have to make sure that your website is responsive — compatible with mobile, tablet, and desktop — so that no matter what device your consumer is using, the image still looks good.

The key to creating a good hero image is to make sure that it blends well with the rest of your website. So, if you’re site uses a color palette that features neutral colors, then make sure that your hero image has some of those same colors somewhere in there as well.

imac apple

For a textbook example of responsive hero images, look no further than Apple. Can you even tell which image is from the mobile version of their site and which is from the desktop? Well played Apple, well played.

Using the Right Color Combinations

This leads into our final tip, which is to use the right color combinations for the color palette on your website.

Imagine if you used brown, green, pink, and blue on your website color scheme. Yuck.

The right color combinations can be the difference between the user of your site getting the right vibes vs. the wrong vibes. For example, if you’re a luxury brand, then using navy or gold in your color palette is wise, as these colors are often associated with luxury.

Or, if you’re an environmentally-conscious company, then green is a good choice.

For more examples on which colors go with which feelings and emotions, check out this helpful infographic.

When in doubt, think about trying to make your color palette strong but limited.

Go ahead and check out any website — whether it’s your favorite clothing store, sports team, or an insurance provider — and look at the colors they chose. See if you can find out why they chose that specific color palette and if you think it was the right choice or not. This is a great exercise to walk through to start thinking about whether your website has the right colors or not.

Mark Teskey
Mark Teskey

Mark learned about composition and lighting through being a landscape photographer. By applying those skills to his commercial and cinematography projects, he creates imagery that is visually stunning and emotionally impactful.