{"id":51922,"date":"2019-04-29T10:31:03","date_gmt":"2019-04-29T17:31:03","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=51922"},"modified":"2024-04-18T03:35:01","modified_gmt":"2024-04-18T10:35:01","slug":"mobile-mockups-app-ui","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui","title":{"rendered":"How To Use Mobile Mockups to Showcase Your App's UI"},"content":{"rendered":"

Building an app is time-consuming, expensive, and hard work, so the last thing you want is to go back and rework the fundamental design at the end of the project. But getting that valuable feedback early on is impossible without the right images; people won’t understand your ideas unless you can communicate them visually.\nTo solve this, many product designers use mockups to test and receive feedback on a near-final design before<\/em> the hard work of creating all the complex parts begins. It’s not just the design process that benefits: mockups are also useful for marketing, pitching, and building a portfolio.\n

<\/span>What Are Mockups?<\/span><\/h2>

\nA mockup is a high-fidelity visual representation of your finished app used to visualize your concept before you build the back-end of the app. They are referred to as ‘high-fidelity’ because they closely resemble the finished product.\nMockups are typically static images that display the UI but are not interactive. A high-fidelity representation with interactivity (e.g. the ability to click or swipe to see different menus) is called a prototype, rather than a mockup.\nA mockup normally consists of two elements that are combined to create the final image. A static image of your proposed user interface is added to a mockup template to show how the app would look when working on a device.\nFor example, this template showcases the app as if it were working on an iPhone XS:\n

<\/figure>\n \n<\/p>

<\/span>What Are The Benefits of Using Mockups?<\/span><\/h2>

\nA mockup is useful any time you need a visual representation of your app. For example, you can use them to showcase your ideas in a pitch to a potential client or to add visual flair to your portfolio.\nMockups are also great for marketing your app, both before and after you’ve built it. An early mockup enables you to start building an audience for your app and test user reactions to it before you’ve launched.\nFinally, mockups are essential during the development process. A high-quality image of your planned UI helps users and clients to deliver useful feedback on the design. This enables you to make design changes before you’ve built the back-end of the app; making these changes after the app has been built would be far more time-consuming and expensive.\n<\/p>

<\/span>How to Build a Mockup For Your App<\/span><\/h2>

\nWith the right tools, building a mockup for your app is quick and easy.\n<\/p>

<\/span>Step 1: Getting Ready<\/span><\/h3>

\nBefore you begin, you should first make sure you have planned out the basic structure and design of your site and, if necessary, got approval on that idea from the client (if you have one). Creating a mockup before you’ve done this is an inefficient use of your time – use sketches and wireframes to outline the basics first.\nNext, you’ll need to decide which screens you need to display. If you’re creating a mockup as a part of the design process, this may be every screen. However, a mockup for a pitch, portfolio or marketing piece may only need a couple of screens.\n<\/p>

<\/span>Step 2: Create a Visual Representation of Your UI<\/span><\/h3>

\nRemember those sketches and wireframes we mentioned in Step 1? It’s now time to turn those into a digital image. If you’re building this using a tool like Photoshop, Sketch, or Adobe XD, you may want to invest in a UI Kit<\/a>.\nThese kits are collections of graphical resources that have been created to aid UI design and include components such as checkboxes, progress bars, buttons, and full design views. Editing items from an existing kit will save time and help you create prototypes quicker.\nThe Atro Mobile Kit, for example, includes more than 100 mobile design views, each of which is fully-layered for easy editing:\n

<\/figure>\n \nRemember: Always check that you have selected the correct license for your use and that the file is compatible with your chosen image-editing software before making a purchase.\n<\/p>

<\/span>Step 2: Find and Download a Mockup Template<\/span><\/h3>

\nThe mockup template<\/a> is the part that turns your flat representation of your UI into a realistic 3D view of your app in use on a device, taking your image from good to great. There are thousands of these to choose from on Creative Market, so take your time and find one that is perfect for your audience.\nOne of our favorites is this Perfect Hands Mockup, which is great for marketing your app:\n

<\/figure>\n \nUsers looking for something a little simpler can’t go wrong with this option:\n
<\/figure>\n \n<\/p>

<\/span>Step 3: Add Your Images To The Mockup<\/span><\/h3>

\nOnce you’ve downloaded your mockup template and opened it in your favorite image-editing program, you should find that it consists of several layers. Some templates will have just a few, while more complex ones may have many.\nYou need to place your UI image in the correct layer so that it is displayed within the template. The specifics will depend upon which program you’re using, but the layer you need should be clearly labelled and easy to find.\nIf you’re working with Photoshop, the correct layer is likely to be a Smart Object. Click the Smart Object icon and replace the default content with your image; the template will automatically apply the correct visual effects to create the mockup.\n<\/p>

<\/span>Step 4: Get Sharing<\/span><\/h3>

\nThat’s it! In just three steps you’ve created a professional mockup of your app’s UI. Put it to work marketing your app or get it in front of users so that you can start receiving feedback.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

Building an app is time-consuming, expensive, and hard work, so the last thing you want is to go back and rework the fundamental design at the end of the project. But getting that valuable feedback early on is impossible without the right images; people won’t understand your ideas unless you can communicate them visually. To […]<\/p>\n","protected":false},"author":174,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[460,719,909],"topics":[],"class_list":["post-51922","post","type-post","status-publish","format-standard","hentry","category-creative-inspiration","tag-ui","tag-ux","tag-mockups"],"acf":[],"yoast_head":"\nHow To Use Mobile Mockups to Showcase Your App's UI - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use Mobile Mockups to Showcase Your App's UI\" \/>\n<meta property=\"og:description\" content=\"Building an app is time-consuming, expensive, and hard work, so the last thing you want is to go back and rework the fundamental design at the end of the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-29T17:31:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-18T10:35:01+00:00\" \/>\n<meta name=\"author\" content=\"James Evans\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Evans\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/mobile-mockups-app-ui\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/mobile-mockups-app-ui\",\"name\":\"How To Use Mobile Mockups to Showcase Your App's UI - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"datePublished\":\"2019-04-29T17:31:03+00:00\",\"dateModified\":\"2024-04-18T10:35:01+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/ed588822351da08748de623f3d034684\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/mobile-mockups-app-ui#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/mobile-mockups-app-ui\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/mobile-mockups-app-ui#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Use Mobile Mockups to Showcase Your App's UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Use Mobile Mockups to Showcase Your App's UI - Creative Market Blog","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:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui","og_locale":"en_US","og_type":"article","og_title":"How To Use Mobile Mockups to Showcase Your App's UI","og_description":"Building an app is time-consuming, expensive, and hard work, so the last thing you want is to go back and rework the fundamental design at the end of the","og_url":"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2019-04-29T17:31:03+00:00","article_modified_time":"2024-04-18T10:35:01+00:00","author":"James Evans","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"James Evans","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui","url":"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui","name":"How To Use Mobile Mockups to Showcase Your App's UI - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"datePublished":"2019-04-29T17:31:03+00:00","dateModified":"2024-04-18T10:35:01+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/ed588822351da08748de623f3d034684"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/mobile-mockups-app-ui#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Use Mobile Mockups to Showcase Your App's UI"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/51922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/174"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=51922"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/51922\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=51922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=51922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=51922"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=51922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}