While going to the movies, museums, or events for inspiration are all on pause, there are still many places to find inspiration to get the creative juices flowing. And with this month’s roundup of the top mobile interaction designs, it’s clear that creatives have been making good use of their time indoors.
Let’s jump right into the designs we picked out this month.
1. Milk Online Store App by Dannniel for Marcato Studio
Grocery shopping is one of the few things that will get us out of the house these days, so this dairy app caught our attention, of course. It starts with a sleek and minimal black and white design and offers mini interactions that make this app concept such a visual delight. For example, figuring out where to buy a specific brand of dairy involves a sea of spots with product names pulsating on the screen. Tapping one pops little cows beaconing out their location onto a map to show the different stores that carry those items. And lastly, tapping a particular cow—location, we mean—populates a list of dairy items that can be found there. In all, this is a fun approach to grocery shopping that really takes its design outside the box.
Source: Dribbble
2. Cooking App Interaction by Cuberto
One of the top ways to find joy while in quarantine is cooking: spending hours making something new and then getting to enjoy the results! I’m not sure if we’re exactly ready for a cooking competition just yet, but this app concept shows what one might look like. This mobile interaction design is focused on fluid motions. As you start to swipe up on the recipe contest, a fluid black shape starts to take it over and eventually consumes the entire screen when you fully swipe up to reveal how these recipe contests work. The background remains black, and as you move down the content on the page, there is a white shape moving fluidly to encourage sign-ups. Swiping up on this call to action again changes the background color to white and confirms your entry.
Source: Dribbble
3. Camera Mode Switch by Minh Pham
Next, we have a simple yet powerful mobile interaction design from Minh Pham. This design turns the usual process of switching camera modes on its head and makes it much sleeker. Swiping to the left and right changes the mode from the camera to video. The motion makes it appear to be switching sides on a cube of sorts. Besides, the coloring on the bottom half of the screen changes as well and offers options for changing to the front-facing camera or changing the tint.
Source: Dribbble
4. Animated Tab Bar by Cuberto
Tab bar options are often overlooked: they need to be easy to understand and useful, but can they be interactive as well? Cuberto thinks so! This concept animates four icons in an app’s tab bar. Tapping on each option brings it to life: the flame grows, the creation icon switches settings, the volume increases, the meditation flower opens, and (our favorite) the koala wiggles its ears. This motion interaction design reminds us that even design “bread and butter” concepts can be rethought. Most apps we use each day incorporate tab bars, but they don’t have to be static or monotone. They can come to life with color and animation if we let them.
Source: Dribbble
5. Washing Machine by Dimest
As a great example of neumorphism, this washing machine app brings the various options we’re used to pressing on the physical machine to life via a mobile app. Some of us in apartment buildings already pay for laundry via the app, so why not take it all the way and have the app be the central hub for everything washing machines? This app concept demonstrates two mobile interaction designs. After tapping a button to start the machine, you can pick the water level by swiping your finger up and down what looks like a test tube with ebbing and flowing water in it. Next, tapping on the spin cycle speed sets the representation of the washing machine in motion and shows how fast your clothes will spin.
Source: Dribbble
That’s all we have for this month, but be sure to check out our last edition featuring the best mobile interaction designs of spring 2020.
Feeling inspired? Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! Sign up for a free 15-day trial of Proto.io today and get started on your next mobile app design.
