Stuff & Nonsense product and website design

Inspiration and insights #2 — Stop using generic stock images and more

From the newsletter: Sue and I decided to scrap our planned long weekend in Yorkshire and instead drive to Germany to spend time with Alex who moved here last year. We swapped Yorkshire tea for German beer and drove to Mainz which coincidentally has the Gutenberg printing museum. It’s well worth a visit if you’re ever in this part of the Rhineland.

Also, this week I updated my website to include information about the design coaching and mentoring I’d like to do for in-house design teams, freelancers, and solo designers. My role as a coach is to listen to and discuss your problems, talk about ideas for solving them, and offer feedback. I’ll share my 25 years experience and I provide support for your business, career, and work. As this is a new venture for me, I’m offering newsletter subscribers 25% off the first three months. Here’s more information about design coaching and mentoring.

Stand out designs

Stop using generic stock images

Stock photographs, you’ve seen them, I’ve seen them, and unless they’ve spent the past thirty years at His Majesty’s pleasure, everybody else has seen them too. Women smiling while they eat salads, smiling families without a care in the world, and gender and ethnically diverse people smiling while shaking hands, the Web is filled with stock photographs.

The Web is filled with generic stock photography.

Although I’ve seen dozens of photographs of them, I’ve never met anyone who smiles when faced with a plate of salad leaves. Salad smilers are a cliché, just like customer service agents with perfect teeth who enjoy their job; they don’t exist.

I get it: stock photography is convenient, and unless you shop at one of the most exclusive outlets, it’s relatively inexpensive, too, compared to hiring a professional photographer. You might be able to avoid the obvious clichés, but stock photographs still lack authenticity, and that’s a big problem when you want your product or website to stand out. Why does authenticity matter? Well, in the same way how you write communicates something about your brand, so does your choice of images. Not all pictures—as the old saying goes–“speak a thousand words,” and if they do, how can you be sure they’re the words you want someone to hear?

Not all pictures speak a thousand words.

People are generally bright and can spot a phoney tone of voice when they hear it. Even though they probably haven’t met a customer service agent in person, they’ll know they don’t beam dazzling smiles when taking calls. When they see false photographs, people will sense you’re attempting to pull the wool over their eyes. They’ll wonder if you’re happy to be dishonest about the people who answer your phones; how can you be trusted to tell the truth about your products and services? Even if the people who actually answer your phones aren’t especially photogenic, if they’re bots and don’t exist at all, if your business uses a call-handling service, or if your office isn’t tidy enough for a photo shoot, you should still avoid stock photography clichés.

Never use a stock photograph as filler

It’s tempting to think that small businesses or low-budget clients are the market for generic stock photography, but you’ll often find them used by blue-chip companies and clients with millions of Pounds in their marketing budgets. If there’s no alternative to stock photography, avoid a library’s “most downloaded” or “popular” pages, and after choosing a picture, use a reverse image search to see where else it’s been used. Always select a photograph that illustrates your story and has some connection to a brand; never use one as filler.

What can you use other than stock photography when you’re tasked with filling the banner on a customer service contact page? Illustrations are seen less frequently, so they look more unique. You can choose a style which compliments a brand identity. There are so many styles you should have no trouble finding one that matches the brand. Illustrations are also more authentic because people will know that you’re illustrating a concept and not representing a real person. These all make illustrations terrific alternatives to stock photography.

Avoid typical clichés

Then, there’rs the option of creating graphical typography and using it instead of stock photography or illustrations, which can convey meaning with more nuance while still making strong visual statements. That way, you’rll also avoid literal interpretations and typical clichés altogether.

Graphical typography makes a strong visual statement.

Bespoke photography and illustrations, specially commissioned to illustrate specific content and match a brand’s personality, can help it stand out from competitors who rely on stock images, but not every budget allows for them. AI image generators, including Midjourney, have improved dramatically, and their results are now so good they can replace stock photographs for many applications. Libraries like Shutterstock have already recognised the danger to their businesses posed by AI-generated images and have launched their own image generators to compete.

Illustrations are less common, so they look more unique.

But, just as using frameworks doesn’t automatically generate generic layouts, using stock libraries or even AI-generated images doesn’t mean a product or website design needs to look the same as countless others. The problem stems not from what a library’s algorithm suggests but from a lack of imagination in illustrating a concept.

“Customer service” needn’t mean a cheerful call centre worker and should mean something different to every type of business. Customer service means “an act of helpful activity,” so you need to know what that phrase means to a brand before illustrating it. Does it mean asking questions? What about listening? How about fixing things? Knowing the answer will enable you to think of relevant images and avoid those all-too-common clichés.

Does an image justify the bandwidth?

But the most important question you should always ask is whether there’s any need for a picture. Just because one page has a banner image doesn’t mean they all have to. Pages frequently follow this pattern because products and websites are often template-driven, not because an image contributes anything to someone’s understanding of what a brand is trying to tell them. So, if an image conveys no valuable information or doesn’t convey a meaningful message, does it justify the bandwidth needed to download it?

Design Chatter: Friendly feedback

Design Chatter is my weekly one-hour Zoom call where a small group of no more than 20 designers can show their work in progress and talk about design challenges. It’s a space to bounce ideas off other designers, talk about design problems and hear feedback on how to solve them.

The first meetup went well and I hope everyone who joined in got as much from the time as I did. The next Design Chatter is on 15th May at 3pm UK time and I’ll hope you’ll join in.

Book of the month

David King: Designer, Activist, Visual Historian

I grew up in the ’70s and ’80s, surrounded by the turmoil of British politics. I supported the Anti-Nazi League, the Campaign for Nuclear Disarmament, and the Anti-Apartheid Movement. I saw David King’s work everywhere, even though I didn’t know his name. As well as building his own incredible catalogue of work, King built one of the largest collections of Soviet-era designs—with over 250,000 items—which is now owned by Tate gallery.

This is an Amazon affiliate link, so I earn a tiny amount from your purchase.

Around the web

Virtual Stan​

Back in 2005, Rob Weychert turned his (and our) pal Jason Santa Maria into a talking head of Jason’s alter-ego, Virtual Stan. Stan had a backstory plus a robot pal called Zorthron. Rob developed Virtual Stan with Flash, so when that faded away, so did Stan. Thanks to a Flash Player emulator, you can enjoy Virtual Stan as we did way back when.

​CSS Specisithity​

Oddly, a post in my ancient archives about CSS specificity had been getting a fair few Google referrals, so I decided to spend a few hours updating how I explain CSS specificity using Star Wars villains. ​CSS Specisithity​ now has its own URL and a new design.

Ahmad Shadeed: CSS :has() Interactive Guide​

“We always wanted a way in CSS to style an element based on its descendants. It wasn’t possible until CSS :has() became supported in all major browsers. In this article, I will explore the problem and shed the light on some of the interesting use cases for CSS :has().”

​Michelle Barker: Shades of Grey with color-mix()​

“What we want is a nice selection of greys that complement our colour palette. We could of course use a colour picker and our favourite design tool (boring). Or we could create a palette of greys with the CSS color-mix()function (yaaaay!). Let’s go with the second option.”

Thanks for reading, and please press “reply” if you’d like to nerd out about any of the above. I always respond.

— Andy

Written by Andy Clarke who tagged this with newsletter

Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.