7 Ways to Get a Cohesive Style on your Website Images and Graphics

The first time someone visits your website, it counts! This goes for your instagram feed, other social platforms and even emails you send. Having a cohesive style across your images is a sure way to build trust and make you look as professional as possible (even if you’re 10/10 for Zoom yoga pants).

There’s a lot that goes into your overall “branding”. Your brand can consist of messaging, colors, fonts, the images you use, the tone of your writing, a feel that someone has when they see it, what they say about it behind your back. 

ALL OF THIS IS BRANDING. 

Maybe you haven’t taken the time or money to heavily invest in full branding. Totally ok for now. 

If you’re like a lot of our 1:1 website clients, maybe you have all kinds of images you could use, but have a hard time figuring out which ones to use. 

But, that doesn’t mean you can’t still have a beautiful, cohesive looking website. 

Here are 7 important areas to consider as you choose photos to represent your brand across your website and all other platforms. 

1. Limit color choices

If your branding has multiple colors try using only 1-2 for the main colors on your website. Using too many colors on your website can make them seem inconsistent. Take a company like Walmart or Target, for example, their stuff seems consistent because you recognize the blue and the red. If they threw in a bunch of other colors all the time you’d maybe think you were on a different store site. 

Here are two examples that use 1-2 colors.

‍

‍

2. Try using a filter for photos

Photos edited with the same presets or same settings, even if they’re of drastically different things, will always feel more similar and cohesive. Photo filters can be used on desktop, laptop, mobile you name it. You can use paid apps like Lightroom and the Adobe suite, or free programs like VSCO to give your photos a filter.

‍

3. Take photos from the same photoshoot

This is especially helpful if you’re using stock photos or branding shoots from your own business. If you haven’t had your own professional photos taken, no worries, you can use stock photos. 

Take time to find photos that are from the same day, time, shoot, same environment, same lighting, etc. Photos taken all throughout the day outside will have a big difference in the way they look, but photos consistently taken in evening sunlight will blend well on a website.

‍

‍

4. Photo Undertones

Warm photos blend well with other warm photos. Cool with cool. 

The same goes for graphics. If you have warm photos with rich tones and then you try to use a bunch of graphics and patterns with blue and greys... you’ll feel off without even knowing exactly why. 

It just feels “off” when the undertones are all over the place. 

Not sure how to tell if the photos you want are “warm” “cool” or “moody” or some other tone? 

When you search for photos, especially from places like Unsplash, try searching or filtering by color. You’ll then be given a selection of photos that all have that same color or undertone to it.

‍

5. Graphics or photos from the same artist

If you’re using graphics from a source like Deposit photos  or Envato you’ll often be able to search by artist or find photos taken by the same person. Creative Market is another example of this. 

This is actually getting even easier from places like Unsplash as well. 

Once you find a photo you like, click the artist name and browse their collections to find others they’ve taken. Many artists take several at one time and will post them all into a collection. 

‍

6. Line weight & Style of icons

Icons can really help a website come to life. Finding them from the same artist/company is key here, but also searching by style is helpful. So indicating “phone icon lightweight” or “mail icon hand-drawn” is a good way to find icons even if they’re from different artists they will still have a similar feel. 

This is actually a really key thing that can “stand out” in a bad way, if mismatched, are the weights of things like icons.

‍

‍

7. Use 1 typeface with different weights

Too many fonts can slow down a website. Rather you use free or paid ones your website is having to call to Google or your web servers to “serve up” those fonts. Best to use as few as possible. 

Not only does using fewer (or one font) make the design simpler and load faster... you’re able to emphasize the important areas making them larger, bolder, or lighter depending on the use of the font on that part of your website. 

Consistent fonts go a long way in making your website look professional and not an amateur.

‍

‍

I’d love to end us on this quote from uxdesign.cc 

“We humans like consistency by default! Our physical bodies constantly strive for consistent balance, so we can be healthy. We need to feel that things are consistent to feel secure and safe. Consistency eliminates confusion! When the user feels confused the next step is to feel frustration."

Were these tips helpful? Let me know in a DM over on Instagram.