{"id":32349,"date":"2021-11-18T04:56:00","date_gmt":"2021-11-18T12:56:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=32349"},"modified":"2021-11-19T05:41:14","modified_gmt":"2021-11-19T13:41:14","slug":"design-template-calming-app-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/","title":{"rendered":"Improve Your Design with This Calming App Design Template"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template-1024x512.png\" alt=\"Improve Your Design with This Calming App Design Template\" class=\"wp-image-32350\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 \u2013 complete with audio files and soothing interactions.<\/p>\n\n\n\n<p>Here&#8217;s what you&#8217;re going to learn in this article for the Calming app mobile template:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Components:<\/strong> reusable components to edit the current app or build new features<\/li><li><strong>Interactivity: <\/strong>breathe life into your app with States, Interactions, and Page Transitions<\/li><li><strong>Audio\/Media:<\/strong> uploading audio and adding controls for play, stop, pause, looping, autoplay, and muting<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/kx5B6iIA1NE_V-mtrqvj_TmMJOeEJyFNMBV09r7MxptoRMsoUDGImnW1Dy6m3zNo_LLEHLClDHck7z1Tvu_c7kvRZGrXoYZiABUiPSCbuCrF1ZEuy6Oj7ohVHQfLP0DtvetVhQTb\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-features-that-make-app-design-easy\">UXPin Features That Make App Design Easy!<\/h2>\n\n\n\n<p>Before we get into the calming mobile app UI kit, let&#8217;s explore UXPin&#8217;s app design features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-components\">Components<\/h3>\n\n\n\n<p>UXPin&#8217;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.<\/p>\n\n\n\n<p>UXPin components comprise of two aspects:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Master Component &#8211; defines the Component&#8217;s properties<\/li><li>Instance Component &#8211; a mirror of the Master Component<\/li><\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>UXPin makes it easy to edit Master Components. Instead of searching for the master, select any Instance, click the purple <strong>Edit Master<\/strong> button, make your changes, and click <strong>Back<\/strong> to complete.<\/p>\n\n\n\n<p>You&#8217;ll find all of your Components in the Design System Libraries to the left of UXPin&#8217;s Canvas. If you have an extensive design system, you can sort Components by category or use the built-in search feature.<\/p>\n\n\n\n<p>Check out our documentation to learn more about <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/components\/\" target=\"_blank\" rel=\"noreferrer noopener\">using Components in UXPin<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interactivity\">Interactivity<\/h3>\n\n\n\n<p>Without interactions, mobile app design appears dull and lifeless! We have a long list of <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#triggers\" target=\"_blank\" rel=\"noreferrer noopener\">triggers<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#actions\" target=\"_blank\" rel=\"noreferrer noopener\">actions<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#animations\" target=\"_blank\" rel=\"noreferrer noopener\">animations<\/a> to create immersive experiences for your users.<\/p>\n\n\n\n<p>There are several ways to create interactivity in UXPin, but we&#8217;ll touch on two foundational elements, States and Interactions.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>States<\/strong><\/a> 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&#8217;s functionality.<\/p>\n\n\n\n<p>For example, a button can have a default, hover, active, and disabled state and switch between each according to the user or system&#8217;s actions. You can set a button&#8217;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.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Interactions<\/strong><\/a> allow you to create an immersive user experience with <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#actions\" target=\"_blank\" rel=\"noreferrer noopener\">Actions<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#animations\" target=\"_blank\" rel=\"noreferrer noopener\">Animations<\/a> through two types of Triggers:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Element triggers: user interactions\u2014click\/tap, hover, swipe, focus<\/li><li>Canvas triggers: a change in the canvas state (engineers will refer to this as a <em>system trigger<\/em>)<\/li><\/ul>\n\n\n\n<p>Interactions occur through a Trigger-Action sequence and can include a simultaneous Action\/Animation:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Trigger\u2014user taps\/clicks a button<\/li><li>Action\/Animation\u2014opens a new page (Action) with a Slide up page transition animation (Animation)<\/li><\/ol>\n\n\n\n<p>UXPin also allows designers to create &#8220;if-then&#8221; and &#8220;if-else&#8221; <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Interactions<\/a> 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.<\/p>\n\n\n\n<p>Designers can take interactivity beyond what&#8217;s possible in most design tools using UXPin&#8217;s Variables and Expressions.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Variables:<\/strong> store user inputs and take actions based on the provided data inside the prototype.<\/li><li><strong>Expressions:<\/strong> form validation, computational components like shopping carts, or checking if a password meets specific criteria.<\/li><\/ul>\n\n\n\n<p>You can read more about <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Expressions<\/a> in our documentation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-media-images-audio-video\">Media: Images, Audio &amp; Video<\/h3>\n\n\n\n<p>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 <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design System Library<\/a> for other team members to use.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#video-and-sound\" target=\"_blank\" rel=\"noreferrer noopener\">Video and audio<\/a> 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.<\/p>\n\n\n\n<p>Now that you have an introduction to UXPin&#8217;s core features, it&#8217;s time to take a quick walk through our calming mobile app template.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-calming-app-template-walk-through\">Calming App Template Walk Through<\/h2>\n\n\n\n<p>The Calming App is one of four free app templates available from <a href=\"https:\/\/www.uxpin.com\/examples#section-app-examples\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s App Examples library<\/a>. Our Calming app lets you explore five UXPin features in action:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Components<\/li><li>States<\/li><li>Interactions<\/li><li>Page Transitions<\/li><li>Audio<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-download-and-import-the-calming-app-template\">Download and Import the Calming App Template<\/h3>\n\n\n\n<p>If you&#8217;d like to follow along, <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">sign up for a 14-day free UXPin trial<\/a>.\u00a0<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/examples\/calming-app\" target=\"_blank\" rel=\"noreferrer noopener\">Download our free Calming App design template<\/a><\/li><li>Unzip the file<\/li><li><a href=\"https:\/\/www.uxpin.com\/docs\/dashboard\/projects#creating-a-project\" target=\"_blank\" rel=\"noreferrer noopener\">Create a new project in UXPin<\/a><\/li><li>Drag and drop the <strong>Calming App.uxp<\/strong> file from the unzipped file<\/li><li>Once the file uploads, you&#8217;re ready to go!<\/li><\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-preview\">How to Preview<\/h3>\n\n\n\n<p>You can <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/preview-and-share\" target=\"_blank\" rel=\"noreferrer noopener\">preview a prototype<\/a> in the browser to test navigation and interactions. Click the dark triangle icon above the right sidebar or use the keyboard shortcut <strong>Ctrl + P<\/strong> to open the preview in a new browser tab.<\/p>\n\n\n\n<p>You can also use <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/uxpin-mirror\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Mirror<\/a> to preview your prototypes on iOS and Android devices. Here how:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Download the Mirror app\u2014<a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.uxpin.mirror\" target=\"_blank\" rel=\"noreferrer noopener\">Android<\/a>, <a href=\"https:\/\/apps.apple.com\/us\/app\/uxpin-mirror\/id1446596008?ls=1\" target=\"_blank\" rel=\"noreferrer noopener\">iOS<\/a><\/li><li>Click the mobile icon above the right sidebar to reveal a unique QR code<\/li><li>Open the Mirror app and follow the instructions to scan your project&#8217;s bar code<\/li><\/ul>\n\n\n\n<p>We have used <a href=\"https:\/\/get.foundation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Foundation<\/a> for our Calming app, one of UXPin&#8217;s five <a href=\"https:\/\/get.foundation\/\" target=\"_blank\" rel=\"noreferrer noopener\">built-in Design Libraries<\/a>. You can use Foundation to build new pages or features for your app. You can also <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#creating-a-design-system\" target=\"_blank\" rel=\"noreferrer noopener\">create your own design system in UXPin<\/a>.<\/p>\n\n\n\n<p>The Calming app template features four pages (app screens):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Home<\/li><li>Breathe<\/li><li>Relax<\/li><li>Sleep<\/li><\/ul>\n\n\n\n<p>You can view and switch between these pages by clicking the <strong>Pages &amp; Layers <\/strong>icon in the bottom left or using the keyboard shortcut <strong>Alt + 1<\/strong>\u2014get a complete list of <a href=\"https:\/\/www.uxpin.com\/docs\/getting-started\/shortcuts-cheat-sheet\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s keyboard shortcuts here<\/a>.\u00a0<\/p>\n\n\n\n<p>In <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#pages\" target=\"_blank\" rel=\"noreferrer noopener\">Pages<\/a> &amp; <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#layers\" target=\"_blank\" rel=\"noreferrer noopener\">Layers<\/a>, you can also add new pages or click the overview icon to see all of your project&#8217;s pages.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"364\" src=\"https:\/\/lh3.googleusercontent.com\/q0kffGhYS5LOmRqERAChE4ftqb7N-KOPSlEGnDQ8rmGI54CHjnE0yBq-CG_I7clfAAXEXVcORhOkc3lRvfa7GvyvRA5cKrEKZMaPo1C1Za1pXj2XB3WlAAtByMrLkLayr3f_AIBj\"><\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-calming-app-template-home-page\">Calming App Template &#8211; Home Page<\/h3>\n\n\n\n<p>The home page features a text block and three large button Components, which link to the app&#8217;s other three pages.&nbsp;<\/p>\n\n\n\n<p><em>Remember, to edit a Component, you must first select it and click the <\/em><strong><em>Edit Master<\/em><\/strong><em> button top left of the canvas or right sidebar under <\/em><strong><em>Instance<\/em><\/strong><em>.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/_LETT7FTPQkiHvRYniPHTNQv3DcJ0kx7CCCuKhvPhSwYKpJ_ou9TPPnMz-9iQnZ_Rit-BP5frnxs43MKvZsE37gAKrq57C9S6Y94bt5UJQE_bkiymtt7IbKrlgSPpzHRfa9T2x4r\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-calming-app-template-breathe-page\">Calming App Template &#8211; Breathe Page<\/h3>\n\n\n\n<p>The Breathe page features a text box, a hidden <em>Breathe<\/em> Component, and a circular <em>Start<\/em> button Component, that triggers multiple Actions and Animations and changes States.<\/p>\n\n\n\n<p>Make sure you&#8217;re in Pages &amp; Layers in the left sidebar and click the Start layer. Click Interactions in the right sidebar, and you&#8217;ll see the following Interactions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Hide 2 elements:<\/strong> hides the Start button and text box<\/li><li><strong>Show breathe:<\/strong> shows the hidden Breathe Component<\/li><li><strong>Set State Breathe to Breathe In:<\/strong> changes the Start button&#8217;s State<\/li><\/ul>\n\n\n\n<p>You can also check out the Breathe layer&#8217;s Interactions by selecting it in the left sidebar and clicking Interactions.<\/p>\n\n\n\n<p>The Breathe page would work nicely with audio, like adding a guided meditation.\u00a0<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/wlIko8XzOqhMKAIF1o2UcDY091Uu8DHPWDuhF2ljLsbdmqNEqOmi57ipFS4ZpRYjcxqsqkq9aqQNkXp0pV1U1hd4sAtGJo0y1tEfiAeIHA2xBl5hAVwNlcOz4mPNvzG1BYoM1paV\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-calming-app-template-relax-page\">Calming App Template &#8211; Relax Page<\/h3>\n\n\n\n<p>The Relax page of our Calming app is where things get interesting! We have a text block with eight audio Components.<\/p>\n\n\n\n<p>To find the audio make sure you&#8217;re in the Pages &amp; Layers window in the left sidebar, expand the Sound Component, and then the Button layer. You&#8217;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&#8217;ll see a URL for the audio file, including four options\u2014the Calming app is set to Loop.<\/p>\n\n\n\n<p>You can change the audio by pasting the URL to a hosted file.\u00a0<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/zo1pvS5AuTKguNxFf9Gq1CsczW2LXG9LoxIht_G3dqypLgXxNtTF59W8XngD496eXkNeG_Uu1HIBpiEM2HKARHW2u0ls5cPLQy2SwIrLZWn2Dwlyx1XposkiN9uFNLpKmAqH4gnw\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-calming-app-template-sleep-page\">Calming App Template &#8211; Sleep Page<\/h3>\n\n\n\n<p>Lastly, the Sleep Page features a text block, CTA, and setting moon animation. You can explore each of these layers using the Pages &amp; Layers window in the left sidebar.<\/p>\n\n\n\n<p>Have fun playing with the Calming app template. Check out our <a href=\"https:\/\/www.uxpin.com\/docs\/getting-started\/downloading-and-using-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a> to learn more about UXPin&#8217;s features and how to use the design editor.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-more-design-templates\">More Design Templates<\/h2>\n\n\n\n<p>UXPin has three other app templates you can copy for inspiration or familiarize yourself with our design editor.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/examples\/smart-home\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Smart Home<\/strong><\/a><strong>:<\/strong> a mobile app template for controlling smart electronics in your home.<\/li><li><a href=\"https:\/\/www.uxpin.com\/examples\/exhibition\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Exhibition<\/strong><\/a><strong>:<\/strong> a modern web design template for an event.<\/li><li><a href=\"https:\/\/www.uxpin.com\/examples\/auction\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Auction<\/strong><\/a><strong>:<\/strong> an auction\/eCommerce app template with scrollable content, product page, and inputs.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-get-started-with-a-uxpin-trial\">Get Started With a UXPin Trial<\/h2>\n\n\n\n<p>Ready to dive in and start designing with UXPin? <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a 14-day free trial<\/a> to the versatility and creativity of creating apps, websites, and digital products with the world&#8217;s most advanced design tool!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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<\/p>\n","protected":false},"author":3,"featured_media":32350,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,205,4,6],"tags":[],"class_list":["post-32349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-mobile-design","category-ui-design","category-ux-design"],"yoast_title":"","yoast_metadesc":"Looking for a design template that you can recycle or learn from? Create an interactive mobile app of a calming application \u2013 step by step.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Improve Your Design with This Calming App Design Template | UXPin<\/title>\n<meta name=\"description\" content=\"Looking for a design template that you can recycle or learn from? Create an interactive mobile app of a calming application \u2013 step by step.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improve Your Design with This Calming App Design Template\" \/>\n<meta property=\"og:description\" content=\"Looking for a design template that you can recycle or learn from? Create an interactive mobile app of a calming application \u2013 step by step.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-18T12:56:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-19T13:41:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Improve Your Design with This Calming App Design Template\",\"datePublished\":\"2021-11-18T12:56:00+00:00\",\"dateModified\":\"2021-11-19T13:41:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/\"},\"wordCount\":1513,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Improve-Your-Design-with-This-Calming-App-Design-Template.png\",\"articleSection\":[\"Blog\",\"Mobile Design\",\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/\",\"name\":\"Improve Your Design with This Calming App Design Template | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Improve-Your-Design-with-This-Calming-App-Design-Template.png\",\"datePublished\":\"2021-11-18T12:56:00+00:00\",\"dateModified\":\"2021-11-19T13:41:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Looking for a design template that you can recycle or learn from? Create an interactive mobile app of a calming application \u2013 step by step.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Improve-Your-Design-with-This-Calming-App-Design-Template.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Improve-Your-Design-with-This-Calming-App-Design-Template.png\",\"width\":1200,\"height\":600,\"caption\":\"Improve Your Design with This Calming App Design Template\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-template-calming-app-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Improve Your Design with This Calming App Design Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Improve Your Design with This Calming App Design Template | UXPin","description":"Looking for a design template that you can recycle or learn from? Create an interactive mobile app of a calming application \u2013 step by step.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/","og_locale":"en_US","og_type":"article","og_title":"Improve Your Design with This Calming App Design Template","og_description":"Looking for a design template that you can recycle or learn from? Create an interactive mobile app of a calming application \u2013 step by step.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/","og_site_name":"Studio by UXPin","article_published_time":"2021-11-18T12:56:00+00:00","article_modified_time":"2021-11-19T13:41:14+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Improve Your Design with This Calming App Design Template","datePublished":"2021-11-18T12:56:00+00:00","dateModified":"2021-11-19T13:41:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/"},"wordCount":1513,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template.png","articleSection":["Blog","Mobile Design","UI Design","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/","name":"Improve Your Design with This Calming App Design Template | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template.png","datePublished":"2021-11-18T12:56:00+00:00","dateModified":"2021-11-19T13:41:14+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Looking for a design template that you can recycle or learn from? Create an interactive mobile app of a calming application \u2013 step by step.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/Improve-Your-Design-with-This-Calming-App-Design-Template.png","width":1200,"height":600,"caption":"Improve Your Design with This Calming App Design Template"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-template-calming-app-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Improve Your Design with This Calming App Design Template"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=32349"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32349\/revisions"}],"predecessor-version":[{"id":32355,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32349\/revisions\/32355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/32350"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=32349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=32349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=32349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}