Which UI trend is your favourite?

Recently I've been in discussion with my design team about how we can shake up our branding and maybe challenge the way we approach things from a UI perspective. How can we make it more fresh, innovative, and more aligned with what our modern customer expects?

In my pursuit of inspiration, I decided to delve into some design history and educate myself on some of the key design trends of the past. In this article I explore 6 design trends of the ages, how they came about, what are their highlights and most importantly what we can learn from them.

Have a read and let me know what your favourite UI style is (and see if you can guess mine).

Flat design

Think: Google Material Design

Let's start with one of the most popular design trends; Flat design, making digital stuff look fab, easy to use, and super stylish.

Flat design is a world where simplicity and coolness take the centre stage. This style is all about keeping it simple, rocking those two-dimensional vibes, vibrant colours, and chill icons, while leaving lots of room to breathe with that awesome white space. It's like a rebellion against the super-realistic designs of the past, making its debut as the coolest trend in web, visual, and UI design around the early 2010s.

Flat design got its groove on with Microsoft's Metro design language, waltzing in with Windows Phone in 2010. Microsoft wanted things simple, bold, and easy on the eyes, perfectly aligning with flat design's principles.

So, what's in the flat design toolbox?

• Simple and Clean Interfaces: with loads of space and barely any distractions.
• No-Nonsense Typography: They're clear, no frills, and sans-serif, making sure the message is loud and clear.
• Bold and Funky Colours: Flat design loves colours that pop – the kind you'd find in a candy shop. They're bright, happy, and they've got personality.
• Icon Magic: They're simple, sharp, and tell you exactly what's what, all without needing a million details.
• Buttons: Either square or round, with solid colours and just a hint of shadow. Super classy!
• Hip Illustrations: Minimalistic illustrations are the talk of the town – simple shapes telling cool stories.

Bauhaus

Think: Ikea

Next up is Bauhaus, established in 1919, gaining significant popularity in the early 20th century.

Bauhaus rocked the design world by saying, "Let's make things useful, beautiful, and blend art with everyday life."

Bauhaus is like a cool fusion of arts and craftsmanship. The name means "building school," and it all started at a German design school called Bauhaus, founded by architect Walter Gropius in 1919.

Bauhaus design is all about practicality and modern materials. Bauhaus designers wanted to blend art and real-world use, making stuff that looks good but also works well. This idea came after World War I when people were thinking about how to design for the new industrial world.

Fun fact: the clean lines and white space we are used to in modern websites and UI apparently came from the "less is more" approach taken by the artists in this school.

Grids also became a big thing because of Bauhaus. They give designs structure and balance. And when it comes to words, Bauhaus loved clean fonts with clear shapes.

Shapes were a hit, especially squares, triangles, and circles. And oh boy, did they love colors! Bold and bright – they used red, yellow, and blue a lot. Sometimes, it was just black and white with a splash of one more color, like red or blue.

Brutalism

Think: Figma

Brutalism is like a rebel – it says, "Hey, let's show off the unpolished side of things."

So, there's this design style called Brutalism, which is all about rough and bold looks. Think unconventional colours and bold text. It started in the mid-20th century and was big in architecture, but also showed up in graphic and UI design.

The name comes from French, "béton brut," which means raw concrete because architects at the time loved using this concrete as the main stuff for buildings, showing off its rough, simple look.

These Brutalist buildings made statements with their beams, columns, and concrete style. The idea is to be honest and bold, making structures that really show their purpose. Now, these Brutalist ideas have jumped into graphic and UI design. They're often called neobrutalism or neubrutalism.

Neubrutalism is like the rebellious child of Brutalism. Instead of pretty stuff, it goes for simple and useful. Imagine clashing colours, heavy outlines, and funky shapes. BIG, BOLD WORDS, are in, and so are wonky layouts.

But remember, neubrutalism can be a bit like vegemite – people either love it or hate it. It's all about breaking rules and making a statement, so be ready for a reaction!

Neumorphism

Think: Apple IOS, Github

Neumorphism arrived, saying, "Let's make digital feel tactile and real, all while staying clean and simple."

Neumorphism is like a mix of two older styles: skeuomorphism and flat design. Basically, it uses soft shadows and highlights to make things look three-dimensional and real.

Neumorphism showed up in the early 2020s as a response to the flat design that had been around for a while. The name "neumorphism" comes from "new" and "skeuomorphism." Skeuomorphism is when digital stuff looks like real things – like buttons looking like physical buttons. Neumorphism takes that idea and adds shadows and highlights to make things look touchable and real.

This style mixes this touchable look with minimalism leaning heavily on shadows to make things POP!

• Buttons look a bit raised
• Cards look like they're floating.
• Input fields look like real forms
• Icons get a 3D boost
• Progress bars and sliders get a pillow-like, interactive look

Retro Futurism

Think: Spotify

Retro Futurism joined the party, declaring, "Let's fuse past visions of the future with cozy nostalgia, using warm tones, vintage art, and imaginative layouts."

Now Retro Futurism is like looking back at the past's idea of the future and feeling nostalgic. Think Tron, old video games, and pixel art from the 1980s. The colours are all vibrant and neon, or they might have a cozy vintage feel. They love adding stuff that looks like old tech – knobs, radio dials, and vintage buttons – to give you a trip down memory lane.

In Retro Futurism UI design:

• Colours evoke a sense of nostalgia, ranging from warm and faded tones reminiscent of old photographs to bright shades or even arcade-style neon colours.
• Typography takes cues from fonts popular in the past, often with a playful and bold flair.
• Textures play a role in creating an aged feel, with backgrounds resembling worn materials, incorporating film-like grain, paper textures, and nostalgic 16-bit game aesthetics.
• Vintage-inspired illustrations and graphics, whether hand-drawn or digital, contribute to the throwback atmosphere.
• The UI elements are designed to resemble old technology, featuring buttons reminiscent of vintage gadgets and knobs that could belong to old radios, all creating a journey into the past.
• The layout mirrors vintage print design, showcasing asymmetry, overlapping elements, and collage-like arrangements, paying homage to design approaches from bygone eras.

All in all, Retro Futurism is about mixing old visions of the future with a cozy dose of nostalgia.

Glass morphism

Think: Adobe Creative Cloud

Glassmorphism declared 'Let's bring a touch of realism and depth to digital design, with a sleek and modern twist.'

Glassmorphism burst onto the scene when Apple introduced it with iOS 7 and macOS Big Sur. This design trend became a hit in the UI and visual design world in 2020. It's all about adding a translucent or frosted glass-like effect to elements in interfaces, making things look deep and real. Glassmorphism has a modern, minimalist, and futuristic vibe.

In UI design, glassmorphism rocks:

1. Colorful Backgrounds: They play with vibrant, blurry shapes on backgrounds to create the glass effect's magic.
2. Foreground Gloss and Frost: Elements at the front get a blurry and see-through touch, adding depth and cool looks. It keeps things futuristic and neat.
3. Cards and Panels: They look like glass with gentle see-through bits and hazy edges, giving them a floating vibe.
4. Buttons and Controls: They might have a glossy surface with a soft gradient and a see-through style. Hovering and clicking can trigger animations or inner shadows.
5. Modals and Dialogues: Transparent or semi-transparent backgrounds with frosty glass vibes make stuff look like they're hanging in front.
6. Icons and Logos: They use the glass effect to make things glossy and reflective.

But what can we learn?

So looking into the history of design and trends throughout the years is great and all but what can we DO with this knowledge? We'll in my opinion we can take away the following:

1. Functionality Matters: Just as Bauhaus prioritised functionality, we should ensure that our designs serve a purpose beyond aesthetics. Integrating practicality into our creations enhances user experiences.
2. Embrace Simplicity: The minimalism of Flat Design teaches us the power of simplicity. Clear layouts and uncomplicated visuals not only communicate effectively but also stand the test of time.
3. Innovate with Context: Like Retro Futurism, we can draw inspiration from the past to create future-forward designs. Merging nostalgia with modernity can give rise to fresh and captivating visual narratives.
4. Play with Realism: Neumorphism and Glassmorphism remind us of the value of tactile realism. Integrating real-world elements into digital spaces can evoke comfort and familiarity.
5. Boldness Creates Impact: The bold aesthetics of Brutalism highlight the impact of pushing boundaries. Unconventional designs can make a lasting impression and set us apart from the ordinary.
6. Blend Styles Thoughtfully: Just as design trends evolve, so should our creative approaches. Mixing and blending styles can yield unique outcomes, as seen in the harmonious fusion of modern aesthetics and traditional principles.

So that's a wrap on design throughout the eras. What are your favourite trends?