Dribbble’s (Almost) Undiscovered Treasures: UI/ UX Design

The online world is an ever-expanding source of inspiration. To narrow it down, we’ve searched far and wide across Dribbble to find a selection of our favorite UI and UX shots. Here they are.

One of the most common questions designers are asked is “where do you find inspiration?”. This can often be a tough question, as inspiration comes in so many forms. It can find its way into our minds subconsciously, through memories, fleeting moments, glimpses of scenes, trends that surround us and more. But at the same time, no one can deny the power of our good buddy, the internet, in helping us seek inspiration.

For designers, the internet is so awash with social platforms through which you can discover beautiful web design and other forms of art, that it can be a little overwhelming. That’s why we’ve decided to narrow it down, journeying through one of our favorite professional platforms, Dribbble, to handpick 12 amazing posts by UI and UX designers:

Adrián Somoza for Bont™

If you’re going to do 50 shades of grey, this is the way to do it. We could watch this short video for hours. Argentinian designer Adrián Somoza has created the most perfectly balanced composition – each screen has been meticulously designed and the transitions are as smooth as can be. This kind of multi-layered gallery, paired with parallax, can work well for showing off your best projects, or your products on an online store.

Withings

When it comes to onboarding new users to a mobile app, you generally want the UI to be as friendly and welcoming as possible. In the health tracking app featured below, the clean, yet playful design is just that. Paris-based digital design studio, Withings, created this onboarding template that they use to announce new features and offer tutorials. Not only is the color palette absolutely spot-on, the delightful illustrations add a sense of intimacy, which is just what is needed to make a health app that extra bit more inviting.

Cuberto

The mobile version of this lighting store’s website, designed by London-based digital creative agency, Cuberto, takes scrolling to another level. When it comes to mobile web design, we’re used to pretty much endless vertical scrolling. Here, Cuberto have added a sense of 3D when flicking through the horizontal gallery slideshow, plus a simple animated video in the background, while reading the text. Other than the chic design of the website itself, also note the way they’ve incorporated sleek animations into the video demo itself, gliding the mockup cellphone gently around the screen in order to enhance the general vibe.

Zhenya Rynzhuk for Sochnik

Digital design studio Sochnik’s Dribbble account is a fantastic place to head for a drop of web design inspiration. In fact, we couldn’t pick just one piece to share with you, so here are two of their many wonderful posts. These are two concepts for the same project – a website for One Minimal Festival – a cinema, art, music and design event. See how they’ve explored two very diverse ideas and unique animations, while sticking to the same minimalistic aesthetics. In both designs, they’ve incorporated plenty of white space, while simultaneously offering all the necessary information and discretely emphasizing the ‘Get tickets’ button – the most important CTA (call to action). The UX couldn’t be better, with the precise button design, clear navigation, engaging animation and sense of hierarchy.

Thomas Tacvorian

As you may or may not know, sharing your work in progress (a.k.a. #WIP) is the thing to be doing – on your portfolio, Instagram feeds, or anywhere else you can think of. Interactive designer, Thomas Tacvorian, has done just that, posting his online design portfolio in-the-making on Dribbble. We love the clean design, big bold text and interactive hover effects that add a touch of personality, while ensuring a simple menu and clear navigation. This is definitely one to follow up on.

Alexander Olssen

Designers spend so much time working with clients or working on projects with specific briefs, that sometimes it can be useful to free yourself of those restraints and just do something for yourself. UI/ UX designer, Alexander Olssen, has used this concept for a meditation app to experiment with gradients and scrolling techniques. He’s also utilized the “cone” gradient as a unique type of progress indicator, which can be a helpful tool when designing websites for short attention spans. All of this comes together to form an aesthetic monochrome design and an overall soothing experience.

Greg Elzerman for Asana

It’s no secret that more and more tech brands are now incorporating illustration and animation in their web and mobile design. Motion designer Greg Elzerman, along with illustrator Anna Hurley, created this piece for Asana’s premium page. The handmade touch and the theme of growth compliment the otherwise technical information presented, making it more approachable. The textual content grows together with the illustrated plants, thanks to the subtle use of animation.

Anton Skvortsov

We love this wonderfully delicate website design, with its video background that integrates seamlessly as you scroll, and the animated lettering and illustration. All the animated elements – from flying birds to a spouting whale – come together perfectly to form a cohesive look and feel. UI/ UX designer, Anton Skvortsov, has also nailed the typography, with the sensitive nuances that come in the form of italics and color changes, plus the ‘Ocean’ title that begins in the center of the screen and animates its way into the site’s menu.

Outcrowd

Integrating illustration and animation in web design is definitely on trend right now – and design studio, Outcrowd, have mastered the art in this landing page for an online store. The pastel shaded illustration is just the right combination of cute and edgy, blending in perfectly with the color palette and angular shapes of the product photos. This is a great example in which the illustration seamlessly merges with the rest of the website, creating a cohesive look.

Raffaele Avallone

Tinder for shoes? Yes please! We love this concept for an online store wishlist. The simple UI is all that’s needed to transform this shopping experience into a half-game that’s a very welcome (and practical) replacement for the standard ‘add to cart’ button. The icons used for the button design also offer an immediately clear and familiar call-to-action. Get swiping!

NinoKun

This work in progress onboarding animation is both friendly and informative. The custom illustrations by designer NinoKun set the scene, and paired with animation, give a sense of movement that works well with the concept of the app. Looks like these beauties will make for a great introduction to the app, once combined with the right copy and buttons.

Eager for more inspiration? This article is part of a series that puts a spotlight on some of Dribbble’s most precious treasures. Here’s the previous article on lettering and typography design.

Text Dana Meir

Main Image Zhenya Rynzhuk for Sochnik