# How to design in 2023

<s>I'm a fan of preludes, but not here...</s>

# [2023 design trends](https://archive.is/20221213150720/https://uxdesign.cc/2023-visual-design-trends-guide-82e84f09cbdf)

## Motion design

![I Suffer From Short Term Memory Loss" Scene - FINDING NEMO (2003) Movie  Clip - YouTube](https://i.ytimg.com/vi/mRUuIRWwOIY/maxresdefault.jpg align="center")

UX is no longer static - due to our attention spans dropping to approximately 0.618 of a fish, we crave motion and interaction ([Source](https://www.invisionapp.com/inside-design/5-examples-motion-design-ui/))

![Motion design examples mix](https://archive.is/m6HbS/2aa551011ba2383af23ac59bbb80ad3539cfec08.gif align="center")

![GIF: Google Translate offering male and female translations](https://s3.amazonaws.com/www-inside-design/uploads/2019/01/googletranslate.gif align="left")

![GIF: Animated flight tracking app screen](https://s3.amazonaws.com/www-inside-design/uploads/2019/01/passenger.gif align="center")

## Clean design

Too much detail is harmful for, again, our attention. **Just. The. Information.**

![Clean design examples mix](https://archive.is/m6HbS/27414a3368b19d56ea0e5dc5a015b182882cffce.webp align="left")

### Some [rules](https://designill.substack.com/p/6-rules-of-clean-ui-design) (and [some more](https://www.visma.com/blog/10-actions-user-interface/) - read'em)

1. Don’t use too many effects
    
2. Use just a couple of colors (2-4)
    
3. Make big readable headings
    
4. Make UI elements just a little bit rounded
    
5. Use bright backgrounds
    
6. Pay attention to white space (don't be afraid of it)
    

## Multicolour soft gradients

Aurora's becoming popular. Here's a [simple generator](https://app.haikei.app/) just in case. And a more [complex one](https://fffuel.co/ffflux/).

![Multicolor soft gradients examples mix](https://archive.is/m6HbS/40ba8845921db1cb1a3210f48349424156e4a82f.webp align="center")

## High Contrast / Monochrome

Part of **clean design** IMO.

![High contrast / monochrome examples mix](https://archive.is/m6HbS/523b15d348d016882e2eab726e516823814e5e72.webp align="center")

The dark option is evolving into...

## Dark futuristic/cosmic UI

Easier to catch attention, usually, as it combines <mark>aurora</mark>, <mark>contrast</mark>, <mark>big typography</mark> and sometimes <mark>motion</mark>:

![Dark UI examples mix](https://archive.is/m6HbS/024ed9c5446273997e361bfdec1b1c11f4dc80c9.webp align="left")

## Real-life materials imitation

Glassmorphism is definitely on the rise:

![Real life forms and materials examples mix](https://archive.is/m6HbS/5c3140eacb62da7f87f910fccfc2fe755c9f8249.webp align="center")

![Blue background with yellow-orange gradient circles. Two glassmorphic rectangles mimic a smartphone](https://assets-global.website-files.com/6009ec8cda7f305645c9d91b/620bda15c9fb493c62c37003_glassmorphism%20artem%20abramov.jpg align="center")

## Gigantic typography

![Okay.](https://cdn.hashnode.com/res/hashnode/image/upload/v1673598146076/0566c1bf-b9a6-4ac8-bad0-b2c9d88c95be.png align="center")

![Gigantic typography examples mix](https://archive.is/m6HbS/566aa818f8a2cf31da7d8b22dbe75ea7e507dcb6.webp align="center")

Quote: *"Sans-serif, geometric typography is not going anywhere and will always be a safe, functional choice for interfaces."*

## Sentimental Design

As breathy, warm voice is more pleasant and trustable, sentimental design can be a breather from geometric and contrasted ones:

![Sentimental vintage design examples mix](https://archive.is/m6HbS/eba6ab12830c65fa8f7d5a4a4303fd9223a7746b.webp align="left")

Some of the trends emerging from another [big report](https://blog.prototypr.io/2023-ux-ui-design-trends-67fdf6b3043d)

### No-code platforms

Especially Webflow vs Framer ⇒ interaction simplification.

### Virtual reality

Immersion + interaction = more **net attention span**!

### Decentralization

**Web 2.0** (user *creates* content) ⇒ **Web 3.0** (user *creates* and *owns* the content)?

### Motion/video experience design

It aligns with TikTok/Vine/Reels being on the rise, and **attention spans dropping**.

### AI-driven design

Interaction simplification.

## Summary

We can safely summarize in one main trend methinks: **ultimate simplification + interactivity + contrast in the wild hunt for users' attention.**

# Sidenote

A nice, niice [data viz color scheme generator](https://www.learnui.design/tools/data-color-picker.html)!