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
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.
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.
Let’s start with the classic: unsplash.com. One thing I like about unsplash is the unporn series: a nice place to find pictures if you need to write about nsfw topics (like sexual health).
Another idea if you can’t find images linked to your theme or topic, is to go full abstract. Repeating patterns and geometric images work nicely, and there’s a lot on unsplash
Nappy.co provides, I quote, “beautiful photos of Black and Brown people”, for free.
Diversity in skin tones and on the gender spectrum is important, but so is diversity in different body types, abled and not. Disabled And Here is a disability-led stock image and interview series celebrating disabled Black, Indigenous, people of color (BIPOC).
This trick also works with gradients. CSS Tricks mixes a lot of different image techniques. But every image has this orange purple blue gradient on top of them to give them some consistency and make it look nice on the homepage
Or you could do like my friend Myriam: she once decided she would give a talk with only pink images. And it was awesome and it worked. The images had little to nothing to do with the talk. But, it worked. Because, there was consistency and a theme.
Some tools to spice up your photos
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
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
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:
Viget is a good example of simplicity for the usage of illustrations. Each article header is one rounded illustration with a nice colorful background that depends on the category.
Maggie Appleton uses awesome hand drawn illustrations as images to introduce her essays
Another trick with images is to have images (or illustrations) on a specific theme, like Codrops Collective does.
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:
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
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.
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
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.
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 😉
5 years ago I used to have only 2 images in the collages
Did someone say colorful collage mosaic. Here I explored with even more images, since it’s book covers, and ordered them by color.
To have something more dynamic, I’m also testing a -12deg angle on the mosaics (why 12deg? Because I like it like that). It started with my conference transcripts where I use mosaics of the slides. But I’m also exploring this format for the weekly links now. I like it because it works with my design and breaks the straight horizontal lines a little bit.
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 consistentspacing everywhere. This is why I find this annoying to do. My trick here: cut the images if needed.
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.
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.
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.
No image, nice layout, beautiful typography, awesome colors
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.
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 🙂