Mobile UI
Mobile Financial App
Design Technique:
This mobile financial app example focuses on neomorphism aesthetics marked by minimal and real-looking UI, a new take on skeuomorphism. While there are aesthetic limitations due to the minimalist approach, it is easy on the user's eyes and allows for critical elements to pop. Neomorphism is achieved through different shadow and highlight techniques while matching the object's base color to the foreground color.
How It's Developed:
To create images that appear as if they are actually inside the background, and are only visible because they're protruding from within
Design Purpose:
While this design aesthetic is popular, it not considered accessible due to the low contrast.
Design Drawbacks:
Neomorphism
Mobile Analytics Feature
How It's Developed:
The mobile analytics app example focuses on mixing opacity layers, shadows, and blurred lines while applying a top vibrant color to give off the illusion of neon lights. This aesthetic is great for users who prefer dark mode.
Design Purpose:
To provide vibrancy to users who prefer dark mode.
Design Drawbacks:
This design technique does not translate to light mode well.
Design Technique:
Neon Glow
Mobile Food App
Design Technique:
Informational Hierarchy & Layout Design
How It's Developed:
This mobile food app highlights examples of informational hierarchy and layout techniques. This example groups food recipes into recognizable categories for informational hierarchy, such as Featured, Popular, New, etc. In each card, the recipe grabs the user's attention through the picture, with the recipe's title sitting right under it. In addition, the rating stars of each recipe provide social proof to the user. This layout is clear and easily digestible through the swipeable rows of clickable cards. Once inside the recipe, the informational hierarchy makes it easy for the user to navigate the steps.
Design Purpose:
To categorize complex data into a digestible format.
Mobile Banking App
How It's Developed:
The mobile banking app highlights the use of shadows to create depth in the UI design. This design aesthetic helps emphasize elements to grab the user's' attention, or to create an in-set text field to highlight where to input information. It's subtle enough that it can be combined with other design features without overwhelming the user.
Design Purpose:
To emphasize hierarchy of information for users to reduce cognitive load.
Design Drawbacks:
This design technique may not always be accessible due to the low contrast shadows.
Design Technique:
Shadow Boxes
Mobile Beauty App
The mobile beauty app example highlights product layout while designing for emotional and behavioral change by tapping into the consumer psyche. When thinking through the user experience, making value propositions, creating social proof, and credibility appeals are essential to gain the trust and buy-in from the consumer. Tapping into the user's emotional state by designing urgent messages that create eustress through motivating cortisol persuades users to take action by clicking the "Buy Now" button.
Design Technique:
Emotional Appeal
How It's Developed:
Mobile Home Decor App
Design Technique:
Informational Hierarchy
How It's Developed:
This mobile home decor app shows more examples of informational hierarchy through the checkout phase. In addition, each product purchased is displayed from newest to oldest with easy-to-digest associated cost calculations.
Mobile Investment App
This mobile investment app is an example of how visuals can motivate users to make a behavioral change. In this example, seeing a different return on investments can cause users to make better financial choices. Utilizing visuals such as targets or graphs with supportive messaging to help make small behavioral changes can improve the user's desired outcome.
Design Technique:
Behavioral Design
How It's Developed:
Design Purpose:
To get a desired outcome from your user.
Design Drawbacks
Behavioral design needs to be applied ethically otherwise a company can receive backlash from its consumers.
Mobile Fashion App
This mobile fashion app focuses on an editorial hooks next to fashion layouts to entice the user to click on the article. Having strong editorial hooks creates an urgency to view, while also creating FOMO.
Design Technique:
Editorial Hook
How It's Developed:
Bath & Body Website
This bath & body website example shows that by designing mobile first it allows designers to make better design decisions when transitioning designs to web format. The design highlights how one can use informational hierarchy in images as well as in messaging support.
Design Technique:
Mobile First
How It's Developed:
