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.
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.
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.
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.
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!