I don’t get your design: Debate over illustration trends in hero images
I wrote this article to help designers decide how to create the best hero image for their landing page to convey what the product does for its users.
You will see bad examples led by trends, how this mess came to be and learn how to do it better from leaders in our industry.
Let's start the rant.
So many influencial tech companies flouded their landing pages with cool people illustrations. It’s very tempting to feel inspired and jump on that train.
When I first saw this trend emerging (initially on tech sites and shortly after booming on dribbble) and how it can be used in favor of inclusiveness (showcasing various body types, skin color and so on) while conveying emotion that the marketing team wants me feel, it honestly left me excited. I almost went out of my way to buy an iPad Pro with the special pencil and learn how to draw people of the world in a cute way.
But soon after everyone did jump on that train, a wave of critisicm rose in the design community — are these artsy illustrations really useful for our users?
Eli Shiff, an infamous design critic, has started a Twitter account called “Humans of Flat Design” https://twitter.com/HumansOfFlat where he satirically mocks that latest illustration trend so famously started by the great illustrator Alice Lee and her work for Slack.
Alice’s art direction was genius and led to big tech companies along with almost all latest startups to borrow it as their own.
But we lost something in the transition.
A meaningful way to show our visitors and users what our product or service really does.
Yes, there are titles and short descriptions next to all of these illustrations — but people are visual. They want to see what it does.
Perhaps this tweet sums up the idea the best:
You might argue — but Slack did it and nobody died!
Yes, but we all know what Slack does and what it is. They can do as they please. They earned the right to experiment.
The hero image is such a sacred space.
It is a first point of contact with your potential customer. They soak you all in and then their cognitive space shrinks every image, every word they don’t get. Just read Steve Krug’s classic “Don’t make me think” and you’ll know that engaging your user’s brain too much is a no-no. They lose patience and off they go along with your potential earnings.
So what is the best thing to put in there?
The perfect hero image is:
- simplistic
- instantly understandable
- showing a piece of your product
- (can be) animated for more clarity
- not abstracted too much
Some kind of abstraction is inevitable. There is a limited space after all, especially if your product is too complex to be understood on a first sight.
These examples show that a perfect product introduction can be done within a limited space, simply and still effectively.
Examples of good hero graphics
As you can see, sometimes a human body is used, and sometimes, there’s just no need…
