UI Design Journal: Trends and fads in User Interface design in 2021.

Abdulhussain Jarif
5 min readAug 22, 2021

--

As a beginner in the UI design field, I was always scared and confused about the Terminologies used by my fellow designers. Here, my motive is to explain some commonly used terms in layman words. Fasten your seat belts as this is going to be a bit long yet, enjoyable journey.

Contents covered in this documentation:

  1. Flat design
  2. Skeuomorphism
  3. Neumorphism
  4. Glassmorphism

Flat Design

The war between Flat design and Skeuomorphism began in the mid 2000s when Microsoft launched Metro with flat design implementation. Microsoft Design Language is previously known as Metro. Well, Microsoft and Apple don’t think so but yes, some people think that flat design is a boring design. However, the truth is that minimalistic design styles are popular, and eliminating unnecessary clutter from a design can improve its usability.

Why Flat design?

Flat design is a philosophy that has been making its way around the design world in the last year. It embraces minimalism, solid colors and fills, and eschews complex gradients, drop shadows, and any design elements relating to the past.

Pros of using Flat design:

  1. Simplicity- minimal and aesthetic look
  2. Design without drop shadows and Gradients- render faster.

Design Failures of Flat design:

  1. Simplicity can be boring sometimes- Well, Microsoft and Apple don’t think so but yes, some people think that flat design is boring design.

Skeuomorphism

Skeuomorphism, in a nutshell, is an object or design that derives its aesthetic design cues from the original physical object. Skeuomorph is a copy of something else, an imitation, intended to represent the original.

Skeuomorphism borrows design cues from the physical world. For eg: Calculator on your phone, or the Safari Compass browser icon. Skeuomorphic design elements are often design elements without functionality.

Safari Compass browser icon

Taking a closer look at the Safari Browser icon, you can see drop shadows and gradients give it 3-Dimensionality. Elements from an actual compass, like the key ring or the bearings for direction are also present. However, these design elements have nothing to do with the functionality of the icon.

Pros of Skeuomorphism:

  1. Skeuomorphic interfaces feel instantly familiar.
  2. Demonstrates attention to detail.
  3. Designers love any excuse to use textures.

Cons of Skeuomorphism:

  1. Skeuomorphic interfaces sometimes hinder usability
  2. Can result in poor use of space- designs that have superfluous images and decoration are basically wasting screen
  3. As most of the designs are copied from the original they tend to age sooner.

Neumorphism

Neumorphism was born from skeuomorphism. Ux designers from all over the world have appreciated the presence of Neuromorphic designs. And now, in recent times it has started a new trend on its own. Now you can find tons of Neumorphic designs on Dribble and Behance.

Enough praising and let’s see what actually Neumorphism is all about?

Neumorphism is a new take on skeuomorphic design. Even though it relates to skeuomorphism. The focus is not necessarily on the contrast or similarity between the real and digital worlds, but rather the color palette. Neumorphic design usually follows a single shade palette.

Neumorphism design is all about selecting the right color palettes. For the Neumorphism Effect , you need 3 shades of the same color.

  • Light Color for Light Shadow
  • Mid color for Main background and Element color
  • Dark Color for Dark Shadow
Flat Design vs Neuromorphic Design

Neumorphism is all about subtle contrast and solid colors. But how can we create an interface that delivers a wow factor without any flashy elements? In neumorphism, it’s all in the use of shadowing and light.

Here are some cool examples of Neumorphism UI:

Glassmorphism

Glassmorphism is a relatively new and therefore incredibly popular word in the interface design field.

Characteristic features of Glassmorphism:

  • Transparency- the overlay of layers creates the effect of frosted glass with a blurred background;
  • Objects freely “floating in space” without support;
  • Bright, neon colors that emphasize the airiness and transparency of the design;
  • Colorful backgrounds and photographs, the overlay of “glass” on which looks the most impressive;
  • A very thin semi-transparent white stroke on objects to simulate a glass edge.

Some cool Glassmorphism designs:

Conclusion

People’s aesthetics will always change. We are easy to get tired of one trend and turn to another style every few years. As designers, we need to explore all potential and creative ways of manufacturing products.

--

--

Abdulhussain Jarif
Abdulhussain Jarif

Written by Abdulhussain Jarif

A Self Learner, Tech Nerd, Product Designer, Avid Reader, Curious Mind, Newbie Writer xD