Improve Your Design with This Calming App Design Template
Are you looking for an app design template to inspire your next project? Our design team has put together a calming app design template to showcase the possibilities of designing with UXPin.
The complete mobile app UI kit is suitable for iOS and Android devices, providing you with the foundation to build a beautiful product for yoga, meditation, or sleep aid – complete with audio files and soothing interactions.
Here’s what you’re going to learn in this article for the Calming app mobile template:
- Components: reusable components to edit the current app or build new features
- Interactivity: breathe life into your app with States, Interactions, and Page Transitions
- Audio/Media: uploading audio and adding controls for play, stop, pause, looping, autoplay, and muting
UXPin Features That Make App Design Easy!
Before we get into the calming mobile app UI kit, let’s explore UXPin’s app design features.
UXPin’s Components let you create reusable building blocks to maintain consistency and scale designs quickly. A Component could be a simple button comprising a rectangle and text, or a navigation bar complete with colors, states, and interactions.
UXPin components comprise of two aspects:
- Master Component – defines the Component’s properties
- Instance Component – a mirror of the Master Component
Any changes to the Master Component will immediately copy to its Instances. You can unlink any Instance so that it becomes an independent group of elements for you to edit.
UXPin makes it easy to edit Master Components. Instead of searching for the master, select any Instance, click the purple Edit Master button, make your changes, and click Back to complete.
You’ll find all of your Components in the Design System Libraries to the left of UXPin’s Canvas. If you have an extensive design system, you can sort Components by category or use the built-in search feature.
Check out our documentation to learn more about using Components in UXPin.
There are several ways to create interactivity in UXPin, but we’ll touch on two foundational elements, States and Interactions.
States let you create several different properties and interactions for a single element or Component, triggered by various user actions. Setting States for elements and Components is the first step to making your high-fidelity prototypes mirror the final product’s functionality.
For example, a button can have a default, hover, active, and disabled state and switch between each according to the user or system’s actions. You can set a button’s state to disabled, shaded grey, and unclickable until a user completes a form. When the required fields are complete, the button changes color, and the user can click submit.
- Element triggers: user interactions—click/tap, hover, swipe, focus
- Canvas triggers: a change in the canvas state (engineers will refer to this as a system trigger)
Interactions occur through a Trigger-Action sequence and can include a simultaneous Action/Animation:
- Trigger—user taps/clicks a button
- Action/Animation—opens a new page (Action) with a Slide up page transition animation (Animation)
Designers can take interactivity beyond what’s possible in most design tools using UXPin’s Variables and Expressions.
- Variables: store user inputs and take actions based on the provided data inside the prototype.
- Expressions: form validation, computational components like shopping carts, or checking if a password meets specific criteria.
Media: Images, Audio & Video
UXPin lets you upload images and other static assets to your designs. You can also store these assets (like logos and custom icons) in your Design System Library for other team members to use.
Video and audio are often missing from high-fidelity prototypes because design tools lack the functionality to store and interact with this media. UXPin lets you link Audio and Video to your high-fidelity prototypes with interactions like Play, Stop, and Pause.
Now that you have an introduction to UXPin’s core features, it’s time to take a quick walk through our calming mobile app template.
Calming App Template Walk Through
The Calming App is one of four free app templates available from UXPin’s App Examples library. Our Calming app lets you explore five UXPin features in action:
- Page Transitions
Download and Import the Calming App Template
If you’d like to follow along, sign up for a 14-day free UXPin trial.
- Download our free Calming App design template
- Unzip the file
- Create a new project in UXPin
- Drag and drop the Calming App.uxp file from the unzipped file
- Once the file uploads, you’re ready to go!
How to Preview
You can preview a prototype in the browser to test navigation and interactions. Click the dark triangle icon above the right sidebar or use the keyboard shortcut Ctrl + P to open the preview in a new browser tab.
You can also use UXPin Mirror to preview your prototypes on iOS and Android devices. Here how:
- Download the Mirror app—Android, iOS
- Click the mobile icon above the right sidebar to reveal a unique QR code
- Open the Mirror app and follow the instructions to scan your project’s bar code
We have used Foundation for our Calming app, one of UXPin’s five built-in Design Libraries. You can use Foundation to build new pages or features for your app. You can also create your own design system in UXPin.
The Calming app template features four pages (app screens):
You can view and switch between these pages by clicking the Pages & Layers icon in the bottom left or using the keyboard shortcut Alt + 1—get a complete list of UXPin’s keyboard shortcuts here.
Calming App Template – Home Page
The home page features a text block and three large button Components, which link to the app’s other three pages.
Remember, to edit a Component, you must first select it and click the Edit Master button top left of the canvas or right sidebar under Instance.
Calming App Template – Breathe Page
The Breathe page features a text box, a hidden Breathe Component, and a circular Start button Component, that triggers multiple Actions and Animations and changes States.
Make sure you’re in Pages & Layers in the left sidebar and click the Start layer. Click Interactions in the right sidebar, and you’ll see the following Interactions:
- Hide 2 elements: hides the Start button and text box
- Show breathe: shows the hidden Breathe Component
- Set State Breathe to Breathe In: changes the Start button’s State
You can also check out the Breathe layer’s Interactions by selecting it in the left sidebar and clicking Interactions.
The Breathe page would work nicely with audio, like adding a guided meditation.
Calming App Template – Relax Page
The Relax page of our Calming app is where things get interesting! We have a text block with eight audio Components.
To find the audio make sure you’re in the Pages & Layers window in the left sidebar, expand the Sound Component, and then the Button layer. You’ll see four layers, including one labeled Audio. When you click the Audio layer, its settings will appear in the right sidebar. Under AUDIO, you’ll see a URL for the audio file, including four options—the Calming app is set to Loop.
You can change the audio by pasting the URL to a hosted file.
Calming App Template – Sleep Page
Lastly, the Sleep Page features a text block, CTA, and setting moon animation. You can explore each of these layers using the Pages & Layers window in the left sidebar.
Have fun playing with the Calming app template. Check out our documentation to learn more about UXPin’s features and how to use the design editor.
More Design Templates
UXPin has three other app templates you can copy for inspiration or familiarize yourself with our design editor.
- Smart Home: a mobile app template for controlling smart electronics in your home.
- Exhibition: a modern web design template for an event.
- Auction: an auction/eCommerce app template with scrollable content, product page, and inputs.
Get Started With a UXPin Trial
Ready to dive in and start designing with UXPin? Sign up for a 14-day free trial to the versatility and creativity of creating apps, websites, and digital products with the world’s most advanced design tool!