How to make your website images stand out & reflect your identity
Let’s start with the basics. You could use images, as in “stock photos” to illustrate your articles. I’m talking about the “website header image” here. But this also applies if you want images inside the article. Usually as reference or “breathing” areas.
From photos to illustrations, mosaics, and abstract patterns: how could you make your blog headers, images, and other visual content parts of your brand identity? Here’s some real-world advice from an experienced designer on how to be your best visual self online.
1.Mix the image(s) with some text overlay
2.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. You can also achieve the overlays with pure CSS.
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 places to find nice images, that hopefully go beyond what you see everywhere.
1.Let’s start with the classic: unsplash.com.
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 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).
- Life is messy, unfiltered. Polished stock photos are nice, yet, so boring. If you are tired of boring perfection, this is Stocksy.com’s promise: Stock Photos and Footage with no filler
Spicing up boring stock photos
Okay, you might say “yes but if everyone is using images, how might I spice things up and make those unique”.
There are a few things you could do:
1.Have some colored overlay on top of your images
2.You could also decide you want them all to be black and white
3.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
Some tools to spice up your photos
Image editing can be annoying so here are some tools to help:
1.Bring 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, you don’t need design tools to color images but can apply those to your websites.
- If you are into gradients you could 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.
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.
Cool places to find cool illustrations:
1.Freeillustrations.xyz offers a lot of illustrations kits in different styles
- Weareskribbl.com is a collection of free hand-drawn illustrations in a “black and white line style”
3.icon8 also has nice illustrations. Bonus point, you can recolor those in their tool directly. It worth a try.
4.Mixkit.co has a lot of free resources (videos, sound) and has a section dedicated to “free stock art”.
So, that’s it. I hope I gave you nice ideas for different visual content and images for your blog posts, but also conference talks.
Subscribe for newsletter
* You will receive the latest news and updates on your favorite celebrities!
9 Iconography rules to follow in UI design
Iconography is the visual images and symbols used in a work of art or the study or interpretation of these….
3 Web Design Mistakes That Hurt SEO and How to Avoid Them
Picture this: You have a stunning web design, attractive images, and the perfect theme that suits your business and consumers….
3 Psychological UX Design Principle to enhance User experience
Follow these three psychological concepts to aid you in improving your designs’ usability, occurring error, attractiveness, and effectiveness. Have you…