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.

Components

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.

Interactivity

Without interactions, mobile app design appears dull and lifeless! We have a long list of triggers, actions, and animations to create immersive experiences for your users.

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.

Interactions allow you to create an immersive user experience with Actions and Animations through two types of Triggers:

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)

UXPin also allows designers to create “if-then” and “if-else” Conditional Interactions to execute different Actions or Animations, precisely as you would in a Javascript function. This powerful feature lets designers test high-fidelity prototypes accurately to get meaningful feedback from usability participants and stakeholders.

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.

You can read more about Variables and Expressions in our documentation.

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:

Components
States
Interactions
Page Transitions
Audio

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):

Home
Breathe
Relax
Sleep

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.

In Pages & Layers, you can also add new pages or click the overview icon to see all of your project’s pages.

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!