{"id":23743,"date":"2021-02-23T06:14:49","date_gmt":"2021-02-23T14:14:49","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=23743"},"modified":"2023-05-24T04:04:22","modified_gmt":"2023-05-24T11:04:22","slug":"phone-mockup-patterns","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/","title":{"rendered":"Best Phone Design Pattern Ideas for Your Mockup"},"content":{"rendered":"\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/DCTJVLW2v2HfG3v4abkBK0mtPCJoKadyfsOlgMDE7pK6FaASjaJpfl6z-oGwxf0Ss7_Ki7baaGc_KxTO_KuYfivDEar2lP0RaHPqSTySGQJL2TSsgyiSWukABHXakRhDbvGIkWgA\" alt=\"\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Want to create an awesome but not so time-consuming design? Phone design patterns will help you prepare a perfect design for a mockup. The best ones show you an easy way to present menus, features, and information to users. Ideally, a new user should intuitively know how to use your smartphone application just by looking at the design. For example, they might include:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u201cPlay buttons\u201d that people know will play a song or video.<\/li>\r\n<li>Hamburger menus that users know will open to show more navigation options.<\/li>\r\n<li>Icons that communicate to users what they will find by pressing each button.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>Whether you want to use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/wireframe-mockup-lofi-hifi-nomenclature\/\" target=\"_blank\" rel=\"noreferrer noopener\">lo-fi mockups without text or hi-fi mockups<\/a> that draw from a design system, the following represent some of the best options.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 20px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><strong><strong>Simple phone design pattern for an app\u2019s first page<\/strong><\/strong><\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Bi-56Y6tPIezrGqsMysMlIRWZyq4nY7vv03eNt8dbLoRsaAtysmSjo_e8Bjs5BgMpOr1jIekZaidVrsEQJSK5vyi9Dy3cuzBulXWAz6z3tc2BU0M3iAvxzkCBFbYyt1MRDLSGy5F\" alt=\"\" width=\"580\" height=\"320\" \/>\r\n<figcaption><a href=\"https:\/\/speckyboy.com\/mobile-device-mockup-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>The first page of a smartphone app should present information in a simple, straightforward way. This simple design from Adobe gives you an idea of how to place your introductory image, a short message, and a button.<\/p>\r\n\r\n\r\n\r\n<p>The design shows four well-matched colors. No matter which one you prefer, you get an eye-catching mockup that makes your logo stand out on the page.<\/p>\r\n\r\n\r\n\r\n<p>If you don\u2019t have a logo for your business or app, you can follow advice from Chiara Aliotta, the creative force behind the Italian design firm <a href=\"https:\/\/untilsunday.it\/meet-chiara-aliotta\" target=\"_blank\" rel=\"noreferrer noopener\">Until Sunday<\/a>. In an interview with UXPin, she says that some of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-trends-2020-chiara-aliotta\/\" target=\"_blank\" rel=\"noreferrer noopener\">latest branding and logo design trends<\/a> include:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Using custom typography instead of relying exclusively on drawings and pictures.<\/li>\r\n<li>Creating logos that express something about the brand\u2019s personality.<\/li>\r\n<li>Developing animated, interactive logos.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>A simple phone design pattern for your mockup can make your job easier, but you still need a memorable logo. A pattern and a mockup can\u2019t get the job done on their own.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 20px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><strong><strong>Productivity app transition mobile design pattern<\/strong><\/strong><\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/w_goGNYU5GHyUvLNKs7Ps9BeBcSK8_j7GXR_VddbwXeSOdpIH0PL72En6RHgQEr0YcWdlZB4NhLm06XUgTSnUKjYehwwO9XVDJA-EQWShrtPN8nPlW3ibGiPlaeNM1Hexjtl2R4z\" alt=\"\" \/>\r\n<figcaption><a href=\"https:\/\/www.mockplus.com\/blog\/post\/mobile-app-mockup\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>Aliotta believes that designers will rely more often on animated logos. You can also apply that approach to your entire phone application design pattern.<\/p>\r\n\r\n\r\n\r\n<p>In this design, you find a productivity app that tells users when they complete their goals. The app doesn\u2019t open immediately to a static page, though. Instead, the phone\u2019s screen dissolves away to reveal the app\u2019s workstation.<\/p>\r\n\r\n\r\n\r\n<p>The design works well because it engages users \u2013 exactly what you want from a productivity app! It also has a place to personalize the screen with the user\u2019s name. You could replace it with your client\u2019s name to make it a little more appealing. With UXPin, you can also make unique designs for each accomplishment in the mobile app design. Why not replace the existing icons and messages with real data that applies to the buyer\u2019s real life?<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 20px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><strong><strong>Smartphone design patterns for a messenger app<\/strong><\/strong><\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/1Q9gA6ruDHONB9fpEgp_jHTBQuIK8TjuHNnJjmUV8N2K27cQKwdeh7PPwYCsGjfNbkXQoU2yrMGSUi7bdbcY1m2SGh4AvFVjwwQXu6ZsBWdafwUHGhypUzTc-9x7n2f4G-OV8zl6\" alt=\"\" \/>\r\n<figcaption><a href=\"https:\/\/as2.ftcdn.net\/jpg\/01\/53\/12\/65\/1024W_F_153126551_95ExgDXyTazCKCmpjT1DprHfPPoiTlIT_NW1.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>You don\u2019t necessarily need to create a new design from scratch when you build a messaging app. Why reinvent the wheel when you really want to show how your technology works? A smartphone pattern like the one above provides all of the basic design elements that you need to present your app concept. So, all you need to do is simply include those in your design!\u00a0<\/p>\r\n\r\n\r\n\r\n<p>Later on, when you move from your design to a prototype, you may want to add some distinguishing features. When you first propose a messenger project, though, you don\u2019t need to worry about design specifics. You just want an attractive layout that displays texts and images from more than one person.\u00a0<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 20px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><strong><strong>Mobile design pattern for calendar and daily schedule<\/strong><\/strong><\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/pf6Qaiw8MYUvm4gKcNMU4ZSQmXmTCmpfZcCUAGM6ljj-Ngqt60jF5AfsJzH71c36CUyqkNSyjqaJ1aWdb-TRsakVbaDtMvGTUW3voMeaJ0kUgy0Sm97TMxCxDIKeI6Gb_S3rFqtm\" alt=\"\" \/>\r\n<figcaption><a href=\"https:\/\/dribbble.com\/shots\/4597903-App-Calendar-Plan-Mockup\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>Google Play and the App Store have hundreds of calendar apps that users can download for free (with advertisements) or at low prices. Whether you want to break into this area of the app market or you need to create an in-house scheduling app for a company, you can start with a phone pattern that lets you concentrate on how the app works instead of what it looks like.<\/p>\r\n\r\n\r\n\r\n<p>The above calendar app design works well because it lets users tap a date to see what they have scheduled for that day. It also lets multiple users share their accounts, which makes it useful for teams and families that need to communicate with each other quickly and easily.<\/p>\r\n\r\n\r\n\r\n<p>The only problem with this phone mockup design pattern is that it uses lorem ipsum instead of real text. You might not mind using nonsense text during the first stage of your design process. Eventually, though, you will want a prototype that shows potential users what they can really expect from your app.<\/p>\r\n\r\n\r\n\r\n<p>UXPin<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/replace-lorem-ipsum-with-real-data\/\" target=\"_blank\" rel=\"noreferrer noopener\"> replaces lorem ipsum with real data<\/a> instead of forcing you to waste time generating your own content for prototypes.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 20px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><strong>Get inspired by your design tool\u2019s library patterns<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>To create your mobile app design you need some inspiration and some of the best ones you can probably find in your UX tool pattern library!\u00a0<\/p>\r\n\r\n\r\n\r\n<p>At UXPin we have a lot of ready design patterns that you can use right away in your design or mockup, like <a href=\"https:\/\/www.uxpin.com\/material-design-ui-kit\">Material Design<\/a>. Take a look:\u00a0<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"438\" class=\"wp-image-23961\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/UXPin_LibraryPattern.png\" alt=\"UXPin LibraryPattern\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/UXPin_LibraryPattern.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/UXPin_LibraryPattern-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/UXPin_LibraryPattern-290x180.png 290w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>\r\n<figcaption>UXPin Library Pattern<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>We\u2019ve all kinds of screens for apps like reports, music albums, events, players, etc.\u00a0<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 20px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><strong>View your design with a phone preview<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>What\u2019s the best way to preview your mobile design? Well, a phone of course! Your design tool should have an option of phone preview so that you can see the design on the <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/uxpin-mirror\/\">phone model you choose<\/a>.\u00a0<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/mSJRbX7vd3qXXCHSLI1_qyx0pER3jB-xC0cVonDBN79V1twlrHBRQkKhxLUbNdlENh5_J4t9kKV10GvITfiiSTv_kN9s94xqHqn9J3Fi4eMbkW5Ep_sBifQJCnglD8WY65CJqzO_\" alt=\"\" \/>\r\n<figcaption>Preview design on the chosen phone model<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>You\u2019re then sure whether some of your design choices work or maybe there\u2019s room for improvement. Here\u2019s how it looks at UXPin phone <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/preview-and-share\/\">preview<\/a>:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"438\" class=\"wp-image-23960\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UXPin_PreviewFrame.png\" alt=\"UXPin PreviewFrame\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UXPin_PreviewFrame.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UXPin_PreviewFrame-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UXPin_PreviewFrame-290x180.png 290w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>\r\n<figcaption>UXPin PreviewFrame<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>We also have an option that can help you in viewing the prototype on your <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/uxpin-mirror\/\">real mobile device<\/a>! It makes your design come to life, allowing you to feel it and see how it behaves.\u00a0<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/hvUiozpqkofS0OlsZutM-Pq5CGRaNWt392lzCEZbycM5acH9xHuUOOv03VEHbS4_WNfazD9qy0j8zlzWbQkegJnlZQMpZw38RL7TBuFMt0rq4wIjamU_Hq0lMhRsecH3Hu-3m8uq\" alt=\"\" \/>\r\n<figcaption>UXPin Mirror App<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>Use the Mirror app on your device and scan the code to view the prototype.<\/p>\r\n\r\n\r\n\r\n<p><strong><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/fg_8VJf4B8uw0NCHdC__Zdvp0W3X8JW-DPrz-L5L3RA29lqxWJtJov168jdKfE53sBA96ncw4-s6M8roNOxf8GRi03ALZapGYLk-tFxSKA6p1xQYsas80MfgqD1crxwYZM6YXUxN\" width=\"624\" height=\"357\" \/><\/strong><\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 20px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><strong>UXPin makes it easier to create your own phone mockup design patterns<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>If you want to speed up the design process <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">use UI kits to create mockups<\/a>. No matter what approach you take, you will eventually need to develop elements that make your product unique.<\/p>\r\n\r\n\r\n\r\n<p>Now, that you have all the ideas from design patterns and options to preview your prototype &#8211; it\u2019s time to prepare a nice mockup!\u00a0<\/p>\r\n\r\n\r\n\r\n<p>UXPin gives you an easy way to create designs and prototypes that use real data. Additionally, you have all needed design pattern libraries if you want to get some inspirations or just need a quick mockup! <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Start a free trial today<\/a> to see how UXPin can turn your ideas into impressive prototypes. You might find the tool so easy to use that you stop relying on phone design patterns for mockups from other people.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Want to create an awesome but not so time-consuming design? Phone design patterns will help you prepare a perfect design for a mockup. The best ones show you an easy way to present menus, features, and information to users. Ideally, a new user should intuitively know how to use your smartphone application just by looking<\/p>\n","protected":false},"author":156,"featured_media":23744,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[349,348],"class_list":["post-23743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-design-patterns","tag-phone-mockup"],"yoast_title":"","yoast_metadesc":"Check these great phone design patterns to create your designs faster! These mobile design patterns for your mockup can point you in the right direction.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Best Phone Design Pattern Ideas for Your Mockup | UXPin<\/title>\n<meta name=\"description\" content=\"Check these great phone design patterns to create your designs faster! These mobile design patterns for your mockup can point you in the right direction.\" \/>\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\/phone-mockup-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Phone Design Pattern Ideas for Your Mockup\" \/>\n<meta property=\"og:description\" content=\"Check these great phone design patterns to create your designs faster! These mobile design patterns for your mockup can point you in the right direction.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-23T14:14:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-24T11:04:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/The-Best-Phone-Mockup-Design-Patterns.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: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=\"7 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\\\/phone-mockup-patterns\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"headline\":\"Best Phone Design Pattern Ideas for Your Mockup\",\"datePublished\":\"2021-02-23T14:14:49+00:00\",\"dateModified\":\"2023-05-24T11:04:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/\"},\"wordCount\":1150,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/The-Best-Phone-Mockup-Design-Patterns.png\",\"keywords\":[\"design patterns\",\"phone mockup\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/\",\"name\":\"Best Phone Design Pattern Ideas for Your Mockup | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/The-Best-Phone-Mockup-Design-Patterns.png\",\"datePublished\":\"2021-02-23T14:14:49+00:00\",\"dateModified\":\"2023-05-24T11:04:22+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"description\":\"Check these great phone design patterns to create your designs faster! These mobile design patterns for your mockup can point you in the right direction.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/The-Best-Phone-Mockup-Design-Patterns.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/The-Best-Phone-Mockup-Design-Patterns.png\",\"width\":1200,\"height\":600,\"caption\":\"The Best Phone Mockup Design Patterns\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/phone-mockup-patterns\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Phone Design Pattern Ideas for Your Mockup\"}]},{\"@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\\\/dfa8a72ffa3bb472596d4442937c7c6a\",\"name\":\"UXPin\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zbigniew-trzeciakuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Phone Design Pattern Ideas for Your Mockup | UXPin","description":"Check these great phone design patterns to create your designs faster! These mobile design patterns for your mockup can point you in the right direction.","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\/phone-mockup-patterns\/","og_locale":"en_US","og_type":"article","og_title":"Best Phone Design Pattern Ideas for Your Mockup","og_description":"Check these great phone design patterns to create your designs faster! These mobile design patterns for your mockup can point you in the right direction.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/","og_site_name":"Studio by UXPin","article_published_time":"2021-02-23T14:14:49+00:00","article_modified_time":"2023-05-24T11:04:22+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/The-Best-Phone-Mockup-Design-Patterns.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UXPin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"headline":"Best Phone Design Pattern Ideas for Your Mockup","datePublished":"2021-02-23T14:14:49+00:00","dateModified":"2023-05-24T11:04:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/"},"wordCount":1150,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/The-Best-Phone-Mockup-Design-Patterns.png","keywords":["design patterns","phone mockup"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/","name":"Best Phone Design Pattern Ideas for Your Mockup | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/The-Best-Phone-Mockup-Design-Patterns.png","datePublished":"2021-02-23T14:14:49+00:00","dateModified":"2023-05-24T11:04:22+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"description":"Check these great phone design patterns to create your designs faster! These mobile design patterns for your mockup can point you in the right direction.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/The-Best-Phone-Mockup-Design-Patterns.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/The-Best-Phone-Mockup-Design-Patterns.png","width":1200,"height":600,"caption":"The Best Phone Mockup Design Patterns"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/phone-mockup-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Best Phone Design Pattern Ideas for Your Mockup"}]},{"@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\/dfa8a72ffa3bb472596d4442937c7c6a","name":"UXPin","url":"https:\/\/www.uxpin.com\/studio\/author\/zbigniew-trzeciakuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23743","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\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=23743"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23743\/revisions"}],"predecessor-version":[{"id":44891,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23743\/revisions\/44891"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/23744"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=23743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=23743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=23743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}