{"id":105216,"date":"2022-07-07T17:17:02","date_gmt":"2022-07-07T17:17:02","guid":{"rendered":"https:\/\/www.markup.io\/?p=5216"},"modified":"2024-01-29T18:46:07","modified_gmt":"2024-01-29T18:46:07","slug":"how-to-mock-up-a-website","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/","title":{"rendered":"How to mockup a website in 4 steps (2024 guide)"},"content":{"rendered":"\n<p>Explaining your web design vision to a client verbally or via email is super unproductive.<\/p>\n\n\n\n<p>There, we said it!&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/mockup-website-right.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/desusandmeroonshowtime-showtime-desus-and-mero-bodega-boys-186nC3nSVUnJs0unFv\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Website design is best presented as&#8230; well, design \u2014 not text or verbal descriptions.<\/p>\n\n\n\n<p>But presenting a live website to a client and risking major revision requests at that advanced stage is <em>not the way to go.<\/em><\/p>\n\n\n\n<p>So, what can you do to make your client happy while staying true to your vision?<\/p>\n\n\n\n<p>Meet the \u2728 website mockup. \u2728 <\/p>\n\n\n\n<p>This magical middle ground will help you avoid wasting resources and prevent time-intensive edits.<\/p>\n\n\n\n<p>If you don\u2019t know how to mockup a website, don\u2019t worry! You\u2019re about to find out.<\/p>\n\n\n\n<p>To help you speed up your design process and minimize the feedback loops that accompany mockups, this guide covers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What a website mockup is and when you need to create one<\/li>\n\n\n\n<li>The benefits of integrating mockups into your workflow<\/li>\n\n\n\n<li>How to mockup a website in four easy steps<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s get into it!<\/p>\n\n\n\n<div class=\"toc\">\n\n\n<p><b>Table of contents<\/b><\/p>\n\n\n\n<li><a href=\"#C1\">What is a website mockup?<\/a><\/li>\n\n\n<li><a href=\"#C2\">Why is creating website mockups important?<\/a><\/li>\n\n\n<li><a href=\"#C3\">How to mockup a website in 4 simple steps<\/a><\/li>\n\n\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C1\">What is a website mockup?<\/h2>\n\n\n\n<p>A <strong>website mockup<\/strong> is a static design prototype of a website or web page. The mockup is generally just a <strong>visual representation of what the final product will look like<\/strong>; thus, it is not functional.&nbsp;<\/p>\n\n\n\n<p>It includes main design elements, such as color palettes, fonts, images, and text (or image and text placeholders).<\/p>\n\n\n\n<p>The mockup can be as minimal as the example below or as detailed as you see fit.<\/p>\n\n\n\n<p>The most important thing is to <strong>get your vision across<\/strong> and help your team, clients, and other stakeholders imagine the website\u2019s final look.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/www.markup.io\/wp-content\/uploads\/2022\/07\/MockUpWebsite_Example.jpg\" alt=\"Example of a website mockup that features bright orange and yellow flames laid above pictures of a motorcycle and building.\" class=\"wp-image-5299\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><br>Most mockup examples showcase the color palette, design elements, buttons, navigation menus, and other web design elements that make up a cohesive home page.&nbsp;<\/p>\n\n\n\n<p>With this type of mockup, designers can express their vision without explaining what they\u2019re planning to create in never-ending Zoom calls or email chains.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>When do I need to create a website mockup?&nbsp;<\/strong><\/h3>\n\n\n\n<p>Create a website mockup before building a new website or implementing massive design changes to an existing website or web page.&nbsp;<\/p>\n\n\n\n<p>After receiving the project brief and establishing the main project requirements with your team and\/or client, you should have a clear picture of what is expected of you as a web designer.<\/p>\n\n\n\n<p>Once you\u2019ve combined your skills, vision, and all other info in the brief, you can start tracing the main elements of the website or web page with tools such as Photoshop.<\/p>\n\n\n\n<p>Once these preliminary sketches are in place, you can start working on your <a href=\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">website mockup<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C2\">Why is creating website mockups important?<\/h2>\n\n\n\n<p>Creating a website mockup comes with many benefits\u2014for you and your team as well as the customer.&nbsp;<\/p>\n\n\n\n<p>Specifically, integrating website mockups into your <a href=\"https:\/\/www.markup.io\/blog\/creative-workflow\/\" target=\"_blank\" rel=\"noreferrer noopener\">creative workflow<\/a> enables you to ensure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The overall look of the website is cohesive<\/li>\n\n\n\n<li>Revision requests can be implemented quickly and easily<\/li>\n\n\n\n<li>Higher-ups and team members are on the same page<\/li>\n\n\n\n<li>Feedback is transparent and well organized<\/li>\n\n\n\n<li>Multiple versions of your design can be easily created<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s take a closer look at these advantages and see if they\u2019d benefit your creative workflow in any way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ensure visual consistency<\/strong><\/h3>\n\n\n\n<p>With website mockups, it\u2019s easy to make sure all the in-progress web pages will be designed in the same style.&nbsp;<\/p>\n\n\n\n<p>Think about it\u2014a mockup is like a digital board to standardize your ideas. When seeing every page, section, and design element of a website put together side-by-side, it will be easier to tell which elements are out of place.<\/p>\n\n\n\n<p>In short, website mockups help you ensure visual consistency across all web pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Make changes easily<\/strong><\/h3>\n\n\n\n<p>Making adjustments to website mockups is much easier than editing a live website.<\/p>\n\n\n\n<p>At the mockup stage, you can make the necessary edits using your design platform of choice right away, while changing something on a live website implies more steps.&nbsp;<\/p>\n\n\n\n<p>Plus, there\u2019s always the possibility of accidentally adding a weird piece of code that makes the whole design look off.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/mockup-website-css.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/frustrated-annoyed-programming-yYSSBtDgbbRzq\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Bring everyone on the same page<\/strong><\/h3>\n\n\n\n<p>Mockups are easy to share with clients, stakeholders, team members, and everyone else involved in the process\u2014especially when <a href=\"https:\/\/www.markup.io\/blog\/annotation-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">using an annotation tool<\/a>.<\/p>\n\n\n\n<p>For instance, with <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a>, you can share your designs with whoever you want via link or email. Then, your collaborators can leave <strong>contextual feedback pinned to sections and elements that need improvement<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Keep feedback organized<\/strong><\/h3>\n\n\n\n<p>When sharing mockups with the right website mockup tool, you can effortlessly keep all feedback in one place, further offering customers and stakeholders <strong>higher visibility into your workflow<\/strong>.<\/p>\n\n\n\n<p>For example, MarkUp.io helps you keep track of all the comments added to your MarkUp (even resolved comments!).&nbsp;<\/p>\n\n\n\n<p>Having easy access to feedback history will help you understand your client\u2019s requirements better over time while giving you the opportunity to minimize the requested number of revisions for future projects with the same client.<\/p>\n\n\n\n<p><strong>Create multiple versions with minimal effort<\/strong><\/p>\n\n\n\n<p>When integrating mockups into your creative process, you have the ability to create multiple versions with minimal effort.&nbsp;<\/p>\n\n\n\n<p>For instance, you can keep the same layout for all versions but play with fonts, colors, and media content to obtain different looks for the same concept.&nbsp;<\/p>\n\n\n\n<p>These are just a few of the benefits you can leverage when creating mockups. Hopefully, it was enough to convince you that <strong>mockups can help you streamline your design processes<\/strong>. \ud83d\ude43<\/p>\n\n\n\n<p>Now let\u2019s see how to actually create mockups by following <strong>a simple, beginner-friendly four-step tutorial<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C3\">How to mockup a website in 4 simple steps<\/h2>\n\n\n\n<p>Creating website mockup designs is easier than you\u2019d expect.&nbsp;<\/p>\n\n\n\n<p>Sure, you have to juggle the project\u2019s requirements, user experience (UX), and a pleasant user interface (UI) design, while somehow meeting everybody\u2019s expectations.<\/p>\n\n\n\n<p>But you know what?<\/p>\n\n\n\n<p>You can relieve some of that pressure by breaking down the UI design mockup process into four steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Create preliminary sketches and wireframes<\/strong><\/h3>\n\n\n\n<p>To create the best website mockups that help you provide <strong>high-fidelity representations of your project plan<\/strong>, you might want to consider starting with wireframes.<\/p>\n\n\n\n<p>Creating quick preliminary design sketches that you can share with stakeholders first will help you save time and ensure you and your clients or higher-ups are agreeing on some basics.<\/p>\n\n\n\n<p>Think of website wireframes as minimal blueprints of a website&#8217;s work frame and UI design.<\/p>\n\n\n\n<p>A wireframe typically consists of <strong>placeholders for the main design elements<\/strong> to be included in the mockup and it looks something like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/www.markup.io\/wp-content\/uploads\/2022\/07\/MockUpWebsite_Wireframe-2.jpg\" alt=\"Gray abstract graphic of wireframes.\" class=\"wp-image-5297\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can create these skeletal sketches as a preliminary step in mobile app design, web design, graphic design, etc.<\/p>\n\n\n\n<p>This step is not always part of the process, but we definitely recommend it as wireframes are super quick and easy to create and get feedback on.&nbsp;<\/p>\n\n\n\n<p>You can send over multiple wireframe versions for review to figure out which layout best resonates with the stakeholders.&nbsp;<\/p>\n\n\n\n<p>Even though it might look like a waste of time, collecting some constructive feedback at this stage will save you lots of time later in the process. You can think of this phase as <strong>calibrating your vision to match the stakeholders&#8217; requirements<\/strong>.<\/p>\n\n\n\n<p>So, how do you create a wireframe?<\/p>\n\n\n\n<p>There are tons of amazing wireframing tools out there to accommodate your design ideas. Some of them even offer wireframe templates, diagrams, charts, and different design element placeholders to make UI planning easy.<\/p>\n\n\n\n<p>Such tools include Adobe XD, Figma, Canva, MockFlow, Balsamiq, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Add key design elements<\/strong><\/h3>\n\n\n\n<p>After your wireframe has been approved, you can start working on the actual website mockup. \ud83e\udd73<\/p>\n\n\n\n<p>To start, replace the placeholders from the wireframe with actual UI elements, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text, images, animations, videos, and other types of media content<\/li>\n\n\n\n<li>High-quality graphic design elements (in their final form)<\/li>\n\n\n\n<li>Buttons such as CTAs (call to action buttons)<\/li>\n\n\n\n<li>Contact forms<\/li>\n\n\n\n<li>Branding elements<\/li>\n<\/ul>\n\n\n\n<p>At the same time, ensure you\u2019re integrating the agreed-upon color palette and typography so that reviewers get a real feel of what the final design project will look like.<\/p>\n\n\n\n<p>To put these elements together, we recommend you use design tools such as Adobe Photoshop, MockFlow, Moqups, Mockplus, Fluid UI, and the like.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Test your design and get feedback<\/strong><\/h3>\n\n\n\n<p>Testing your website mockup is the most important thing\u2014basically the most important reason why website mockups exist. \ud83d\ude42<\/p>\n\n\n\n<p>You can test your web design mockup using visual feedback and collaboration tools, such as MarkUp.io.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a> can be used by designers, developers, and other creative teams for testing and getting feedback before it&#8217;s too late for changes.<\/p>\n\n\n\n<p>With MarkUp.io, users are able to create mockup MarkUps of the most popular design file formats, including PSD, AI, EPS, and TIFF.<\/p>\n\n\n\n<p>To upload a mockup into MarkUp.io, you can simply drag and drop your file into your workspace. As soon as you do that, the platform creates a sharable MarkUp of your design.&nbsp;<\/p>\n\n\n\n<p>You can then share the MarkUp with your design team, clients, managers, and everyone else who could give you feedback on your mockup in terms of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How user-friendly it is<\/li>\n\n\n\n<li>What the user experience is like<\/li>\n\n\n\n<li>What they think about the UX design<\/li>\n\n\n\n<li>Functionality and usability<\/li>\n<\/ul>\n\n\n\n<p>Moreover, you can see the feedback being added to your MarkUp in real-time as your teammates pin comments to the design elements that need to be edited or to the amazing sections of your design to congratulate you on your work. \ud83c\udf89<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.markup.io\/wp-content\/uploads\/2022\/02\/Product-update-for-blog-1-1024x576.png\" alt=\"Example of designers commenting on a website mockup.\" class=\"wp-image-4307\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>This step is vital to make sure you\u2019re not missing anything important.&nbsp;<\/p>\n\n\n\n<p>For example, you might overlook a low-contrast section of your mockup. In this case, a teammate you shared your MarkUp with can identify the visual accessibility issue and pin a comment on the respective section of the layout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Edit and finalize your mockup<\/strong><\/h3>\n\n\n\n<p>Once you get feedback from everyone in your team, you can start making the necessary edits and resolve the comments pinned to your mockup to keep your MarkUp organized.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.markup.io\/wp-content\/uploads\/2022\/06\/ResolvedComment-1024x792.jpg\" alt=\"Example of a resolved comment on a Video MarkUp.\" class=\"wp-image-5074\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>When resolved, comments are not deleted. Instead, they are automatically transferred from the <strong>Active <\/strong>tab to the <strong>Resolved <\/strong>tab.<\/p>\n\n\n\n<p>Think of the Resolved tab as a <strong>reliable feedback archive<\/strong> that you can use for debriefing, establishing guidelines for new clients you\u2019re working with, and tracking your progress as a professional.<\/p>\n\n\n\n<p>Finally, after you save the holy file named \u201cfinal draft,&#8221; your design can go into production and you and your team can get ready for the <a href=\"https:\/\/www.markup.io\/blog\/how-to-launch-a-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">website launch<\/a>.<\/p>\n\n\n\n<p>Now that you&#8217;ve armed yourself with the necessary tools and knowledge to mockup a website, what are you waiting for?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Now over to you<\/h2>\n\n\n\n<p>It\u2019s time you put all this info to good use and start creating stellar website mockups.<\/p>\n\n\n\n<p>Your creative workflow doesn\u2019t need to be hindered by hard-to-implement edits in the final stages of projects anymore.&nbsp;<\/p>\n\n\n\n<p>And, to simplify things even more, you can share your mockups using MarkUp.io.<\/p>\n\n\n\n<p>The platform will help you <strong>minimize feedback loops<\/strong> and ensure all stakeholders are on board with your creative vision right from the start. <a href=\"https:\/\/app.markup.io\/signup?utm_source=website&amp;utm_medium=markup-blog&amp;utm_campaign=website-mockup-blog&amp;utm_content=sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up with MarkUp.io<\/a> and make mockup reviews a breeze!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explaining your web design vision to a client verbally or via email is super unproductive. There, we said it!&nbsp;&nbsp; Website design is best presented as&#8230; well, design \u2014 not text or verbal descriptions. But presenting a live website to a client and risking major revision requests at that advanced stage is not the way to &hellip; <a href=\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":200786,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-105216","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>How to mockup a website in 4 steps (2024 guide) - Markup.io<\/title>\n<meta name=\"description\" content=\"Wanna know how to mockup a website in just 4 simple steps? In this guide, we break down the process to create website mockups hassle-free.\" \/>\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\/how-to-mock-up-a-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to mockup a website in 4 steps (2024 guide) - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Wanna know how to mockup a website in just 4 simple steps? In this guide, we break down the process to create website mockups hassle-free.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-07T17:17:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-29T18:46:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\",\"url\":\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\",\"name\":\"How to mockup a website in 4 steps (2024 guide) - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-hero.png\",\"datePublished\":\"2022-07-07T17:17:02+00:00\",\"dateModified\":\"2024-01-29T18:46:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Wanna know how to mockup a website in just 4 simple steps? In this guide, we break down the process to create website mockups hassle-free.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-hero.png\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-hero.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to mockup a website in 4 steps (2024 guide)\"}]},{\"@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":"How to mockup a website in 4 steps (2024 guide) - Markup.io","description":"Wanna know how to mockup a website in just 4 simple steps? In this guide, we break down the process to create website mockups hassle-free.","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\/how-to-mock-up-a-website\/","og_locale":"en_GB","og_type":"article","og_title":"How to mockup a website in 4 steps (2024 guide) - Markup.io","og_description":"Wanna know how to mockup a website in just 4 simple steps? In this guide, we break down the process to create website mockups hassle-free.","og_url":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/","og_site_name":"Markup.io","article_published_time":"2022-07-07T17:17:02+00:00","article_modified_time":"2024-01-29T18:46:07+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-hero.png","type":"image\/png"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/","url":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/","name":"How to mockup a website in 4 steps (2024 guide) - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-hero.png","datePublished":"2022-07-07T17:17:02+00:00","dateModified":"2024-01-29T18:46:07+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Wanna know how to mockup a website in just 4 simple steps? In this guide, we break down the process to create website mockups hassle-free.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-hero.png","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/how-to-mock-up-a-website-hero.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"How to mockup a website in 4 steps (2024 guide)"}]},{"@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\/105216","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=105216"}],"version-history":[{"count":3,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/105216\/revisions"}],"predecessor-version":[{"id":202983,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/105216\/revisions\/202983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/200786"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=105216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=105216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=105216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}