UI & UX Trends
for 2023
for 2023
1. Containers and Boxed content
The concept of containers is certainly not new to UI design, but we are seeing, more and more, apps, mobile and web designs that are entirely boxed within containers, eliminating everything unnecessary. This transition to boxed content is due to the multiple devices on which the content must be displayed. In this particular case, the designer begins to create his work from the mobile version (mobile first) and then moves on to the desktop and tablet. For example, you can keep the same design line on desktop, mobile, and apps. Containers help you organize UI elements into blocks, so the user is not distracted by unnecessary visual elements.
Many websites and applications use this minimalist, mobile-first style, such as Revolut, which has taken boxed content to the next level.
Remember: respect the grid!
01. revolut.com
02. VETCITY by Kirill Kim
02. VETCITY by Kirill Kim
05. exegroup.com website by Milo Studio
2. Scrollytelling
Scrollytelling is visual storytelling that you scroll through. It is used because it creates a connection with the user and it triggers emotion. As you scroll through the page, something new is revealed, making it interactive. In a parallax transition, the information moves on one side and is replaced by images or videos on the other, essentially, as the scroll is performed, the information changes.
3. Emotional Design and Personalization
In a market full of options, emotional design makes the difference between a great successful app and a failed one, by triggering an emotional response. Emotional Design is a concept that anticipates and accommodates its users' needs. The system gives feedback, understands the basic desires of its users, and makes them feel like they are interacting with people rather than a machine or a company. All these small features make the user feel like you care about them, it creates an attachment and, of course, customer loyalty. When the user has a great experience with the app, it’s more likely it will overlook minor issues.
Most designers tend to relate to Don Norman’s three different, yet interconnected, levels of emotional design: Visceral, behavioral and reflective. Norman is the director of The Design Lab at the University of California, San Diego, and most of his work involves the advocacy of “user-centered design” even stating that aesthetics is a secondary need.
Visceral design means how the user first perceives a product and how that first impression makes them feel. A lot of time is spent on this, as there are many similar products on the market.
Behavioral design refers to the user’s experience. Behavioral design is often referred to as usability. The designer must understand how the user thinks and how he makes decisions.
Reflective design is the highest level of emotional design. It’s when the user decides if they will stick with the product, depending on how it made him feel when using it and after.
01. Don Norman's 3 levels of emotional design
02. Rapchat by Fireart Studio
03. Rafiji app - UI/UX redesign case study by Farshid Darvishi , Zinat Farahani
04. Fitness Mobile App Prototype | Nike by Marna Van Der Schyff
05. Furniture design store | e-commerce by Anastasia Aleksiichuk
4. Metaverse design
The first thing that the designer needs to take into account is that, in the metaverse, the users are not just standing by consumers, they are active participants.
In a metaverse thousands of people will be able to participate in a single event from their living room, they can also play, study and socialize in the virtual world.
The designer must create the assets with emotional design in mind, as the users need to have a familiar feeling when stepping into the metaverse. 3D is essential in designing for a metaverse, so designers must have a deep knowledge of these tools.
01.Fina — Interactions for VR by Prafulla Chandra G S Apoorv Anurag Cherian Jeremiah Iype Atish Waghwase
02. Microsoft Mesh "HoloLens 2" by Jeff Han, Lusine Arakelyan, Haram Jung, Chris Bjerre
03. Pico 2022嘉年华商超中庭活动 by Pico 2022嘉年华商超中庭活动
04.Steam Vr Dashboard
05. Mixed Reality AR/VR/MR App Museum by Sigifredo Valencia Ensinales
5. Simplification
Every UI/UX designer’s goal should be to create easy-to-use, efficient and effective products. In the emotional design chapter, we mention Don Norman’s user-centered design, who is stating that aesthetics is a secondary need. He is referring to the fact that all that is unnecessary should be left out and focus only on solutions that best address the specific problem you're solving. Remember: too many options and choices will scare off the user.
The simplification in UI/UX design will make the users achieve their goals faster while enjoying a great user experience.
01. Volkswagen Group - Training platform by MUG & Grzegorz Leśniewicz
Intervaro – Web Design by Hannes Ahremark
03. Her by Paweł Olszak
04. OnePlus Oxygen OS 11 by Michael Glass & Andy Edwards
05. nextml: Brand Identity & Website by Embacy Team
06. Alice | DeFi app by Oleksandr Plyuto 🇺🇦 & Leonid Stern
6. Micro Interactions & Micro Videos
A micro video is a regular video but shorter. Most users don’t want to read long descriptions about how the product works and prefer a short video. These kinds of explanatory videos do wonders for the onboarding process. For a micro video to be effective it needs to be a few seconds long and can go up to a minute. Both educational and marketing micro videos must bear in mind the emotional design part while being clear with the message it sends. A micro video may or may not be accompanied by music or sounds.
Micro-interactions are almost everywhere in UI design, which is why they still deserve a mention. Even though they seem like small details, they play an important role in user experience. Most people, these days, prefer a visual representation rather than a bunch of text lines. They make the overall experience more enjoyable, building trust. User-initiated micro interactions include swiping, scrolling, or clicking.
01 Lab day by NoA Ignite
02. & 03. by Jakub Antalik
04. & 05. by Oleg Frolov
06. by Anastasiya Remeslova
7. Integration with wearables
As we mentioned before, designers need to work on apps with simplicity in mind, so that the interface can be easily displayed on different devices, and we are not referring to the basic ones like laptops, tablets, or phones. We mean the portable technology that you actually wear. Wearables come in different shapes and sizes, all pretty small, and they include smartwatches, fitness trackers, medical devices, smart glasses, ar/VR gadgets, biosensors, smart rings, and even smart clothing.
In the near future, apps for wearables will definitely grow.
01. Garmin Instinct 2 by Michael Soleo
02. UI/UX for Bumble: Smart Watch App Concept by Confetti Design
04. Dex by Yash Saboo
05. CES iOBED IOT Branding Film by CES iOBED IOT Branding Film
8. Generative AI and Web3
The web as we know it today is known as web2, it emerged in 2004 with social platforms. Companies created platforms for users to create and share content that generated value, but they didn't own it or benefit from its monetization. Web3 promises an AI/machine learning-driven web and the implementation of decentralized systems like blockchain.
This year we've seen a glimpse of what generative AI can do in design. We were amazed by Midjorney and Dall-e. The use of data to design an effective interface has a new meaning with the help of AI. Wixx already has integrated an AI in their platform that builds you a website in 10 minutes if you answer a few simple questions. You may wonder if Ai will replace human designers. We don't think this will be the case in the near future. We must think of AI as a tool that helps us in the design process.
So, are you ready to design for an Ai driven web?
02. Riiid-Interactive Web 3D by Groffi Studio
9. Soft gradients and blurs
And now for the visual side of ui, it is worth mentioning some trends that have excelled this year and will probably continue to do so in the next year as well.
Until a year ago gradients were bold and vibrant but now, soft, multicolored pastel gradients are taking over. These gradients add dimension and atmosphere in UI design. You can see a compelling argument in the examples below.
01. Arter - NFT Website by Arounda UI/UX
02. Glassmorphism icons by Kihong Kim
03. ls.graphics concept by Ruslanlatypov for ls.graphics
05. Perry - Marketing site concept for (Healthcare b2b) by Julien Renvoye
07. link.builder Platform by Milo Studio
08. Human reborn sytem workspace by Mariusz Mitkow
