Emotion in design. Why most popular services get rebranding with playful and fun elements. What’s the secret sauce of this approach?
Have you ever thought what stand behind UX flows we create? How a different corner radius can change the perception of the elements in the app. How colour adds an emotion we designers embed into DNA. Why even the most popular services update their design adding more fun feeling.
I’d like to share my thoughts with you today but first, let’s play a game.
Here’s the task: in each pair, choose the album you like the most.
Rhombus for Kanye, circle for Dua Lipa. Your choice?
How about Ed Sheeran vs. Billie Eilish round?
Last but not least, Frank Ocean vs. Katty Perry.
What’s your score—did you get more rhombuses or circles?
Remember your result and meanwhile, choose the design concept below which you prefer more, from the first sight.
Now with Nostradamus-like skills, I predict the following:
If you got more rhombuses, you’ve selected the first concept. If more circles, then the second concept was your choice.
Am I right? Add your results in the comments to the article (but please, only if my prediction was right, you know).
While this is just a game, here’s my idea behind it.
Music has rhythm, genre, mood — certain parameters you can’t see but feel. The same things are in design. Apart from a visual harmony designer tends to create, there’s a mood and feeling people receive as the message when they see this design for the first time. Sometimes it happens subconsciously (suggested by Sigmund).
Rap and pop, folk and R&B, dark color scheme vs. bright spectrum, emphasis on typography vs. accent on illustration — that’s the different directions to select so that in the end, you’ll receive the unique message in a shape of song, artwork or design. And I believe, as everyone has a certain mood and tune, we feel and choose differently what match us the most.
Apart from a visual harmony designer tends to create, there’s a mood and feeling people receive as the message when they see the design for the first time.
But right as in music, there are hits that find a road to everyone. Like Ocean Eyes by Billie Eilish and Shape of You by Ed Sheeran (ok, the last one is arguable, I know, but we all lived in that reality when this song was everywhere, right).
So, what are the key things to make a product sound like Bohemian Rhapsody?
Galileo, Galileo Figaro—Characteristics of playful UI.
Let’s take a look at three immense social media platforms—Pinterest, Twitter, Facebook, and the common characteristics in their design language.
The current Pinterest UI we’re used to can be described this way—rounded corners of the pictures, rounded buttons, rounded everything. It feels good and relevant to its’ functionality. Service itself has a very minimal color palette so that you pay all attention to the content.
In previous years, the app was a bit more formal though already brought some nice, trustworthy feeling.
Tweet-tweet. It’s been a long time since Twitter got its’ cuteness-like design. Apart from already familiar for us rounded shapes of buttons, posts, and bubbles, there is a bold text. It brings that feeling of accessibility. And a character compared to the old less expressive Twitter.
The latest update in a list, my Facebook switched to a new look only last week. It suggests such a popular nowadays dark mode but hell no, that’s not my favorite reality.
The good old light mode in a new version brings lightness as there are more white colors and the grey tint is clearer. It looks fresh. The new design should work for totally different groups of users, whether it’s teenagers or senior people as it’s both modern and accessible.
Nevertheless, what’s the main idea behind these media—hobby-inspiration-I’ve-spend-hours-watching-pics service, sharing news, and GIFs, or a platform to express all the anger on politics and climate change—all of them have an accurate, smooth UI design with similar elements.
Round shapes, bold typography, and a neutral color palette with only one accent brand color—these pioneer changes first arrived with iOS 11 back in 2017. Since that time, massive brands continue to evolve in this direction, where the main force of attraction is content.
The previous, more straight-angle reality was about reliability in the first place. The sphere was still under development and not all people were comfortable with technologies.
Time flies and now, it feels like this subtle-fun design approach of a new era has been chosen to make users feel trust in the services. As if they want to say “Go on, share all your thoughts, we don’t provide your data to third parties”. Right, Facebook? 😉
What are the other approaches to bring a fun feeling into the design?
We all live in a yellow submarine—Color & Waves
When I say color, I mean COLOR. Lots of colors.
That’s the most instant mood booster. While we can agree or disagree on each color meaning, the combination of various bright colors, both cold and warm, can bring an unexpected, unique solution as you see in the examples.
In the Events app, there are not only rounded shapes and bright gradients but also, lots of waves-like shapes are used. I love this approach as that’s one more way to interact with the user’s mood. Sometimes these waved shapes bring the feeling of uncovering further details like the pics of the events in the third screen.
In certain cases, colorful waves also can symbolize…music. Literally.
Patterns and illustrations can catch your attention right from the beginning. There are no limits on how they can look like.
Patterns are like a kaleidoscope game some of us luckily had in childhood (if you’re 90’s kid). They’re full of magic.
With the help of illustrations, you can create a whole new universe. And actually, not always they should take a large space on the page. For instance, Facebook likes to present us certain info with cover illustrations, whether it’s Coronavirus info, your anniversary on the platform, or a national holiday. These pics are small but they bring us a good, positive, or supporting feeling.Why illustration is a vital part of your productAnd what makes illustrations stand outuxdesign.cc
Typography alongside with illustration is an advanced feature. It takes time to work on it cooperating whether with type designers or dedicating time to learn how it works. The fact is, a crafted new font will have an emotion, a character. In the example above, the website looks remarkable and fun thanks to typography (and colors).
Besides, custom typography will bring a unique vision of the website or the app.
Roundness and bright colors bring me a certain resemblance with a furniture hit of the ‘70s—Ball chair by Eero Aarnio. In some releases, it was described as “The Globe Chair, with its space capsule look, offers the necessary privacy when things need to be calmer.”
It feels like we all need such a chair these days but, at least, we have this feeling using many apps and websites today.
Some services are ready for bright, gradient-like design and unique typography. Others have different tasks and priorities like for example, the emphasis on the content in the first place.
The constant thing is that all apps strive to find a connection with users. To make them feel trust and believe in the honesty and safety of the service. To spend time there in a relaxed way.
Whether it’ll be achieved with rounded shapes and bold typography or bright colors and illustrations, the created design, in the end, can look fun and playful. That’s the emotional connection with the user, and from the other side, the enjoyable user experience—the win-win result for both companies and customers.
I believe we’ll see more and more designs like this and the future of design lies in this direction.
This article originally appeared on Muzli
Want to improve your User Experience?
There’s a lot to think about, when it comes to user experience. That’s what we’re here for and it’s what we love doing. We place people (users) at the heart of everything we do throughout our design process.
It’s our aim to make our clients and users lives easier and more successful.
If you have a UX project you want some help with, we have the right solution for you. Email us at info@origin–interactive.co.za or visit our website https://origin-interactive.co.za/contact-us/ for more informatio