2017: The Year of the Blob
I usually don’t care for design retrospectives during the holidays as they highlight things that are usually passé, but this year’s pervasive trend really stuck with me. 2017 is the year the Blob was born.
What is the Blob?
The Blob is an amorphous, pseudo-organic shape that’s commonly used to anchor landing pages visually. It usually serves as a mask or backdrop for an illustration. About 90% of the time the Blob is filled with a gradient and sits on the lowest layer of a design. Its relationship to the brand or product is usually ambiguous, but it’s an easy way to transition between different types of information without being too blocky.
Here’s my Dribbble bucket-o-Blob that I’ve curated. It’s not comprehensive and I don’t count blobs that are: a meaningful part of an illustration (foreground to background layers of landscape), waves, or other specific intents (like actual graphs).
Where did the Blob come from?
It’s hard to say. I have a few theories, though:
- The Blob is a compromise or passive rejection of the Flat UI craze.
The rigidity and coldness of iOS 7 (and even Windows’ Metro UI) has become unbearably mundane. While we may embrace flat and solid elements, they need balance with organic shapes that feel welcoming.
2. The Blob exists as a substitute for illustration.
Not everyone can afford or execute illustration in their design. Trendy brands like Dropbox and Intercom have blob-ular elements as part of their illustration style and designers want the handmade quality without the effort of developing an entire system. It’s an investment that will need new assets for every occasion.
3. The Blob is here because it feels like it’s data-driven and that means your company is smart.
There’s some design psychology involved here, but put simply: when we see rising actions from left to right, we feel comforted and likely place more trust in what we’re interpreting. It’s also really suggestive of things we look at regularly that we associate with being insightful. For instance:
Some examples of AI that we interact with in our daily digital lives are also embodied as Blobs (to varying degrees).
In practice, it’s more likely to appear as a static “graph” element. The intent is virtually the same though. They want to suggest that this product is thinking about how to provide insights and growth.
4. Blobs are more convenient in Responsive Web Design.
Anyone that regularly incorporates photography with human subjects into their design knows that the cropping of a photo and the geometry of its layout can become a chore to control at different breakpoints. Too much forehead here, cropping the smile here, text across the eyes here, etc. It’s hard to predict behavior across multiple devices without a lot of specificity. Blobs solve that problem really well because they have the qualities of organic shapes and textures we crave, but they don’t have eyes and smiles so we don’t care if they’re obscured or cropped in a less predictable way.
There are many species of Blob out there. Some are really thoughtful and work really well, tonally. Others are arbitrary, unnecessary and at times complicate the UI. Have you spotted a Blob in the wild? Do you think they’re pointless adornment or do they help balance your design? Tell me about it.
Update 3/19/19:
It seems like some of the clever folks at Prototypr.io have adapted my research for the development of a blob-building tool (Blobmaker). My hat goes off to Richard Zimmerman for his work. Thanks for the shout-out Richard!
