Playful UI Runs the World

Emotion in design. Why most popular services get rebranding with playful and fun elements. What’s the secret sauce of this approach? HappyX appHave 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 color 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. Quiz time???? 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. 1. Concept by Nathan Riley 2. Concept by Ludmila ShevchenkoNow 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. Round shapes Let’s take a look at three immense social media platforms—Pinterest, Twitter, Facebook, and the common characteristics in their design language. Pinterest 2016 look vs. today’s screenshotsThe 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. Twitter 2017 with today’s lookTweet-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. Yesterday’s Facebook vs. todayThe 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. Google home page 2008 vs. today’s versionTime 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? ;) https://medium.com/media/383209a8e26401d83f90617492e10a42/hrefWhat are the o

Playful UI Runs the World
Emotion in design. Why most popular services get rebranding with playful and fun elements. What’s the secret sauce of this approach? HappyX appHave 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 color 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. Quiz time???? 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. 1. Concept by Nathan Riley 2. Concept by Ludmila ShevchenkoNow 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. Round shapes Let’s take a look at three immense social media platforms—Pinterest, Twitter, Facebook, and the common characteristics in their design language. Pinterest 2016 look vs. today’s screenshotsThe 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. Twitter 2017 with today’s lookTweet-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. Yesterday’s Facebook vs. todayThe 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. Google home page 2008 vs. today’s versionTime 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? ;) https://medium.com/media/383209a8e26401d83f90617492e10a42/hrefWhat 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. Concept of the landing pageThat’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. 1. Events app 2. Festival pageIn 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&Illustrations 1. Sunshine studio page 2. Travel app conceptPatterns 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 product Typography Design festival TypographicsTypography 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.” Ball chair by Eero Aarnio. Photo: Eero Aarnio ArchivesIt feels like we all need such a chair these days but, at least, we have this feeling using many apps and websites today. Conclusion 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. More to read A more detailed story about gradients and how to achieve the best results using them in your design— Oh Mamma, I’m in love with Gradient A look into the bold approach in design— Dare to Be a Bright Brand If you want to see my designs and stay connected, follow me on Dribbble, Instagram, Twitter Thanks for reading! Playful UI Runs the World was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.