{"id":13320,"date":"2016-07-14T18:18:55","date_gmt":"2016-07-14T07:18:55","guid":{"rendered":"https:\/\/creately.com\/blog\/?p=13320"},"modified":"2025-10-29T15:46:54","modified_gmt":"2025-10-29T04:46:54","slug":"ui-mock-up-templates","status":"publish","type":"post","link":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/","title":{"rendered":"UI Mock-up Templates to Create Unique User Interfaces"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div><p><span style=\"font-weight: 400;\">A UI mockup is a realistic representation or a visual draft of the design of a website or a web\/mobile application. A UI mockup reflects the app&#8217;s or the site&#8217;s\u00a0design elements, such as the color scheme, images, logos, typography, buttons etc., hence representing the final appearance of the app\u2019s interface. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Following are some helpful UI mockup templates that are created professionally using Creately\u2019s\u00a0<\/span><a href=\"https:\/\/creately.com\/lp\/mock-up-generator\/\"><span style=\"font-weight: 400;\">UI Mockup Tool<\/span><\/a><span style=\"font-weight: 400;\">. You can use them to illustrate the user interfaces of websites and mobile\/website applications you are designing. Simply click the template to use it as a template or edit\u00a0it online.<\/span><\/p>\n<ul>\n<li><a style=\"line-height: 1.5;\" href=\"#Sign-in\">UI Mock-up Template of a Sign in Page<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Web Store\">UI Mock-up Template of a Web Store- Shopping Cart<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Web Page\">UI Mock-up Template of a Web Page<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Apple\">UI Mock-up Template of Apple eMail Client &#8211; Compose Screen<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Blog\">UI Mock-up Template of a Blog<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Contact Form\">UI Mock-up Template of a Website Contact Form<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Twitter\">UI Mock-up Template of a Twitter Page<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Wizard\">UI Mock-up Template of a Software Installation Wizard<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Facebook\">UI Mock-up Template of a Facebook Page<\/a><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"#Payroll\">UI Mock-up Template of a Payroll System<\/a><\/li>\n<\/ul>\n<h3><a name=\"Sign-in\"><\/a>UI Mockup Template of a Sign in Page<\/h3>\n<p><span style=\"font-weight: 400;\">This template is a basic member login mock-up. It includes two fields to enter member login information and a signup button for those who are not members yet. In addition, there is also an option for those who have forgotten the login password. Simply click on the image to make any changes that you want or to use this as a template.<\/span><\/p>\n<div id=\"attachment_13321\" style=\"width: 515px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=fxsi28bc1&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13321\" class=\"wp-image-13321 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Sign-In.png\" alt=\"UI Mockup Template of a Sign in Page\" width=\"505\" height=\"680\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Sign-In.png 505w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Sign-In-223x300.png 223w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/a><p id=\"caption-attachment-13321\" class=\"wp-caption-text\">Click on the image to edit online<\/p><\/div>\n<h3><a name=\"Web Store\"><\/a>UI Mockup Template of a Web Store- Shopping Cart<\/h3>\n<p><span style=\"font-weight: 400;\">This template shows a UI mock-up of a Webstore or an <a href=\"https:\/\/creately.com\/diagram\/example\/he7cxejx1\/e-Commerce%20Database\">eCommerce website<\/a>, more specifically of the shirts category page under the Men\u2019s section. You can use this template as an inspiration to create a new eCommerce website UI mock-up. Click on the image to change the details as it fits the requirements of your very own online store. \u00a0\u00a0\u00a0<\/span><\/p>\n<div id=\"attachment_13322\" style=\"width: 920px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=ipt6bcpc1&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13322\" class=\"wp-image-13322 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png\" alt=\"UI Mockup Template of a Web Store- Shopping Cart\" width=\"910\" height=\"736\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png 910w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup-300x243.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup-768x621.png 768w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/a><p id=\"caption-attachment-13322\" class=\"wp-caption-text\">Click on the image to edit online<\/p><\/div>\n<h3><a name=\"Web Page\"><\/a>UI Mock-up Template of a Web Page<\/h3>\n<p><span style=\"font-weight: 400;\">The following template represents a UI mock-up of a website page (the Homepage of the website). \u00a0It is a simple tab style website, with a header (where the tabs are displayed), a sub-header (where a header image can be displayed) and a footer (where links to other landing pages could be displayed).<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> In between the header and the footer, more details are presented in a user-friendly manner. You can use other web UI controls available in the app to edit the template to match your needs. Simply click the image and start modifying online. <\/span><\/p>\n<div id=\"attachment_13323\" style=\"width: 830px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=gdu2ndrh3&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13323\" class=\"wp-image-13323 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Web-Page-Mockup-Template-e1468480205297.png\" alt=\"UI Mockup Template of a Web Page\" width=\"820\" height=\"583\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Page-Mockup-Template-e1468480205297.png 820w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Page-Mockup-Template-e1468480205297-300x213.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Page-Mockup-Template-e1468480205297-768x546.png 768w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/a><p id=\"caption-attachment-13323\" class=\"wp-caption-text\">Click on the image to edit online<\/p><\/div>\n<h3><a name=\"Apple\"><\/a>UI Mockup Template of Apple eMail Client &#8211; Compose Screen<\/h3>\n<p>Here is a UI mockup template of the composer screen of the Apple email client. The necessary OSX controls you need to design OSX applications are available within the app. Click on the image to use this as a template or change it according to your requirements.<\/p>\n<p><span style=\"font-weight: 400;\">In case you are also designing an iPhone application, here are some<\/span><a href=\"https:\/\/creately.com\/blog\/diagrams\/iphone-mockup-templates\/\"> <span style=\"font-weight: 400;\">iPhone UI Mockup Templates<\/span><\/a><span style=\"font-weight: 400;\"> to help you out. \u00a0\u00a0<\/span><\/p>\n<div id=\"attachment_13324\" style=\"width: 1060px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=gsy78l4h1&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13324\" class=\"wp-image-13324 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Apple-Mail-Client-Mockup-Compose-Screen.png\" alt=\"Mockup Template of Apple eMail Client - Compose Screen\" width=\"1050\" height=\"735\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Apple-Mail-Client-Mockup-Compose-Screen.png 1050w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Apple-Mail-Client-Mockup-Compose-Screen-300x210.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Apple-Mail-Client-Mockup-Compose-Screen-768x538.png 768w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Apple-Mail-Client-Mockup-Compose-Screen-1024x717.png 1024w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/a><p id=\"caption-attachment-13324\" class=\"wp-caption-text\">Click on the image to edit\u00a0online<\/p><\/div>\n<h3><a name=\"Blog\"><\/a>UI Mockup Template of a Blog<\/h3>\n<p>This is a UI mockup template of a blog page. You can find more UI controls such as social share buttons, blog posts, breadcrumb links, menus etc. that are needed to design blog page UI mock-ups in the app. Click on the image to edit the template as per the requirements of your blog design.<\/p>\n<div id=\"attachment_13325\" style=\"width: 831px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=gsy7b69e1&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13325\" class=\"wp-image-13325 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Creately-Blog-UI-Mockup.png\" alt=\"UI Mockup Template of a Blog\" width=\"821\" height=\"1533\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Creately-Blog-UI-Mockup.png 821w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Creately-Blog-UI-Mockup-161x300.png 161w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Creately-Blog-UI-Mockup-768x1434.png 768w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Creately-Blog-UI-Mockup-548x1024.png 548w\" sizes=\"auto, (max-width: 821px) 100vw, 821px\" \/><\/a><p id=\"caption-attachment-13325\" class=\"wp-caption-text\">Click on the image to edit online<\/p><\/div>\n<h3><a name=\"Contact Form\"><\/a>UI Mockup Template of a Website Contact Form<\/h3>\n<p><span style=\"font-weight: 400;\">The UI mockup template below is of a website contact form. The essential contact information such as the address, email address and a contact number is added on the right side. Below these details is a map marking the location of the business. On the left side of the page is a contact form that visitors can use to book an appointment. Click on the image to edit this template according to your needs.<\/span><\/p>\n<div id=\"attachment_13326\" style=\"width: 830px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=ge169ncn1&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13326\" class=\"wp-image-13326 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Contact-Form-UI-Mockup.png\" alt=\"UI Mockup Template of a Website Contact Form\" width=\"820\" height=\"1215\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Contact-Form-UI-Mockup.png 820w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Contact-Form-UI-Mockup-202x300.png 202w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Contact-Form-UI-Mockup-768x1138.png 768w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Contact-Form-UI-Mockup-691x1024.png 691w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/a><p id=\"caption-attachment-13326\" class=\"wp-caption-text\">Click on the image to edit online<\/p><\/div>\n<h3><a name=\"Twitter\"><\/a>UI Mockup Template of a Twitter Page<\/h3>\n<p><span style=\"font-weight: 400;\">The following UI mock-up template shows a Twitter page (for a personal or a business account). Creately offers all icons necessary to create UI mockups for commercial applications such as Twitter. Simply click the image to use it as a template and modify it according to your own design ideas. <\/span><\/p>\n<div id=\"attachment_13327\" style=\"width: 980px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=gdtul6kf1&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13327\" class=\"wp-image-13327 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Twitter-Page-Mockup-Template.png\" alt=\"UI Mockup Template of a Twitter Page\" width=\"970\" height=\"830\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Twitter-Page-Mockup-Template.png 970w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Twitter-Page-Mockup-Template-300x257.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Twitter-Page-Mockup-Template-768x657.png 768w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/a><p id=\"caption-attachment-13327\" class=\"wp-caption-text\">Click on the image to edit online<\/p><\/div>\n<h3><a name=\"Wizard\"><\/a>UI Mockup Template of a Software Installation Wizard<\/h3>\n<p><span style=\"font-weight: 400;\">The following template represents a UI mock-up of a software installation wizard. Wizards, which are commonly used to install software, describe the steps in an installation process of a software. This template shows one such step, and the UI mockup templates of the following steps are linked to it to simulate the real time scenario (click the \u2018Next\u2019 button to access the next template). Click on the image and proceed to modify it as you want. \u00a0\u00a0<\/span><\/p>\n<div id=\"attachment_13328\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=iprwwqt21&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13328\" class=\"wp-image-13328 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Software-Installation-Wizard-Step-1.png\" alt=\"UI Mockup Template of a Software Installation Wizard\" width=\"570\" height=\"420\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Software-Installation-Wizard-Step-1.png 570w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Software-Installation-Wizard-Step-1-300x221.png 300w\" sizes=\"auto, (max-width: 570px) 100vw, 570px\" \/><\/a><p id=\"caption-attachment-13328\" class=\"wp-caption-text\">Click on the image to edit\u00a0online<\/p><\/div>\n<h3><a name=\"Facebook\"><\/a>UI Mockup Template of a Facebook Page<\/h3>\n<p><span style=\"font-weight: 400;\">Here is a UI mockup template of a Facebook page. In the designing process of a social media application such as Facebook, you can quickly design \u00a0UI mock-up templates like this with the help of the app. Click on the image to use this as a template or adjust it as you want. <\/span><\/p>\n<div id=\"attachment_13329\" style=\"width: 975px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=ipqjv8vd1&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13329\" class=\"wp-image-13329 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Facebook-Mockup-Template.png\" alt=\"One of the UI Mock-up Templates Available in Creately \" width=\"965\" height=\"880\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Facebook-Mockup-Template.png 965w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Facebook-Mockup-Template-300x274.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Facebook-Mockup-Template-768x700.png 768w\" sizes=\"auto, (max-width: 965px) 100vw, 965px\" \/><\/a><p id=\"caption-attachment-13329\" class=\"wp-caption-text\">Click on the image to edit\u00a0online<\/p><\/div>\n<h3><a name=\"Payroll\"><\/a>UI Mockup Template of a Payroll System<\/h3>\n<p><span style=\"font-weight: 400;\">The UI mockup template below is of a payroll system for Windows operating system. Functions such as calculating salary, over-time etc. are presented in the template. You can edit the template and add more functions to the system using the icons available in the app. Click on the image to start editing. \u00a0<\/span><\/p>\n<div id=\"attachment_13330\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/creately-start?tempID=ipt6bcpc2&amp;utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13330\" class=\"wp-image-13330 size-full\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2016\/07\/New-Payroll-System-UI-Mockup-Example.png\" alt=\"One of the UI Mock-up Templates Available in Creately \" width=\"810\" height=\"659\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Payroll-System-UI-Mockup-Example.png 810w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Payroll-System-UI-Mockup-Example-300x244.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Payroll-System-UI-Mockup-Example-768x625.png 768w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><p id=\"caption-attachment-13330\" class=\"wp-caption-text\">Click on the image to edit\u00a0online<\/p><\/div>\n<h3>More UI Mockup Templates<\/h3>\n<p><span style=\"font-weight: 400;\">Creately\u2019s easy-to-use UI mockup tool and<\/span><a href=\"https:\/\/creately.com\/diagram-community\/examples\/t\/wireframe?utm_source=uimockuptemplates&amp;utm_medium=blog&amp;utm_campaign=templateposts\" target=\"_blank\" rel=\"noopener noreferrer\"> <span style=\"font-weight: 400;\">professionally designed UI mock-up templates<\/span><\/a><span style=\"font-weight: 400;\"> will help you get started on your own website design or application design right away. If you are looking for a bit of inspiration or help, do check out our<\/span> <a href=\"https:\/\/creately.com\/diagram-community\/popular\"><span style=\"font-weight: 400;\">community<\/span><\/a><span style=\"font-weight: 400;\"> for unique ideas contributed by our users as well. \u00a0<\/span><\/p>\n<h3>More Diagramming Templates<\/h3>\n<ul>\n<li><a title=\"Use Case Diagram Templates\" href=\"https:\/\/creately.com\/blog\/examples\/use-case-templates-uml\/\" target=\"_blank\" rel=\"noopener noreferrer\">Use Case Diagram Templates<\/a><\/li>\n<li><a title=\"Fishbone diagram templates\" href=\"https:\/\/creately.com\/blog\/examples\/fishbone-diagram-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fishbone diagram templates<\/a><\/li>\n<li><a title=\"Mind map templates\" href=\"https:\/\/creately.com\/blog\/examples\/mind-map-examples-creately\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mind map templates<\/a><\/li>\n<li><a title=\"Business process model templates\" href=\"https:\/\/creately.com\/blog\/examples\/bpmn-templates-model-processes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Business process model templates<\/a><\/li>\n<li><a title=\"Storyboard templates\" href=\"https:\/\/creately.com\/blog\/examples\/storyboard-templates-creately\/\" target=\"_blank\" rel=\"noopener noreferrer\">Storyboard templates<\/a><\/li>\n<li><a title=\"Network diagram templates\" href=\"https:\/\/creately.com\/blog\/examples\/network-diagram-templates-creately\/\" target=\"_blank\" rel=\"noopener noreferrer\">Network diagram templates<\/a><\/li>\n<li><a title=\"Venn diagram templates\" href=\"https:\/\/creately.com\/blog\/examples\/venn-diagram-templates-examples\/\" target=\"_blank\" rel=\"noopener noreferrer\">Venn diagram templates<\/a><\/li>\n<li><a title=\"KWL chart templates\" href=\"https:\/\/creately.com\/guides\/kwl-chart-examples\/\" target=\"_blank\" rel=\"noopener noreferrer\">KWL chart templates<\/a><\/li>\n<li><a title=\"WBS templates\" href=\"https:\/\/creately.com\/blog\/examples\/work-breakdown-structure-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Work breakdown structure templates<\/a><\/li>\n<li><a title=\"SWOT analysis templates\" href=\"https:\/\/creately.com\/blog\/examples\/swot-analysis-templates-creately\/\" target=\"_blank\" rel=\"noopener noreferrer\">SWOT Analysis templates<\/a><\/li>\n<li><a title=\"Class Diagram templates\" href=\"https:\/\/creately.com\/blog\/examples\/class-diagram-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Class Diagram Templates<\/a><\/li>\n<li><a title=\"ER Diagram templates\" href=\"https:\/\/creately.com\/blog\/examples\/er-diagram-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">ER Diagram Templates<\/a><\/li>\n<li><a title=\"Sequence Diagram Templates\" href=\"https:\/\/creately.com\/blog\/examples\/sequence-diagram-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sequence Diagram Templates<\/a><\/li>\n<li><a title=\"Organization Chart Templates\" href=\"https:\/\/creately.com\/blog\/examples\/organizational-chart-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Organization Chart Templates<\/a><\/li>\n<li><a title=\"Gantt Chart Templates\" href=\"https:\/\/creately.com\/blog\/examples\/gantt-chart-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gantt Chart Templates<\/a><\/li>\n<li><a title=\"Activity Diagram Template\" href=\"https:\/\/creately.com\/blog\/examples\/activity-diagram-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Activity Diagram Templates<\/a><\/li>\n<li><a href=\"https:\/\/creately.com\/blog\/examples\/deployment-diagram-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">Deployment Diagram Templates\u00a0<\/a><\/li>\n<li><a href=\"https:\/\/creately.com\/blog\/diagrams\/aws-templates-for-architecture-diagrams\/\" target=\"_blank\" rel=\"noopener noreferrer\">AWS Architecture Diagram Templates\u00a0<\/a><\/li>\n<li><a href=\"https:\/\/creately.com\/blog\/examples\/gap-analysis-templates-creately\/\">Gap Analysis Templates<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A UI mockup is a realistic representation or a visual draft of the design of a website or a web\/mobile application. A UI mockup reflects the app&#8217;s or the site&#8217;s\u00a0design elements, such as the color scheme, images, logos, typography, buttons&#8230;<span class=\"continue-reading\"> <a href=\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":24,"featured_media":13322,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,55],"tags":[748,226,713,586,94],"class_list":["post-13320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diagrams","category-examples","tag-app-design","tag-ui-mock-ups","tag-website-design","tag-wire-frames","tag-wireframes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>UI Mock-up Templates to Create Unique User Interfaces - Creately Blog<\/title>\n<meta name=\"description\" content=\"UI mock-up templates to help you design unique user interfaces quickly and easily. Check out for more examples in the diagram community.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Mock-up Templates to Create Unique User Interfaces - Creately Blog\" \/>\n<meta property=\"og:description\" content=\"UI mock-up templates to help you design unique user interfaces quickly and easily. Check out for more examples in the diagram community.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\" \/>\n<meta property=\"og:site_name\" content=\"Creately Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/creately\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-14T07:18:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-29T04:46:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png\" \/>\n\t<meta property=\"og:image:width\" content=\"910\" \/>\n\t<meta property=\"og:image:height\" content=\"736\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Amanda Athuraliya\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amanda Athuraliya\" \/>\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:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\"},\"author\":{\"name\":\"Amanda Athuraliya\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/28418b6a4bfad4765af535837cda356d\"},\"headline\":\"UI Mock-up Templates to Create Unique User Interfaces\",\"datePublished\":\"2016-07-14T07:18:55+00:00\",\"dateModified\":\"2025-10-29T04:46:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\"},\"wordCount\":1166,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png\",\"keywords\":[\"app design\",\"UI mock-ups\",\"website design\",\"wire-frames\",\"wireframes\"],\"articleSection\":[\"Diagrams\",\"Examples\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\",\"url\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\",\"name\":\"UI Mock-up Templates to Create Unique User Interfaces - Creately Blog\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png\",\"datePublished\":\"2016-07-14T07:18:55+00:00\",\"dateModified\":\"2025-10-29T04:46:54+00:00\",\"description\":\"UI mock-up templates to help you design unique user interfaces quickly and easily. Check out for more examples in the diagram community.\",\"breadcrumb\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png\",\"width\":910,\"height\":736,\"caption\":\"Click on image to edit online\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creately.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Mock-up Templates to Create Unique User Interfaces\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/creately.com\/blog\/#website\",\"url\":\"https:\/\/creately.com\/blog\/\",\"name\":\"Creately Blog\",\"description\":\"Latest Product Updates and Tips on Working Visually\",\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/creately.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/creately.com\/blog\/#organization\",\"name\":\"Creately\",\"url\":\"https:\/\/creately.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"width\":430,\"height\":237,\"caption\":\"Creately\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/creately\",\"https:\/\/x.com\/creately\",\"https:\/\/www.instagram.com\/creately_app\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/28418b6a4bfad4765af535837cda356d\",\"name\":\"Amanda Athuraliya\",\"description\":\"Amanda Athuraliya is the communication specialist\/content writer at Creately, online diagramming and collaboration tool. She is an avid reader, a budding writer and a passionate researcher who loves to write about all kinds of topics.\",\"sameAs\":[\"https:\/\/x.com\/amyathuraliya\"],\"url\":\"https:\/\/creately.com\/blog\/author\/amanda\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Mock-up Templates to Create Unique User Interfaces - Creately Blog","description":"UI mock-up templates to help you design unique user interfaces quickly and easily. Check out for more examples in the diagram community.","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:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/","og_locale":"en_US","og_type":"article","og_title":"UI Mock-up Templates to Create Unique User Interfaces - Creately Blog","og_description":"UI mock-up templates to help you design unique user interfaces quickly and easily. Check out for more examples in the diagram community.","og_url":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/","og_site_name":"Creately Blog","article_publisher":"https:\/\/www.facebook.com\/creately","article_published_time":"2016-07-14T07:18:55+00:00","article_modified_time":"2025-10-29T04:46:54+00:00","og_image":[{"width":910,"height":736,"url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png","type":"image\/png"}],"author":"Amanda Athuraliya","twitter_misc":{"Written by":"Amanda Athuraliya","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#article","isPartOf":{"@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/"},"author":{"name":"Amanda Athuraliya","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/28418b6a4bfad4765af535837cda356d"},"headline":"UI Mock-up Templates to Create Unique User Interfaces","datePublished":"2016-07-14T07:18:55+00:00","dateModified":"2025-10-29T04:46:54+00:00","mainEntityOfPage":{"@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/"},"wordCount":1166,"commentCount":0,"publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"image":{"@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage"},"thumbnailUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png","keywords":["app design","UI mock-ups","website design","wire-frames","wireframes"],"articleSection":["Diagrams","Examples"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/","url":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/","name":"UI Mock-up Templates to Create Unique User Interfaces - Creately Blog","isPartOf":{"@id":"https:\/\/creately.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage"},"image":{"@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage"},"thumbnailUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png","datePublished":"2016-07-14T07:18:55+00:00","dateModified":"2025-10-29T04:46:54+00:00","description":"UI mock-up templates to help you design unique user interfaces quickly and easily. Check out for more examples in the diagram community.","breadcrumb":{"@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#primaryimage","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2016\/07\/New-Web-Store-Shopping-Cart-UI-Mockup.png","width":910,"height":736,"caption":"Click on image to edit online"},{"@type":"BreadcrumbList","@id":"https:\/\/creately.com\/blog\/diagrams\/ui-mock-up-templates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creately.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI Mock-up Templates to Create Unique User Interfaces"}]},{"@type":"WebSite","@id":"https:\/\/creately.com\/blog\/#website","url":"https:\/\/creately.com\/blog\/","name":"Creately Blog","description":"Latest Product Updates and Tips on Working Visually","publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creately.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/creately.com\/blog\/#organization","name":"Creately","url":"https:\/\/creately.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","width":430,"height":237,"caption":"Creately"},"image":{"@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/creately","https:\/\/x.com\/creately","https:\/\/www.instagram.com\/creately_app\/"]},{"@type":"Person","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/28418b6a4bfad4765af535837cda356d","name":"Amanda Athuraliya","description":"Amanda Athuraliya is the communication specialist\/content writer at Creately, online diagramming and collaboration tool. She is an avid reader, a budding writer and a passionate researcher who loves to write about all kinds of topics.","sameAs":["https:\/\/x.com\/amyathuraliya"],"url":"https:\/\/creately.com\/blog\/author\/amanda\/"}]}},"_links":{"self":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/13320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/comments?post=13320"}],"version-history":[{"count":15,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/13320\/revisions"}],"predecessor-version":[{"id":32114,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/13320\/revisions\/32114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media\/13322"}],"wp:attachment":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media?parent=13320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/categories?post=13320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/tags?post=13320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}