The weather is warming up and summer is right around the corner. While it’s sure to be a different kind of summer that we anticipated, there are still many ways to make the most out of it. Designers around the globe have been busy creating around the clock, making good use of the near 24 hours they’re now expected to spend in their homes. This month we present you with a fresh batch of mobile interaction designs to inspire you to create something great of your own.
1. iOS IQ App Animation by Mike | Creative Mints
With so much time spent inside, mobile apps have been a great way to pass the time. In this app concept, Mike offers a colorful exploration of how an IQ test might work on mobile. Tapping into the daily task allows you to pick up where you left off. The task, in particular, is a pattern and asks the user to select the missing shape. We enjoy the way the time ticks along, with a yellow line cutting through the purple background to indicate how much time is left for that question. Selecting an answer from the options below, the pattern flips the shape into the empty square and turns into a green checkmark to show that it was correct. The buttons involved are animated in very unique ways. When tapped, the buttons condense into a circle and drop down the screen to make way for the next content that is about to be loaded on the screen.
Source: Dribbble
2. Sticky Notes Interaction by Sang Nguyen for Orizon: UI/UX Design Agency
Sticky notes and reminders, whether on mobile or in real life on our desks and refrigerators, help us remember the important things in our lives. If you’ve noticed, the notes app that comes standard on iOS has updated its look to feel more like a notepad, but nothing quite compares to this mobile interaction design concept. We love the act of peeling a sticky note off our monitors once a project is complete, and this concept brings that energy to mobile. Scrolling through shows multicolored notes on different topics. Tapping on the top right corner and swiping to the bottom left corner mimics the action of removing a physical sticky note (although, it usually makes more sense to remove them from bottom to top!). And icons with options appear below and enable you to delete, archive, or share based on which icon you drag the note towards.
Source: Dribbble
3. Journal Keeping App by Ahmed Hasan for Capable Team
Another great activity while stuck indoors is journaling. You might chronicle your day, doodle, or plan your next business idea. With this app concept it’s possible to keep all your ideas on your phone. This mobile interaction design has a beautiful peach background and offers artsy mini journals to separate them into different categories. Swiping through them and tapping on the journal labeled “Design Bulbs” flips it from portrait to landscape orientation and opens up the journal. Swiping up and down allows you to explore different entries.
Source: Dribbble
4. Smartwatch App Interaction by Shakibul Islam for isavelev
Online shopping has become even more popular as many physical stores remain closed. This ecommerce mobile interaction design explores watch options and uses microinteractions that we couldn’t keep our eyes off of. First, when tapping on a certain smartwatch to learn more, the product name, pricing, and product information move onto the screen from left to right. This movement differs from the movement of the product image that simply appears on the screen, and this difference draws a user’s attention to it. The second microinteraction that caught our attention was adding or subtracting products from the cart. A tap of the plus button bumps the quantity to the left and increases it by one. Conversely, the minus button bumps the quantity to the right and decreases it.
Source: Dribbble
5. Design System by The Glyph
This app concept could potentially help designers choose colors and fonts for their projects. Tapping into the color section brings up color groupings with many different shades to learn about and choose from. Tapping on a particular color brings it into focus in the center of the screen, with similar options just a swipe away to the left and right. One interaction we were particularly drawn to is the movement of the color information from left to right on the screen.
Source: Dribbble
That’s all for this month but be sure to check out last month’s edition, featuring the best mobile interaction designs of April 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.
