Top 5 Mobile Interaction Designs of September 2021

Somehow fall is here, and we’re sure it’s going to be a different season than anyone anticipated. But the thing that keeps so many designers going is creating new projects to grow and showcase their skills. This month we didn’t miss a beat and offer our roundup of the top mobile interaction designs we encountered.

1.Recipe Generator by Gleb Kuznetsov

This mobile app design is several types of cool. First off, it is voice-activated. When a user explains what kind of dish they want to cook, the app pulls up the beginning of a recipe, as well as some ingredients they might need to add to their cart below. Tapping on “view all steps” expands the steps in the recipe card down the screen and sends the ingredients further down the screen. When a user swipes up on the ingredients, the recipe disappears, and they are able to scroll through all ingredients they need. Tapping on the plus sign in the right corner of the item turns the icon green and shows the quantity and the ability to delete it with a garbage can icon. As an added effect, tapping on an ingredient to add it to the cart flings it into the cart in the top right corner.

2. Mobile First Product Gallery by Meghan Regior

This e-commerce concept has an Instagram-feel to it, letting images lead. First, all products are visible simply using images. Swiping up shows the product names and zooms in slightly on the products. Another view is possible as well, showing a swipable product list, like a feed on Instagram. Tapping on a certain product brings up the price, quantity desired, and ability to add it to the cart. In many ways, the line between social media and retail has been blurring over the past few years. This mobile app design takes it further and gives a window into what a retail app that was completely inspired by formats that have proven especially engaging on social media.

3. Workout App Concept by Duy Luong

We could not resist the simple but oh so cute animations in this mobile interaction design. The fact that the character completes the workout and even rests with the user is a nice touch from the designer. It effectively shows users how they should do the exercise and displays helpful information such as how much longer they have in that section and their heart rate. The designer kept the interface clear and easy to understand so that the user can focus on their workout. The only two available buttons are used to pause the workout or exit entirely to further this goal.

4. Toggle Button by Nikola Matošević

There are countless dating apps out there, and some even allow you to differentiate between looking for friendship and romance. This toggle animation is meant to differentiate between casual and relationship modes. When the heart icon is selected, the toggle bar is green, and when swiped to the right, the heart icon tumbles over to the right and turns the flame outline into the bolder version. At the same time, the entire bar turns red. This is a fun way to denote different modes in an app.

5. Weather App Animation by Lollypop Design Studio

Weather apps are usually seen as utility apps and not always the most design-forward. This mobile app design that we picked out takes an interesting approach by bringing the weather pattern to life. Along the right side of the screen, the user can swipe through yesterday, today, and tomorrow’s weather. They can select a city using the drop-down arrow and see the temperature right below on the left side. The landscape is displayed colorfully below, and the scene depicts what can be expected in terms of the weather. For example, a tree in Mumbai shows a rain shower, and another in Shillong is nearly blown over due to the windy conditions.

That’s all for September but be sure to check out last month’s edition, featuring the best mobile interaction designs of August 2021.

Feeling inspired? Proto.io helps you bring your idea to life in no time, with no coding skills required. It’s ideal for UX designers, entrepreneurs, product managers, marketers, students, and anyone with a great idea. Sign up for a free 15-day trial to start building your first prototype today!

Originally published at https://blog.proto.io on September 22, 2021.

--

--

--

Build high-fidelity fully interactive mobile app prototypes quickly. No coding required. Get a 15-day free trial at: https://proto.io/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

#Peoplenotparking

[50] Build the app with our community

Design Against Populism: Using Empathy to Drive Solutions

MODO: Transforming the Payment Experience in the Argentine Banking Industry

7 Things Developers Need Designers to Know

A Powerful Tool to Help Us Understand User Experience

Microlearning & TimelineJS

How accessible is your design portfolio?

Abstract illustration showing a website with content that can only be accessed by using stairs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Proto.io

Proto.io

Build high-fidelity fully interactive mobile app prototypes quickly. No coding required. Get a 15-day free trial at: https://proto.io/

More from Medium

Top 5 Mobile Interaction Designs of January 2022

4 App Icon Design Tips

UI trends to keep tabs on in 2022!

Best Google Fonts to use for your next SaaS project