Main interface design trends
Is the next big novelty in pneumorphism design of sites web and applications? It’s a design trend (named after a mashup of the words new and skepticomorphism) that is growing in popularity. People seem to love it or hate it, but it’s interesting enough that Cult of Mac beech I recently published an article that begs the question, “Is Pneumorphism the Big New Look for iOS 14?”
We won’t know the answer for a while yet, but the trend is gaining traction, particularly on Dribbble, where we see a lot of design trends launch.
Here’s a look at a pneumorphism to help you get a sense of what it is (and isn’t) so the trend doesn’t pass you by.
What is pneumorphism?
Pneumorphism is a term that began to gain traction in late 2019 and has gained even more momentum this year. The combination of new (neo/neu) skeuomorphism falls somewhere between the silliness of true skeuomorphism and the near-flat simplicity.
It is characterized by a simple color with shadows to add depth and have an almost lifelike feel without being over the top. The design can include internal and external shadows to create this effect.
The first references to the trend date back to a publication of Michal Malewicz who describes: “A modern / material (upgraded) card is generally a surface that floats above our perceived background and casts a shadow on it. The shadow gives it depth and also in many cases defines the shape itself, as it often has no edges ”.
Malewicz’s website (above) dedicated to the trend appropriately uses the style.
Pneumorphism shows up as a trending style on Dribble, where tons of shots using these concepts have appeared. (We have some of the ones shown here).
Most of the examples feature card-like application projects where this design technique appears to soften the harshness of the overall interface.
Features of this design trend
The root of the concept of pneumorphism is that the digital design mimics or acts like the object it represents.
Notice how the buttons in the music app example (above) appear to have been pressed. Pneumographic elements, when done right, seem to show you how to use and interact with them, like pressing buttons, moving sliders, or turning dials. .
Pneumorphism also appears to be an extension of the minimalist design trend. Many designs feature white interfaces, but dark mode options are also growing in popularity. But there is nothing to say that you couldn’t create a pneumorphism style interface in another color.
Visual elements commonly associated with neomorphism include:
- Light or soft color palette (but not always thanks to the popularity of dark mode)
- Basic shapes, such as circles or rectangles, throughout the design.
- Subtle shadows and effects for the most part (and it’s all done in HTML and CSS)
- More dramatic shadows for buttons and clickable elements.
But be careful (neomorphism challenges)
The trend for pneumorphism is not without its own challenges.
The biggest problem areas are accessibility and contrast, which are related issues.
With designs that use fairly drab color schemes and lots of white, not all accessibility standards for color are met in the interface. However, that is a correctable problem and could help shape and change the evolution of this trend.
If you are designing with pneumorphism techniques, remember to keep a few things in mind to make sure your design works for as many people as possible.
- Design buttons with extra contrast and make sure they look like buttons
- Don’t force yourself to exaggerate the shadows to make them more visible; focus on text and click/tap embedded elements
- Use design effect layers for buttons that look similar in different states, like pressing a button
- Don’t feel like you have to overdo it; keep it simple
Examples of pneumorphism
There are many excellent examples of this trend from a variety of designers. Here are a few to jumpstart your creative process and inspire designs.
Neo Spotify
Board meeting
Mobile Banking Pneumorphism
Smart Home App
Neo Instagram UI Concept
Pneumorphism concept design
Cryptocurrency Dashboard
Pneumorphism tools and resources
If you want to experiment with pneumorphic shadows and designs, there are a few tools to help you get the hang of the idea.
Conclution
Pneumorphism is a fun design trend that appeals to me because I really like minimal white (or dark) interfaces. The design doesn’t get in the way much and the concepts feel a bit more usable and intuitive than flat and less comical than true skepticomorphism.
When it comes down to it, this trend is like almost anything else – it’s a matter of personal preference. Would you consider using it in any of your projects or will it be a fad?