How to make your blog images stand out & reflect your identity

This article is a bit tricky, yet is going to be super useful to anyone with a blog. Or anyone using images in their communication, conference slides, etc. It will help you if you ever find yourself facing stuff like this: “Ugh, I am so tired of seeing the same boring stock photos on every blog…but then…every visual I pick is also the same exact type of thing that I am tired of seeing. Maybe, if I take this and just move on pixel to the left, people won’t be able to tell I stole the design, branding, visual style?”. Yes, we can tell.

From photos, to illustrations, mosaics and abstract patterns: how could you make your blog headers, images and other visual content part of your brand identity? Here’s some real world advice from an experienced designer on how to be your best visual self online, with actual examples.

Rethinking the classic “let’s use a stock photo”

Let’s start with the basics. You could use images, as in “a stock photos” to illustrate your articles. I’m talking about the “blog header image” here. But this also applies if you want images inside the article. Usually as decoration or “breathing” areas.

Almost all the blogs (mine included) use that technique. You can use:

  • use photos on the topic of the article: simple, efficient
  • mix the image(s) with some text overlay something like Webdesigner Trends.

You can create those overlays in design tools. If you do so and have text in your images, don’t forget about alternative attributes on the image if the title is not in the HTML elsewhere. Because, accessibility. You can also achieve the overlays with pure CSS. There’s nice techniques in this article “How to effectively use transparent backgrounds in graphic design” if you want to start playing with image overlays and transparency. Again, be careful about accessibility though!! You need your text to have enough contrast ratio to read it on top of images.

mosaic of different stock photo galleries

Some places to find nice images

Finding the right image is always tricky. How And at some point, everyone ends up with the same boring stock photos. So here are a few place to find nice images, that hopefully go beyond what you see everywhere.

Spicing up boring stock photos

Visual examples of the technics described above

Okay you might say “yes but if everyone is using images, how might I spice things up and make those unique”.

There’s a few things you could do:

Some tools to spice up your photos

Screenshot of the following tools

Image editing can be annoying so here are some tools to help:

  • Dither images could be your thing, there’s plenty of styles to explorer with this tool
  • Bring back duotones images back to something trendy, I dare you
  • With SVG color Matrix Mixer you can generator some SVG color matrix filters on top of images. This way, you don’t need design tools to color images but can apply those on your websites.
  • SVG Gradient Map Filter: another tool to build some duotone on top of an image using SVG
  • If you are into gradients you could try this or this and add them in CSS with some blend modes on top of your images. This means you don’t need to edit every single image, let the browser do the job.

I do most of my editing in Sketch (Photoshop if I really want something fancy) so I don’t have that many online tools. Feel free to reach out by email or twitter if you have some nice gems to share here.

Bringing in some characters and illustrations

Screenshots of the following illustrations

Illustrations are super trendy. For real. They have been for a while now. They offer more flexibility than stock photos because your imagination is the limit. And you can go super abstract.

Here are some cool examples if you are looking for “how do people use illustrations” inspiration:

And the list goes on and on.

Getting the most out of illustrations for your blog

Here’s a few illustrations tips to bring more consistency to your blog and brand:

  • SVG for illustrations is awesome. You can embed SVG illustrations directly on websites and it would be lighter than PNGs. The annoying part is that some CMSs like WordPress won’t let you do so by default (but there’s tricks). But if you have a custom blog, it’s worth a shot. You can also embed JavaScript so you animate those. And you can mix vector and JPG/PNG images in SVG just like Khan Academy homepage. SVG is also an open door to awesome interactive infographics.
  • Illustration authors usually have a specific “style” (or a few styles). If you need multiple illustrations, try to use illustrations from the same “pack”. This will again help bring consistency. My trick: check the profile of the authors on the different platforms and cherry pick the illustrations that go well together.
  • Illustrations usually come in vector format like SVG, AI (for illustrator) or more versatil EPS. You can open those with vector tools (like Inkscape which is free, but also vectr.com in the browser or even figma). You can change the colors of the illustrations to have them match your brand identity. Some of the galleries in the next section even come with built in tools to recolor those).
  • If you want something specific, hire a professional illustrator (reach out in email if you need some names). Usually illustrators take commission and can create you a set of different illustrations on some themes you can reuse

Illustrator file opened with the "recolor artwork" example with yellow and purple colors

So, let’s talk about my secret weapon for illustrations. I told you in the introduction, I’m giving you all the secrets so that you can steal like an artist (also yes, check that book). For all my personal projects for example I use the streamline icons and illustrations. Here’s my pro tip: I use Illustrator’s “recolor artwork” tool to quickly recolor them. I can also try out different options and have them match my yellow and purple brand identity. Here’s a video to teach you how to. Another Illustrator tip: if you want to manually replace colors, you could use select > same  > color and fill to select everything that has the same color.

Of course you don’t have to go one style or another. Mixing strategies based on different content types works nicely. For example uxmag.com has a mix of sometimes illustrations. So does Think Company, but if you look at their illustrations, you’ll see consistency in the styles.

Screenshots of illustration galleries

Cool places to find cool illustrations

  • Stubborn.fun is a character generator that also lets you create scenes
  • Blush.design is a figma and sketch plugin to create storytelling illustrations
  • Weareskribbl.com is a collection of free hand drawn illustrations in a “black and white line style”
  • Drawkit.io is a collection of nice illustrations updated weekly
  • Undraw.co became one of the big classics when it comes to free minimal illustrations
  • Freeillustrations.xyz offers a lot of illustrations kits in different styles
  • getillustrations.com is another nice place to find free and non free illustrations
  • icon8 also has nice illustrations. Bonus point, you can recolor those in their tool directly. Worth a try.
  • Blackillustrations.com are beautiful illustrations of Black people for your next digital project
  • Mixkit.co has a lot of free resources (videos, sound) and has a section dedicated to “free stock art”.
  • Biodiversity Heritage Library’s albums offer images from old books, plants and animals that I love so much. I admit it’s a specific style. But it can work.
  • Another really specific style of images can be found on oldbookillustrations.com. I am not sure if this goes under illustrations or images, it’s definitely a really specific style, but I kind of like it. You could have a whole series on animals, people, etc. The cool part: since it’s mostly black and white you can have a lot of fun with filters and recoloring those. This awesome essay on newsletter uses that style, and it works!

How to “find” the right images and concepts.

Time for another secret trick: when I am looking for images (or illustrations) to illustrate a concept, I start with a Google image search. This gives me a first “trend” of what other humans expect to “see” around this topic. Another thing I love with the Google image search results is the suggestions. This helps me understand taxonomies and what humans, again, expect around this concept. This is how my SEO friend Myriam explains it:

“ Google tries here to make some human/machine translation of a concept into distinct entities, aka, build taxonomies, like, hashtags”.

And this is gold to help you find images. A lot of “image search engines” like unsplash do this trick as well and help you expand your search.

Google search results with some taxonomy propositions, same for unsplash with some taxonomy tags

I also like to take a look at what kind of images come up in The Noun Project. Again, the idea is to understand human mental models to illustrate concepts. Last but no least, you could take a look at “Same Energy”, a visual search engine.

Mandatory copyright and license warning

TLDNR: check the image/illustration license. If there’s no license, don’t re-use unless you asked for permission.

I can’t write an article about images and illustrations without a warning about copyright. I’m honestly quite tired of the design community, but also of other communities giving zero toughs about copyright. So let me put this here: just because someone put an image or an illustration on a blog, it doesn’t mean you can reuse it. Especially on commercial content. And yes, I’m pointing at you, agencies who use content from my blog without my permission. I see you 🙂  

So, before using ANY image, photo, illustration: check the copyright rules. And, follow those. By default, if there’s no mention or copyright, the image belongs to the blog owner (unless they themselves stole it from somewhere). So, by default, unless it’s written otherwise, you can’t use an image from someone else.

The good news is that today, there’s a lot of content under creative common licenses and open licenses. You can use most of that content, even for commercial use (unless the license says otherwise). But you usually still need to credit the author somewhere.

Mosaic, grids and collages of images and photos

I’m not going to pretend otherwise: mozaic and collages might be THE technic I use the most for my blog images. Mosaics work really nicely if, like me, you publish posts that are resources or lists of content on different topics. I did (and still do) a lot of tests and explore with the format a lot. Here are a few examples from my own experiments over the last, like, 10 years of blogging. I told you that today, I’m showing you all the tricks in my book 😉

A mozaic of mozaics examples

I’m not sure there’s generators or tools for collages. I do them in Sketch. But still, there’s a few tips and places you could use for inspiration:

  • You could explore with zero gutter collages (like mine). Or explore some styles with more spacing and gutter like Frontend Weekly does. If you go for gutters, which is, the most annoying thing to do, you need to make sure you have proper and consistent spacing everywhere. This is why I find this annoying to do. My trick here: cut the images if needed.
  • Angle mosaics are trendy, also it works with gutters.
  • You could also use some grids of logos like here.
  • And here are even more angled mosaics.
  • Like images, you can bring consistency by applying a whole color overlay if you want. Or have them all black and white. Codrops is, again, an awesome example of this. Each of their roundups has a color filter which brings consistency to the whole mosaic.
  • Have grid, then, break the grid and explore with diagonals and outside the box things. This is an old article from 2011 I still like on the topic of multiple image layout
  • Find inspiration outside of the web: architecture and print design, magazine layouts are a good start here for that kind of ideas.

Abstract art and backgrounds + some text.

Abstract background examples

It’s sometimes hard and long to find images, photos and illustrations. So, going abstract could also be an easy road to go. There’s a lot of generators in the next sections. Going abstract background + some simple text offers a LOT of possibilities while still keeping consistency around all your articles and posts and your brand. Just hit refresh on George’s generator here to know what I mean. Endless possibilities with little investment. Perfect if you don’t want to spend too much time but still want something nice.

For your inspiration, here’s a few examples of that abstract pattern trend.

Screenshots of pattern tools

Abstract SVG and patterns generators

There’s plenty of places to find some nice abstract patterns. Most of them generate SVG, because it’s THE format that is perfect for that.

No image, nice layout, beautiful typography, awesome colors

Screenshots of the examples mentioned above

Last but not least, you could also simply not have any header image. Or any decoration images except for when they help explain something. Those kinds of blogs usually rely on a nice layout, elegant typography, and a great use of colors, gradients, borders. Note that you still might need an image when sharing on social media though.

Here are a few examples I like:

  • Tatiana Mac has a colorful blog, typography choices are awesome, no image needed.
  • Hugo Kitty Giraudel makes a nice use of gradient, again, no image needed
  • Sarah L. Fossheim has brings some awesome colors and borders
  • Gift Egwuenu has that awesome pink gradient border and the nicest title font face
  • Stephanie Stimac has those really nice purple links list
  • Ethan Marcotte’s blog is another beautiful of awesome typography, delicious subtle backgrounds, nothing more is needed here.
  • Josh Comeau is also a nice example here if you are looking for simple effective typography
  • Another great one, but I’m biased because I love those Gs is Andy Bell’s Piccalil.li

So, that’s it. I hope I gave you nice ideas for different visual content and images for you blog posts, but also conference talks. Shoot me an email if you have more ideas or tools to share. Also big thanks to Myriam for helping me with that article 🙂