{"id":200698,"date":"2023-01-23T15:38:03","date_gmt":"2023-01-23T15:38:03","guid":{"rendered":"https:\/\/www.markup.io\/?p=200698"},"modified":"2023-10-25T16:59:52","modified_gmt":"2023-10-25T15:59:52","slug":"website-mockup-template","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/website-mockup-template\/","title":{"rendered":"Create a website mockup template in 5 steps (w\/ sample)"},"content":{"rendered":"\n<p>Wishing for the website you&#8217;re working on to become real magically is like when Geppetto wished that Pinocchio would become a real boy. Unlike you, though, Geppetto had some outside help.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-Pinocchio_201.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/pinocchiogifs.tumblr.com\/post\/31752971759\/geppetto-4\" target=\"_blank\" rel=\"noreferrer noopener\">Tumblr<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Rather than making a wish upon a star, we have a more practical way for you to bring your website designs to life.&nbsp;<\/p>\n\n\n\n<p>Meet the website mockup.<\/p>\n\n\n\n<p>When you add this tool to your web design workflow, you\u2019re that much closer to getting all your stakeholders to agree on the design from the get-go and finally bring your creative ideas to life.<\/p>\n\n\n\n<p>Our website mockup template can be the ace up your sleeve in every upcoming website design project.<\/p>\n\n\n\n<p>But first, let\u2019s go over the technicalities, so we don\u2019t get tangled up in our own magic trick. \ud83d\ude06<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Table of contents<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#what\">What\u2019s a website mockup?<\/a><\/li>\n\n\n\n<li><a href=\"#benefits\">4 benefits of creating website mockups<\/a><\/li>\n\n\n\n<li><a href=\"#steps\">Create a website mockup in 5 steps<\/a><\/li>\n\n\n\n<li><a href=\"#template\">Website mockup template sample<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what\">What\u2019s a website mockup?<\/h2>\n\n\n\n<p><strong>A website mockup is a high-quality static representation of a site\u2019s user interface<\/strong>. It\u2019s the deliverable that brings all the sketches, wireframes, and user flows to life in an actual, real-life design.&nbsp;<\/p>\n\n\n\n<p>Think of it as a virtual reality (VR) experience. When stakeholders review a website mockup, they actually <strong>experience what the website will look and feel like <\/strong>once it is live.<\/p>\n\n\n\n<p>But for the mockup to feel real, some elements must be included in its design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What\u2019s included in a website mockup?<\/strong><\/h3>\n\n\n\n<p>The must-have components of website mockups include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Branding elements (e.g., brand name, logo, slogan, etc.)<\/li>\n\n\n\n<li>Page layout<\/li>\n\n\n\n<li>Color palettes and fonts<\/li>\n\n\n\n<li>Images, media content, and graphic design elements<\/li>\n\n\n\n<li>Actual copy or text placeholders<\/li>\n\n\n\n<li>Buttons, navigation bars, forms, and menus<\/li>\n\n\n\n<li>Social media buttons<\/li>\n<\/ul>\n\n\n\n<p>And everything else that will be displayed on the final version of the website.&nbsp;<\/p>\n\n\n\n<p>To make everything look more polished, place your web page designs into browser mockups.<\/p>\n\n\n\n<p>When you create responsive website mockups, be sure to add mockups of how the user interface (UI) design of all the created web pages looks on smaller screen mockups.&nbsp;<\/p>\n\n\n\n<p>Suppose you\u2019re looking to earn extra brownie points. In that case, you can create separate designs for different screen sizes and encase them into isometric iPhone, iPad, MacBook Pro, and non-Apple device mockups just to make the whole experience more credible for your clients.&nbsp;<\/p>\n\n\n\n<p>Plus, there\u2019s an advantage for you too. Creating all these versions will also enable you to get a better understanding of the user experience (UX) visitors will have on different screens.\ud83d\ude09&nbsp;<\/p>\n\n\n\n<p>Designing user experiences for mobile devices is crucial to a business&#8217;s success. A 2017 study from <a href=\"https:\/\/www.thinkwithgoogle.com\/consumer-insights\/consumer-trends\/app-shopping-experience-purchase-consideration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google<\/a> found that more than 50% of people say they won\u2019t consider purchasing from a brand that has a poorly-designed mobile site.&nbsp;<\/p>\n\n\n\n<p>The same goes for working on the UI design for mobile devices. Device mockups will elevate the whole look of your mobile app design mockups.<\/p>\n\n\n\n<p>At first glance, creating design mockups may look like a lot of work. Still, it\u2019s all worth it in the long run.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"benefits\">4 benefits of creating website mockups<\/h2>\n\n\n\n<p>Creating website mockups as part of your standard <a href=\"https:\/\/www.markup.io\/blog\/creative-workflow\/\" target=\"_blank\" rel=\"noreferrer noopener\">creative workflow<\/a> will result in benefits like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cost reduction<\/li>\n\n\n\n<li>Time savings<\/li>\n\n\n\n<li>Fewer errors<\/li>\n\n\n\n<li>Shorter review cycles<\/li>\n\n\n\n<li>Faster sign-off<\/li>\n\n\n\n<li>Improved collaboration<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s see how that works.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Benefit #1: Reduce development costs<\/strong><\/h3>\n\n\n\n<p>Let\u2019s face it: there\u2019s a very low chance that any project will be approved without revision requests. At some point in the process, there will be the inevitable back-and-forths between designers, clients, and developers to ensure they get the final product right.<\/p>\n\n\n\n<p>Reiterations are inevitable. But stress caused by multiple rounds of revision doesn\u2019t have to be. \ud83d\ude09<\/p>\n\n\n\n<p>Having to replace an image with another on a mockup landing page differs from replacing that same element when the webpage is already up and running. The latter will cost more as this seemingly small change takes more billable hours to implement.<\/p>\n\n\n\n<p>Website mockups can help you avoid these extra production costs simply because it\u2019s easier to drag and drop things into a make-believe website than editing lines of CSS, HTML, and JavaScript in <a href=\"https:\/\/www.markup.io\/blog\/webflow-vs-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress or other website builders<\/a>.<\/p>\n\n\n\n<p>Not only that, but some mockup tools like <a href=\"https:\/\/www.markup.io\/blog\/web-development-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma and Sketch<\/a> have developer handoff features that can save you more time and money.<\/p>\n\n\n\n<p>For the uninitiated, developer handoff happens when a webpage mockup has been signed off by a client. This means it\u2019s ready to be implemented. To streamline this process, some design tools can translate the designed showcase mockup into code snippets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Benefit #2: Decrease errors and design mishaps&nbsp;<\/strong><\/h3>\n\n\n\n<p>You know what they say: \u2018<em>two heads are better than one.\u2019<\/em><\/p>\n\n\n\n<p>Mistakes happen \u2013 that\u2019s a part of any <a href=\"https:\/\/www.markup.io\/blog\/project-approval-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">project approval process<\/a>. But mockups are a great way to get team members and stakeholders involved in <a href=\"https:\/\/www.markup.io\/blog\/web-design-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">the web design process<\/a> and catch errors when they\u2019re easier to correct.&nbsp;<\/p>\n\n\n\n<p>We know how easy it is to lose sight of minor details when following a checklist with project requirements.&nbsp;<\/p>\n\n\n\n<p>To avoid errors that can turn into PR nightmares for your clients, you can create and share website mockups with your team before the official client review.<\/p>\n\n\n\n<p>Having experienced designers from your team review your work will help ensure you haven\u2019t overlooked any important detail that your non-designer client would probably not even notice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Benefit #3: Minimize feedback loops<\/strong><\/h3>\n\n\n\n<p>Just like mistakes, misunderstandings that result from ineffective feedback are bound to happen. But if you start reviewing website mockups internally, you\u2019ll be able to shorten feedback loops and <a href=\"https:\/\/www.markup.io\/blog\/creative-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">streamline your review and approval process<\/a>.<\/p>\n\n\n\n<p>And that\u2019s not even the only way website mockups can minimize feedback loops.<\/p>\n\n\n\n<p>Website mockups help ensure your clients are on the same page as you and your team.&nbsp;<\/p>\n\n\n\n<p>If you work with non-design-literate professionals, you know it\u2019s hard to help them accurately picture the eventual real-life home page from only wireframes and sketches.<\/p>\n\n\n\n<p>They might agree on a proposed design in the form of a wireframe only to realize it\u2019s not what they were looking for when the design has already been implemented.&nbsp;<\/p>\n\n\n\n<p>When your client can\u2019t quite articulate what the home page should look like, you have to juggle massive reworks and ambiguous feedback.<\/p>\n\n\n\n<p>Situations like this result in missed deadlines that can <a href=\"https:\/\/www.markup.io\/blog\/why-do-projects-fail\/\" target=\"_blank\" rel=\"noreferrer noopener\">delay other projects<\/a> your team is involved in and cascade into overwhelming time-management issues.<\/p>\n\n\n\n<p>So, do your clients (and yourself) a huge favor by serving them with a visual website design mockup. From there, you can steer the design process in the right direction and ensure that edits and changes won\u2019t have a huge impact on the project budget.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Benefit #4: Get projects approved faster<\/strong><\/h3>\n\n\n\n<p>With vague revision requests a thing of the past, clients can speak their minds faster and more easily.<\/p>\n\n\n\n<p>And when you\u2019re armed with precise reviews, you can tweak your designs, so they\u2019re up to par with clients\u2019 expectations.&nbsp;<\/p>\n\n\n\n<p>You know those moments when you ask yourself, \u201cWhat did they mean by this?\u201d while staring into the void of what looks like an ode inspired by your clients\u2019 dissatisfaction?&nbsp; Website mockups have the magical ability to make them a thing of the past.<\/p>\n\n\n\n<p>With so many benefits waiting for you, you probably can\u2019t wait to get to the know-how part.<\/p>\n\n\n\n<p>The good news is that you don\u2019t have to. Let\u2019s get right into it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"steps\">Create a website mockup in 5 steps<\/h2>\n\n\n\n<p>Creating website mockups is much easier than bringing a little wooden puppet to life. Instead of relying on fairies and magic, you only need to follow five steps to <a href=\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">mockup a website the right way<\/a>.<\/p>\n\n\n\n<p>Let\u2019s get started:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #1: Establish users\u2019 needs<\/strong><\/h3>\n\n\n\n<p>The first step toward a smooth <a href=\"https:\/\/www.markup.io\/blog\/document-review-and-approval-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">review and approval process<\/a> of your website mockup is to ensure you understand <a href=\"https:\/\/www.markup.io\/blog\/how-to-get-web-design-clients\/\" target=\"_blank\" rel=\"noreferrer noopener\">what your client wants.<\/a><\/p>\n\n\n\n<p>&nbsp;Have a meeting with stakeholders, ask clarifying questions, and follow up by <a href=\"https:\/\/www.markup.io\/blog\/what-is-a-creative-brief\/\" target=\"_blank\" rel=\"noreferrer noopener\">writing a creative brief<\/a>.<\/p>\n\n\n\n<p>Your brief should contain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A project summary<\/li>\n\n\n\n<li>Defined project goals and objectives<\/li>\n\n\n\n<li>An overview of the client\u2019s company<\/li>\n\n\n\n<li>Details of the project\u2019s target audience<\/li>\n\n\n\n<li>A competitive analysis<\/li>\n\n\n\n<li>A description of the expected deliverables<\/li>\n\n\n\n<li>A project timeline with due dates and milestones<\/li>\n\n\n\n<li>The project budget<\/li>\n<\/ul>\n\n\n\n<p>A well-structured creative brief will help you and your team understand what the client expects from the project. This will make bringing their vision to life much easier for everyone involved.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #2: Create user flows and wireframes<\/strong><\/h3>\n\n\n\n<p>Following the creative brief, <a href=\"https:\/\/www.markup.io\/blog\/user-flow\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a user flow<\/a> documenting all the paths and decisions of a website visitor.&nbsp;<\/p>\n\n\n\n<p>This step helps you understand the customer journey and ensure your design is not only pretty but also functional. And we all know how important functional design is for customer retention.&nbsp;<\/p>\n\n\n\n<p>Website visitors tend to leave a site when they cannot find what they are looking for within a few clicks. So, intuitive user flows are a must!<\/p>\n\n\n\n<p>Based on the user flow, create wireframes, which are skeletal framework sketches of your design.&nbsp;<\/p>\n\n\n\n<p>Wireframes are easier to play around with than full-scale design mockups and ultimately save you time.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #3: Add images, typography, and interactions<\/strong><\/h3>\n\n\n\n<p>As soon as you\u2019re happy with how your wireframes look, it\u2019s time to start working on the actual website mockup.<\/p>\n\n\n\n<p>Use design platforms (e.g., Dribbble, Adobe Photoshop, etc.), a stock image portfolio website (e.g., Shutterstock), image discovery engines (e.g., Pinterest), and other design resources to collect high-resolution images for your mockups.&nbsp;<\/p>\n\n\n\n<p>Aside from all the graphic and media elements, you\u2019ll also need to find display mockups for different screen sizes.<\/p>\n\n\n\n<p>After you collect everything you need, arrange all elements according to the wireframe sketches.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #4: Test usability<\/strong><\/h3>\n\n\n\n<p>At this stage of the development process, usability testing is just another way of saying \u2018internal review.\u2019&nbsp;<\/p>\n\n\n\n<p>Sure, some tools enable you to create interactive prototypes. But there\u2019s no real way to test a website\u2019s usability until it\u2019s live and a user actually uses it.<\/p>\n\n\n\n<p>So, after you finish populating the website mockup template with all the necessary images and placeholders, share it with the team and request feedback.&nbsp;<\/p>\n\n\n\n<p>Ask your team to focus on functionality, UX design, and the different website screen sizes while comparing the final product design with the requirements from the creative brief.<\/p>\n\n\n\n<p>Implement the feedback and prepare your design for the final and most important review.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #5: Get feedback and finalize your mockup<\/strong><\/h3>\n\n\n\n<p>Finally, share your website screen mockup with the client and the rest of the stakeholders.<\/p>\n\n\n\n<p>To make this last review easier without worrying about feedback silos hidden in long email exchanges, you can upload your mockup onto an <a href=\"http:\/\/www.markup.io\/blog\/annotation-tools\" target=\"_blank\" rel=\"noreferrer noopener\">annotation tool<\/a> like <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a>.<\/p>\n\n\n\n<p>With MarkUp.io, you can drag and drop AI, EPS, PSD files, and other popular file formats on the Workspace. Then the platform creates a sharable, virtual copy of your designs\u2014we call it <a href=\"https:\/\/support.markup.io\/hc\/en-us\/articles\/4413415471635-Create-a-MarkUp\" target=\"_blank\" rel=\"noreferrer noopener\">a MarkUp<\/a>. You can then share your MarkUp and showcase the mockups to your clients via a link.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"912\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-markup-io.png\" alt=\"Commenting on a website mockup in MarkUp.io\" class=\"wp-image-200704\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-markup-io.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-markup-io-289x300.png 289w, https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-markup-io-768x796.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Stakeholders, clients, and other people you shared the MarkUp with can pin comments to elements they want to be changed. This feature will help you get contextual, pixel-perfect feedback you can see and address in real time.<\/p>\n\n\n\n<p>Implement your client\u2019s suggestions, resolve the comments, and hand your mockup over to the developers.&nbsp;<\/p>\n\n\n\n<p>No need to wish for your website to become real in this instance. Your work here is done!<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-congrats.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/MoheganSun-melissa-back-of-house-backofhousetv-ZatDUC7PhMMV0tZbD7\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Ready to create a website mockup design from scratch? We\u2019ve got something to help you out!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"template\">Website mockup template sample<\/h2>\n\n\n\n<p>We\u2019ve created a website mockup design template sample using Canva, a free web-based design tool. <a href=\"https:\/\/www.canva.com\/design\/DAFddvFyZRA\/kPeA60RogAL4Y_zbbRC5mg\/view?mode=preview&amp;utm_content=DAFddvFyZRA&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton\" target=\"_blank\" rel=\"noreferrer noopener\">Check it out for inspiration!<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-example.png\" alt=\"Website mockup template example\" class=\"wp-image-200751\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-example.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-example-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-example-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The template features a complete mockup set that includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>An iPhone mockup to showcase your mobile-friendly design<\/li>\n\n\n\n<li>A website presentation mockup for desktop devices and laptops<\/li>\n\n\n\n<li>A medium-sized screen mockup for tablets<\/li>\n<\/ul>\n\n\n\n<p>This sample template should get your creative juices flowing and make the mockup creation process less intimidating. <a href=\"https:\/\/www.canva.com\/design\/DAFddvFyZRA\/kPeA60RogAL4Y_zbbRC5mg\/view?mode=preview&amp;utm_content=DAFddvFyZRA&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton\" target=\"_blank\" rel=\"noreferrer noopener\">View it here!<\/a><\/p>\n\n\n\n<p>Before running away into the sunset to create your mockup template, there\u2019s one more thing we\u2019d like you to know.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Over to you<\/h2>\n\n\n\n<p>We might not be able to make Pinocchio a real boy, but we can help you transform your website mockup templates into real websites faster.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-real-boy.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/disney-boy-real-gOCvwLSvGLmus\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Think of MarkUp.io as a magic wand you can flick to make client reviews faster, more precise, and easier to address.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/app.markup.io\/signup?trial=true%3Futm_source%3Dwebsite&amp;utm_medium=markup-blog&amp;utm_campaign=website-mockup-template&amp;utm_content=free-trial\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for your free 30-day trial with MarkUp.io<\/a> to bring your web design projects to life the easy way!<\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wishing for the website you&#8217;re working on to become real magically is like when Geppetto wished that Pinocchio would become a real boy. Unlike you, though, Geppetto had some outside help.&nbsp; Rather than making a wish upon a star, we have a more practical way for you to bring your website designs to life.&nbsp; Meet &hellip; <a href=\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":200703,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-200698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create a website mockup template in 5 steps (w\/ sample) - Markup.io<\/title>\n<meta name=\"description\" content=\"Learn what goes into creating a website mockup template that you can use over and over again for all of your future web design projects.\" \/>\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.markup.io\/blog\/website-mockup-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a website mockup template in 5 steps (w\/ sample) - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Learn what goes into creating a website mockup template that you can use over and over again for all of your future web design projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T15:38:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-25T15:59:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\",\"url\":\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\",\"name\":\"Create a website mockup template in 5 steps (w\/ sample) - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png\",\"datePublished\":\"2023-01-23T15:38:03+00:00\",\"dateModified\":\"2023-10-25T15:59:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Learn what goes into creating a website mockup template that you can use over and over again for all of your future web design projects.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-template\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-template\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a website mockup template in 5 steps (w\/ sample)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a website mockup template in 5 steps (w\/ sample) - Markup.io","description":"Learn what goes into creating a website mockup template that you can use over and over again for all of your future web design projects.","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.markup.io\/blog\/website-mockup-template\/","og_locale":"en_GB","og_type":"article","og_title":"Create a website mockup template in 5 steps (w\/ sample) - Markup.io","og_description":"Learn what goes into creating a website mockup template that you can use over and over again for all of your future web design projects.","og_url":"https:\/\/www.markup.io\/blog\/website-mockup-template\/","og_site_name":"Markup.io","article_published_time":"2023-01-23T15:38:03+00:00","article_modified_time":"2023-10-25T15:59:52+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png","type":"image\/png"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/website-mockup-template\/","url":"https:\/\/www.markup.io\/blog\/website-mockup-template\/","name":"Create a website mockup template in 5 steps (w\/ sample) - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/website-mockup-template\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/website-mockup-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png","datePublished":"2023-01-23T15:38:03+00:00","dateModified":"2023-10-25T15:59:52+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Learn what goes into creating a website mockup template that you can use over and over again for all of your future web design projects.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/website-mockup-template\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/website-mockup-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/website-mockup-template\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/01\/website-mockup-template-hero.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/website-mockup-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"Create a website mockup template in 5 steps (w\/ sample)"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/200698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=200698"}],"version-history":[{"count":7,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/200698\/revisions"}],"predecessor-version":[{"id":202641,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/200698\/revisions\/202641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/200703"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=200698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=200698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=200698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}