Neumorphism
A new take on the traditional skeuomorphism, neumorphism places value on elements like color to differentiate itself and elevate the popular skeuomorphic design. Some of the most visible aspects of this design trend are low contrast and solid colors with intentional shadowing to make components truly pop. Many users prefer a design like this because it offers minimalistic aspects but isn't quite as minimal as a design like glassmorphism.
The design still incorporates a variety of colors and textures without being aggressive in appearance. An example of this could be an interface featuring the primary color purple. It may offer various shades of purple that give it dimension and can be engaging to look at, but it still remains minimal. This also aids in the shadowing aspect that neumorphism is well-known for. By using a layering technique of slightly varied shades of the same color, components can appear to protrude from the screen. This level of dimension is similar to an optical illusion. It is incredibly appealing to the eye, which consequently increases user engagement.
A great example of neumorphic design in action can be seen in this neumorphic clock app. The consistent light features are blended in a way that adds dimension and appears to stand off the screen entirely. You will often find neumorphic elements used for specific items rather than entire websites or apps.
One issue with neumorphic design is its focus on similar colors with little diversity. As a result, typography blends seamlessly together on the page. While this may sound like a positive at first, it presents an issue for vital information that needs to be communicated.
For example, a call to action is usually the focal point of a page as it allows users to clearly see the next steps. When the text blends together, it can be easy to simply miss the call to action. The last issue we see with neumorphic design is its lack of accessibility.
Again, the seamlessly blended text and visuals can be a negative as they make it challenging for visually impaired users to navigate their interface. The soft appearance is a significant disadvantage in this case. Other design techniques like neubrutalism are far more user-friendly for visually impaired users. Aside from these two drawbacks, neumorphism is a simple, clean design trend that offers far more pros than cons.
Interested in learning about the origins of Neubrutalism? Follow this link!
Glassmorphism
Translucency is at the heart of this design trend, which is where the root word glass comes from. Glassmorphism is designed to create the feeling of looking through glass, thanks to its opaque nature. This trend has been around for quite some time but was not honored with its name until recently, in 2020. Part of the reason for this is that it incorporates many aspects of the long-standing skeuomorphism.
Elements like reflections and heavy drop shadows were merged to create a sense of realism. Over the years, this has transformed into what we now know as Glassmorphism. We see this design trend everywhere now, and it is most widely seen in Apple products. Apple has mastered the art of slightly translucent backgrounds with hazy elements that truly provide the feeling of looking through glass.
Another well-executed example of Glassmorphism has been harnessed by Webflow in the form of a template. Appropriately titled Frosted Glassmorphism, this template has created the illusion of three separate layers on top of one another. The background appears as a cluster of bright yellow lemons, which is organically eye-catching.
Then, they layered a component on top that features half of the box as frosted glass and the other half as a solid white. Finally, a smaller-sized component is placed on top with an image of a woman. This template is dynamic and engaging to look at. The user is attracted to the bright color in the back and the opaque appearance of the image through the frosted glass.
The image on top appears to be physically popping off the screen. When the image is scrolled over, it projects itself even further. This template is just one example of a wide array of visually appealing Glassmorphic designs.
As with any design trend, some unique elements allow UI designers to easily distinguish it from other trends. Glassmorphism is known for its reliance on imagery, as there needs to be something in the background that the glass effect can be laid over. It effectively distorts the image hidden underneath, just as a true piece of physical glass would. Often, this will be done with bright colors, so the effect is dramatized.
Another design element we see in Glassmorphism frequently is a soft focus blur. This attempts to replicate frosted glass, preventing users from seeing the entire image clearly. Instead, primarily just the outline and any noticeable colors are seen. This out-of-focus appearance can be challenging for UI designers to nail, but when they do, the outcome is fascinating to look at.
Because the concept of blurring is so vital to the trend, adding outlines or borders is often seen in Glassmorphic designs. This helps users differentiate between different areas of the interface easily and efficiently. The borders remain light, so they do not become distracting, and you'll likely see these in purely neutral color schemes. The beauty of this design trend is that it takes minimalism and kicks it up a notch by adding dimensional effects. Rather than looking at a flat screen, users feel as though they are looking through a window.
Check out our post about Glassmorphism for more insights about the style.
Neubrutalism
This design trend is remarkably different from the previous two we've discussed. The root word in the name of this trend is brutalism. Brutalism was a popular design trend in the 1950s that exhibited harsh lines and very little detail. One example of a popular brutalism design was a solid concrete building with straight edges and not many unique design elements. These buildings were intentionally designed this way, and while it wasn't a long-lasting trend, it had its moment.
We are witnessing this same occurrence with this new design trend, neubrutalism. This is the web's spin on this rather simple form of architecture. The difference here is that neubrutalism designs in UI are opting for the opposite route and utilizing tacky, contrast-filled layouts with quirky color and typography choices. To say this design trend stands out would be an understatement, in our opinion.
The most commonly seen aspect of neubrutalism is the use of sharp contrast. Specifically, the mixing of black with contrasting colors. Many UI designs are intentionally sensitive to their user's eyes. They will even infuse some of the chosen contrast colors into the black design. With neubrutalism, the idea of "the sharper, the better" is employed. This tactic is also used in the shadowing elements we see within this design. It relies heavily on thick, dark lines that create dimension on the interface. This is ideal for accessibility purposes, as each individual component stands out clearly. Especially for those with visual impairments, this is incredibly beneficial.
In contrast to glassmorphism, neubrutalism avoids any blur elements entirely. Instead, it goes in the opposite direction with distinct lines and shapes. Next, the color choices are often considered tacky or clash entirely. Mixes of colors like green and purple, which traditionally do not blend well together, are used. It is important to note that these colors are desaturated, so even though they are contrasting colors, they are not as bright as you might expect.
In most cases, they do not exceed 75% saturation. Again, this is beneficial for those suffering from visual impairment. Some might say that the goal of neubrutalism is to attract attention due to its wild and non-traditional design choices.
Another interesting element of neubrutalism is the use of inconsistency as a differentiator. This is intentional and one of the trend's most well-known design aspects. For example, illustrations tend to challenge traditional rules. You may witness more odd color combinations or a mix of various line thicknesses that make little sense. Additionally, neubrutalism utilizes misaligned text to push the boundaries of "normality."
An example of this trend in action can be seen on the Goodkids Agency website. On their landing page, users are greeted with bright pops of red, yellow, green, and blue. These colors are layered over a muted neutral color. Users are unknowingly drawn to the design for this exact reason. CC Creative Design, the website you are currently reading this on, also uses aspects of Neubrutalism, such as colors and accented shadows. All of these unique quirks in neubrutalism seem to attract attention due to their non-traditional characteristics.
Interested in learning about the origins of Neubrutalism? Follow this link!
