UX

8 Popular Trends in UI Design on Dribbble in 2020

Welcome to check our traditional summer review of some hot trends in UI design for web and mobile we found on Dribbble this year. Packed with examples, as always.

Within the never-ending debates of the viability and practicality of designs shared on Dribbble, it still presents a sort of popular playground for creative people to not only show real-life projects but also creative experiments and new approaches. Let’s see what got super popular in Dribbble shots on user interfaces this year.

Neumorphism

Neumorphism, or soft UI, presents a design approach in between skeuomorphism and flat UI. The neumorphic interfaces are not as realistic as skeuomorphic were back in 2012-13 but they aren’t also as simplified as absolutely flat designs. The screens of UI concepts designed in this style usually look neat and eye-pleasing, elegantly returning volume back to the layout. However, the practical aspect of neumorphism is now a subject of hot debates in design blogs and forums, with some designers talking about its low viability and usability. Nevertheless, like it or not, see it as a concept or a practice, on Dribbble it’s definitely one of the prominent trends this year.

Neumorphic player design by Filip Legierski.

Nice, clean, and neumorphic app design concept for a smart home by Fireart Studio.

Compass app exploration with neumorphic approach by Marc Merle.

Neumorphic app design concept for an audiobook application by Khonok Lee.

3D Hero Illustrations

Well, hero illustrations are nothing new or revolutionary. In recent years, the trend of using catchy custom or stock graphics in the hero section has established itself solidly. But this year this trend showed a noticeable shift to getting even more diverse and also turn to adding volume due to 3D graphics and animations. Therefore, webpages get more depth and volume while 3D illustrations get into more and more interesting compositions and plots.

Web page design with cute and catchy hero illustration by Tran Mau Tri Tam.

Well-crafted and playful hero illustration adds fun and brings up the theme of fitness in the web design concept by Ramotion.

Catchy and playful 3D art for hero illustration by Mike Creative Mints

Beautiful 3D illustration created by Leo Natsume in collaboration with Adobe.

The impressive design concept of a webpage with animated 3D graphics for hero illustration by Minh Pham

Animated 3D illustration on a web page designed by Tubik.

Monochrome Palettes

As a counterbalance to super bright and vibrant palettes that seemed to be the distinguishing feature of Dribbble designs, this year monochromatic designs also demonstrate the considerable presence in both web and mobile interfaces, often being a part of the ultra minimalistic approach.

Elegant monochromatic web design concept by Samuel Octavianus.

Web page design in the black-and-white palette by Achraf Elkaami.

Monocromatic app design with custom graphics by Taras Migulko.

Typographic Diversity

This point is not only about using diverse fonts but even more about using different variations of the same typeface in one interface. Bold and italic, filled and outline, big text blocks in all caps, playing with font sizes and text colors – all that makes the design concepts presented on Dribbble catchy and diverse in the presentation of text parts on web or mobile layouts. And sure, designers never stop trying new font combinations and testing fresh typefaces properly amplifying the mood and message.

Web design by Tran Mau Tri Tam

Web design by Zhenya Rynzhuk features both regular and italic font in one text block, also different in color.

Bold typography getting filled on hover and engaging users to interact by Green Chameleon.

Overlaying Scroll Animation

One of the well-checked ways to impress website or landing page visitors is a creative approach to scrolling interactions. One of the Dribbble design trends at this perspective is using overlaying effect that supports the integrity of the whole page as well as strengthens the aesthetic satisfaction.

Impressive animation for a touristic website with overlaying custom illustrations by Tubik.

Horizontal overlaying animation on the elegant webpage designed by Green Chameleon.

Mobile UI Illustrations

Interface illustrations don’t stop or slow down their progress, especially as a part of mobile user experience. Although the trend of integrating illustrations into screen layouts has been popular for a couple of years already, this year it got boosted and demonstrated the great diversity of themes and bright design solutions. One of the reasons is the rise of design resources like the Ouch vector library that offers a variety of graphics in different styles for different UX points and needs. So, UI designers that don’t draw custom graphics, get more flexibility in this aspect and can make their design concepts more engaging and creative with illustrations. Also, many studios and design teams work with illustrators or have the one on board to bring out the designs that reflect this trend of custom illustrations in mobile applications.

These mobile screens created by Icons8 designer Denis Danilov feature cure outline illustrations in Cole style from the Ouch vector library.

The mouthwatering interface illustrations for the categories of food in mobile app design by Anastasia.

Mobile screens concept with 3D illustrations by Kerwin1840

Mobile app concept with cure dog illustrations by Riotters.

Mobile app for booking accommodation with atmospheric custom illustrations by Outcrowd.

Interactive Pages

This year dribbblers are demonstrating more and more activity at the perspective of interactivity and playfulness of web pages. Trying to both impress and engage the visitors, designers seem to push their creative experiments to the new level, with movable backgrounds, erasable elements, networks responding users cursors, and much more. This way they perhaps get some developers nervous, though, as some of the solutions look super cool for Dribbble but may take much thought and effort to implement them on the websites.

Interactive and engaging webpage with 3D illustrations by Anton Tkachev.

Interactive background for a furniture website designed by Tubik.

Volumetric and impressive website design about space education by Unfold.

Irregular Grids

Another trend continuing to diversify Dribbble this year is experimenting with grids. Various asymmetric, broken and irregular grids help designers to find the original performance of content in web and mobile interfaces, catching users’ eyes, and never letting them get bored.

Web design concept featuring the grid experiments for an article page by Zhenya Rynzhuk.

Monochromatic website design for a photographers’ portfolio with irregular grids and typographic diversity by Green Chameleon.

Sure, this set of trends is only a tip of an iceberg, and obviously what’s trendy on Dribbble does not mean getting broadly used on real websites and mobile applications. Yet, I never stop believing that all creative experiments are of crucial value, pushing the limits, broadening the horizons, and engaging designers to try, discuss or event argue about new tricks, approaches, and techniques. To grow, we have to take challenges, dare, probe, and analyze. Who knows what UI design trends will turn from the experiment into the best looks for the favorite products in the future. See you soon in our next reviews of design trends!

About the author: Marina Yalanska, tech/design writer and researcher, managing editor for Icons8 Blog.

Check the inspiring collections of dashboard designs and mobile UI designs with illustrations, review the benefits of Ouch 2.0 vector illustrations, and learn how modern and traditional web design are mixed.

 

icons8

Recent Posts

How legendary icons were born

We see tens and hundreds of icons on our computer and phone screens every day.…

9 hours ago

Make Face Generator the Product of the Year

Face Generator is nominated for the Golden Kitty Award on Product Hunt! Your support means…

2 weeks ago

Bad apple design

We've already shown you some weird icon requests. Now it's time to show some challenging…

4 weeks ago

How to design a Christmas Instagram story

Let’s design Christmas and New Year visuals for Instagram stories. We’ll use Lunacy, a 100%…

1 month ago

Meet Fugue 3.0: Fresh music to make your videos a blast

Finding the right music for a video can be challenging. And buying a proper license…

1 month ago

Face Swapper: Swap faces like never before, for free

We've all had enough fun with face swapping. It's time to put jokes aside. Meet…

1 month ago

This website uses cookies.