{"id":201159,"date":"2023-03-27T16:59:07","date_gmt":"2023-03-27T15:59:07","guid":{"rendered":"https:\/\/www.markup.io\/?p=201159"},"modified":"2024-01-24T10:52:16","modified_gmt":"2024-01-24T10:52:16","slug":"website-mockup-examples","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/","title":{"rendered":"12 website mockup examples &amp; 5 tips to ace mockup design"},"content":{"rendered":"\n<p>You finally have the website design idea you\u2019ve been thinking about for your next project.&nbsp;<\/p>\n\n\n\n<p>You know that one of the best ways to communicate your vision to clients is with mockups, but you\u2019re stuck on how to make the mockup look, so stakeholders understand the idea.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-ex-space-doggo.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/tenor.com\/view\/space-doggo-funny-animals-dogs-gif-25003731\" target=\"_blank\" rel=\"noreferrer noopener\">Tenor<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>If you\u2019re not sure where to start, don\u2019t worry, this blog post will help you change that because it covers<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What a website mockup is<\/li>\n\n\n\n<li>Tips on how to create responsive mockup designs<\/li>\n\n\n\n<li>Examples of mockup template designs to inspire you<\/li>\n<\/ul>\n\n\n\n<p>Without further ado, let\u2019s get started!&nbsp;<\/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=\"#tips\">5 tips on mastering website mockup design<\/a><\/li>\n\n\n\n<li><a href=\"#finance\">Finance website mockup examples<\/a><\/li>\n\n\n\n<li><a href=\"#creative\">Creative website mockup examples<\/a><\/li>\n\n\n\n<li><a href=\"#ecommerce\">eCommerce website mockup examples<\/a><\/li>\n\n\n\n<li><a href=\"#business\">Business web design mockup examples<\/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>If you\u2019re a seasoned web designer, you\u2019re probably no stranger to website mockups. For the uninitiated, a <a href=\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">website mockup<\/a> is a static model of what a website or web page will look like when it goes live.<\/p>\n\n\n\n<p>By static, we mean users can\u2019t interact with it.&nbsp;<\/p>\n\n\n\n<p>Essentially, it\u2019s the spitting image of the final product (website) with its design elements, layout, font, and content on display.&nbsp;<\/p>\n\n\n\n<p>The only difference between the two is that mockups don\u2019t have the functionality that makes a live website look, you know, useful.<\/p>\n\n\n\n<p>So, why are mockups necessary if they\u2019re a lesser version of an actual website?&nbsp;<\/p>\n\n\n\n<p>As a designer or agency, you need website mockups because they can help you<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Communicate your idea and vision to your clients.<\/li>\n\n\n\n<li>Test different concepts.<\/li>\n\n\n\n<li>Receive and implement feedback early in the project timeline to save time on iterations.<\/li>\n\n\n\n<li>Ensure everyone is on the same page from the start.<\/li>\n<\/ul>\n\n\n\n<p>When designing a website, there are two other deliverables besides mockups that help people visualize your ideas. They\u2019re often confused with one another.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s look at what each entails and why they are important steps in a website <a href=\"https:\/\/www.markup.io\/blog\/approval-workflow\/\" target=\"_blank\" rel=\"noreferrer noopener\">design workflow<\/a>!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Website mockups vs. wireframes vs. prototypes<\/strong><\/h3>\n\n\n\n<p>A wireframe is a low-fidelity schematic of the website you\u2019re building that helps define the structure of your site in the early stages of the project.&nbsp;<\/p>\n\n\n\n<p>It\u2019s an invaluable design resource, and it typically looks like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-wireframe.png\" alt=\"Example of a wireframe from Dribbble\" class=\"wp-image-201191\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-wireframe.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-wireframe-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-wireframe-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/6249381-Mobile-App-Wireframe-UX\/attachments\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Think of wireframes as a simpler version of website mockups. They\u2019re just preliminary sketches that mockups are built on top of.<\/p>\n\n\n\n<p>With mockups, you can iterate and redesign all the ideas you have in mind before moving to create prototypes.<\/p>\n\n\n\n<p>Prototypes are high-fidelity versions of website mockups. You can use them to test the site\u2019s usability so you know what needs fixing before the website development phase begins.&nbsp;<\/p>\n\n\n\n<p>They also help your clients have a good feel for how the final version of the website will work.&nbsp;<\/p>\n\n\n\n<p>On the flip side, mockups are more about looks. \ud83d\udc40<\/p>\n\n\n\n<p>Now that it\u2019s clear what mockups are and, more importantly, what they\u2019re not, let\u2019s see how you can create them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips\">5 tips on mastering website mockup design<\/h2>\n\n\n\n<p>Acing your website mockup design is actually much easier than you think.&nbsp;<\/p>\n\n\n\n<p>Yes, you may have to harness your superpowers to make everyone (the client, the team lead, and yourself) happy. \ud83e\uddb8<\/p>\n\n\n\n<p>But that shouldn\u2019t be a problem if you leverage the tips we share in this section.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #1: Choose the right mockup design tool<\/strong><\/h3>\n\n\n\n<p>You know how we said website mockups are the visual representation of what the website will look like?<\/p>\n\n\n\n<p>Well, it\u2019s mockup design tools that make that happen.<\/p>\n\n\n\n<p>They help you conceptualize your idea or vision and convert them into a design. As such, you must ensure you choose the right tools to work with.&nbsp;<\/p>\n\n\n\n<p>Here are some questions to help you determine that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Is it easy to learn and use?&nbsp;<\/li>\n\n\n\n<li>Does it support feedback from clients and team members?<\/li>\n\n\n\n<li>How well does it integrate with social media channels or other tools you use?<\/li>\n<\/ul>\n\n\n\n<p>While you mull those questions over, let\u2019s take a look at some popular website mockup tools:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Figma<\/strong>: Allows users to build high-quality design processes and <a href=\"https:\/\/www.markup.io\/blog\/creative-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">collaborate with different teams<\/a> in their organizations, including clients.<\/li>\n\n\n\n<li><strong>InVision<\/strong>: Gives users access to smart templates for quick mockup designs and offers integrations with tools like Slack, Figma, and Loom.<\/li>\n\n\n\n<li><strong>Adobe XD<\/strong>: Comes with a drag-and-drop feature that allows designers to create web blueprints.<\/li>\n\n\n\n<li><strong>Mockplus<\/strong>: Uses the <em>What You See Is What You Get <\/em>(WYSIWYG) editor and lets users test their mockup on different devices.<\/li>\n\n\n\n<li><strong>Gravit<\/strong>: Helps designers create pixel patterns that are compatible with multiple platforms.<\/li>\n\n\n\n<li><strong>Adobe Photoshop<\/strong>: Helps users communicate their ideas with clients by designing high-fidelity and detailed mockups.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #2: Always start with a wireframe<\/strong><\/h3>\n\n\n\n<p>Once you\u2019ve decided on a tool, don\u2019t jump right into mockup design. Start with a wireframe instead \u2014 you\u2019ll thank yourself later when the first round of feedback comes your way.<\/p>\n\n\n\n<p>Creating wireframes allows every stakeholder involved to examine the website\u2019s structure and make any suggestions they want to be implemented in the design early on.&nbsp;<\/p>\n\n\n\n<p>Typically, web designers sketch their ideas on a whiteboard after brainstorming. Then, they jump right into the design phase.&nbsp;<\/p>\n\n\n\n<p>While popular, this approach wastes loads of productive time. Instead, it\u2019s worth developing wireframes first.<\/p>\n\n\n\n<p>By doing this, you get to carry your team members and clients along and address any problems before they become a big deal (and <em>super <\/em>time-consuming to fix).<\/p>\n\n\n\n<p>If you decide to start by creating wireframes, you\u2019ll:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Get simple and clear feedback without the distractions of the site\u2019s design and aesthetics.<\/li>\n\n\n\n<li>Save time since you won\u2019t have to finish designing before your client gives feedback.<\/li>\n\n\n\n<li>Have a better understanding of what your clients want by getting comments on what they like and dislike.&nbsp;<\/li>\n\n\n\n<li>Get a good view of the website design by mapping out the functionality of each page.<\/li>\n<\/ul>\n\n\n\n<p>If you feel hesitant and don\u2019t know where to start with wireframing and mockup design, we know something that can help. \ud83e\udd2d<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #3: Don\u2019t shy away from competitors\u2019 websites<\/strong><\/h3>\n\n\n\n<p>Keep an eye out for what your competitors\u2019 sites look like. To be clear, this is not so you can copy their website.<\/p>\n\n\n\n<p>\u2026<em>we\u2019re pretty sure you wouldn\u2019t do that anyway.<\/em><\/p>\n\n\n\n<p>Rather it\u2019s so you can get inspired and create a unique website that works for your target audience.&nbsp;<\/p>\n\n\n\n<p>By checking out the competition, you\u2019ll learn about:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The&nbsp; types of websites your audience is used to interacting with<\/li>\n\n\n\n<li>Gaps that need to be filled<\/li>\n\n\n\n<li>The best direction to take<\/li>\n<\/ul>\n\n\n\n<p>But be careful, though; getting too close to the sun is dangerous. So, ensure your design is not too similar to competitors\u2019 sites.<\/p>\n\n\n\n<p>An extra pair of eyes on your mockup can help you figure it out.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #4: Add internal reviews to your mockup approval workflow<\/strong><\/h3>\n\n\n\n<p>When designing your mockup, add internal reviews to the process to ensure the website meets the needs of your client at all touch points.&nbsp;<\/p>\n\n\n\n<p>This means sharing the mockup with other creatives on your team who aren\u2019t close to the project.&nbsp;<\/p>\n\n\n\n<p>They\u2019ll be able to see the design from a different perspective and provide feedback about sections that could harm the website\u2019s performance.&nbsp;<\/p>\n\n\n\n<p>However, if not handled well, <a href=\"https:\/\/www.markup.io\/blog\/worst-design-feedback\/\" target=\"_blank\" rel=\"noreferrer noopener\">feedback can be counterproductive<\/a>.<\/p>\n\n\n\n<p>We understand that designing is a creative process, and sometimes external inputs that are not properly organized can disrupt it.&nbsp;<\/p>\n\n\n\n<p>That\u2019s where using a tool like <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a> comes in handy.&nbsp;<\/p>\n\n\n\n<p>Our platform streamlines the <a href=\"https:\/\/www.markup.io\/blog\/document-review-and-approval-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">review-and-approval process<\/a> for you by allowing you to share your design with your team and get pixel-accurate comments pinned to the elements that need to be improved.&nbsp;<\/p>\n\n\n\n<p>You can then keep track of the feedback added to your mockup to ensure the project is on the right path.&nbsp;<\/p>\n\n\n\n<p>We\u2019ve got one more tip that\u2019s like the <em>icing on the cake<\/em> when working on your design projects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #5: Follow the golden rules of user interface (UI) design&nbsp;<\/strong><\/h3>\n\n\n\n<p>Ah yes, the user interface design! No mockup design is complete without it!<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-ikr.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/filmeditor-mean-girls-movie-l0IukNXgBnxRXVjYA\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Well, the UI is an important part of your product design. It helps ensure you create a responsive website for users to interact with.&nbsp;<\/p>\n\n\n\n<p>For better chances of success with UI designs, there are four rules you need to follow. These are known as the golden rules:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Allow users to be in charge of the interface<\/strong>: Let them control their actions on the website.<\/li>\n\n\n\n<li><strong>Ensure user interaction on the website is comfortable<\/strong>: Do away with elements that don\u2019t provide value to your website visitors.&nbsp;<\/li>\n\n\n\n<li><strong>Tone down the cognitive load<\/strong>: Keep the number of steps needed to carry out an action to a bare minimum, so users don\u2019t have to rack their brains.<\/li>\n\n\n\n<li><strong>Be consistent<\/strong>: Use the same design system, functionality, <a href=\"https:\/\/www.markup.io\/blog\/ux-audit\/\" target=\"_blank\" rel=\"noreferrer noopener\">user experience<\/a>, typography, and copy tone throughout the mockup.&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>Now that you know what goes into mockup design, let\u2019s look at some mockup examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"finance\">Finance website mockup examples<\/h2>\n\n\n\n<p>Have you been thinking about designing mockups for finance websites?<\/p>\n\n\n\n<p>We\u2019ve got three examples that can <em>mockspire<\/em> you. \ud83d\ude0a<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #1: Banking website mockup<\/strong><\/h3>\n\n\n\n<p>In this example, the mockup designer shows different pages users will interact with while using the website\u2019s mobile version.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-banking.png\" alt=\"Banking website mockup\" class=\"wp-image-201179\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-banking.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-banking-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-banking-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/19728311-Bank\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>It provides a clear picture of how users can transfer and receive money in their bank accounts and keep track of spending habits by checking their daily, weekly, and all-time expenses.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #2: Crypto trading website mockup<\/strong><\/h3>\n\n\n\n<p>This mockup design shows the desktop homepage of a crypto website.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-crypto-2.png\" alt=\"Crypto trading website mockup\" class=\"wp-image-201194\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-crypto-2.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-crypto-2-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-crypto-2-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/goods\/1299246-Crptiam-Cryptocurrency-HTML?token=gAAAAABjYkOUjx9r0SfXogaOaTUriFepO32mu29H6IOTKAgE409VVFSxuJSNPqgYOdyaDdWETD3ZfZJJZLvTldydiCrROmBCcmpo4XfhZLtYt1XkqFpi-ABluchrD0VfV9So4rWaiG7sKTeDdxz8V1949MV5KVar4g-w3vT_2O7RUZUJK9N3kHM%3D\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The landing page is <a href=\"https:\/\/www.canva.com\/learn\/color-meanings-symbolism\/#blue\" target=\"_blank\" rel=\"noreferrer noopener\">blue, a color known to suggest trust<\/a>, loyalty, and intelligence &#8212; crucial traits in the crypto space.<\/p>\n\n\n\n<p>You can use this design as a guide if it&#8217;s similar to what you want.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #3: Online payment website mockup<\/strong><\/h3>\n\n\n\n<p>Here\u2019s another cool mockup design showing both the desktop and mobile app versions of a site.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-payments.png\" alt=\"Online payment website mockup\" class=\"wp-image-201195\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-payments.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-payments-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-payments-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/18770240-Unine-Finance-Landing-Page-App-Live\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The colors used signify sophistication, making it appealing to visitors. It also shows the features and benefits of the platform, including reviews from current customers \u2014 a great touch that establishes trust.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creative\">Creative website mockup examples<\/h2>\n\n\n\n<p>If your clients are in the <a href=\"https:\/\/www.markup.io\/blog\/managing-a-creative-team\/\" target=\"_blank\" rel=\"noreferrer noopener\">creative space<\/a> \u2014 you know, where the cool guys are\u2014 we\u2019ve got some examples for you too.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #1: Artwork portfolio website mockup<\/strong><\/h3>\n\n\n\n<p>Even without looking at the sub-heading, this mockup already screams \u201cart\u201d thanks to its clever and striking use of the deep orange and white color-combo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-artwork.png\" alt=\"Artwork portfolio website mockup\" class=\"wp-image-201178\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-artwork.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-artwork-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-artwork-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/17199701-Orix-Creative-Art-Work-Website\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Of course, you can change the theme to fit your website. But this mockup will give you a head start if you design an artwork website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #2: Digital agency website mockup<\/strong><\/h3>\n\n\n\n<p>People feel safer when they\u2019re working with experts. That\u2019s what makes this mockup design worth your while.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-digital-agency.png\" alt=\"Digital agency website mockup\" class=\"wp-image-201184\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-digital-agency.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-digital-agency-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-digital-agency-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/14859340-Agency-Website-design\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The designer presents the agency as a top performer by showing it\u2019s an award-winning brand, using bold copy, and displaying its completed projects.<\/p>\n\n\n\n<p>They also showed how simple the <a href=\"https:\/\/www.markup.io\/blog\/user-flow\/\" target=\"_blank\" rel=\"noreferrer noopener\">agency\u2019s user flow<\/a> is \u2014 users can get started with them by entering their email addresses.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #3: Branding agency website mockup<\/strong><\/h3>\n\n\n\n<p>What better way for a branding agency to showcase its services than by using its brand as a case study?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-branding.png\" alt=\"Branding agency website mockup\" class=\"wp-image-201180\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-branding.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-branding-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-branding-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/18260583-Fisma-Creative-Agency-Landing-Page-Animation\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>That\u2019s what you see in this mockup!<\/p>\n\n\n\n<p>The designer shows off the agency\u2019s products and projects, including their experience level.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ecommerce\">eCommerce website mockup examples<\/h2>\n\n\n\n<p>These examples are good options to look at if you\u2019re designing website mockups for eCommerce brands.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #1: Online clothing store UI mockup<\/strong><\/h3>\n\n\n\n<p>This mockup features different web pages that users can navigate to when they visit the site.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-clothing.png\" alt=\"Online clothing store UI mockup\" class=\"wp-image-201187\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-clothing.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-clothing-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-online-clothing-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/15510840-Clothing-Store-Website\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>And from the homepage, people can start browsing through different products and shop for them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #2: Shopify store theme mockup<\/strong><\/h3>\n\n\n\n<p>Shopify designers, this one&#8217;s for you. The cloudy purple colors can be a good combo if your client is in the beauty industry.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-shopify.png\" alt=\"Shopify store theme mockup\" class=\"wp-image-201189\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-shopify.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-shopify-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-shopify-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/goods\/1128100-Pastel-Lilac-Gradient-Shopify-Theme?token=gAAAAABjYoi-fy6d8bzp8wTeTtqlC4VBKFDaxuTrITmP-IBJI0ZfR1Nc_10iRK2pO-4SKTzvBB9q0wYpaml6tKXVgWQXpuPG-1nNt4ZO2r_aVxiwm8OD2cXkam4_kLaUxGc1UaTwg_gouaNIPoHZDpeofPp11udo1yEFm8UO3Dr2I88ukVwdUq8%3D\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can see how they categorized their products into New Arrivals, Best Sellers, and Top Rates, just above some product examples.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #3: Online candy store website mockup<\/strong><\/h3>\n\n\n\n<p>There are several things we love about this mockup, specifically the color palette and imagery the designer used. They kinda fit the profile of what a candy store should look like.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-candy.png\" alt=\"Online candy store website mockup\" class=\"wp-image-201181\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-candy.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-candy-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-candy-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/19232997-Dessert-Shop-Website\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Aside from that, the homepage provides customers with everything they need to place an order on the site.&nbsp;<\/p>\n\n\n\n<p>There\u2019s a tab to the right with the \u2018Order Now\u2019 call to action (CTA) for those who are ready to order.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"business\">Business web design mockup examples<\/h2>\n\n\n\n<p>Our final examples are for people designing website mockups for business services.&nbsp;<\/p>\n\n\n\n<p>You thought we forgot about you? We didn\u2019t!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #1: Company culture page mockup<\/strong><\/h3>\n\n\n\n<p>This mockup promotes the company\u2019s culture by showing people why it\u2019s a good workplace.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-culture.png\" alt=\"Company culture page mockup\" class=\"wp-image-201183\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-culture.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-culture-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-culture-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/19498930-Landing-pages-for-a-tech-startup\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The designer also filled the homepage with colors that <a href=\"https:\/\/www.canva.com\/learn\/color-meanings-symbolism\/\" target=\"_blank\" rel=\"noreferrer noopener\">suggest goodness and happiness<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #2: Solution page mockup<\/strong><\/h3>\n\n\n\n<p>This example focuses on the services the business provides.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-solution.png\" alt=\"Solution page mockup\" class=\"wp-image-201190\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-solution.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-solution-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-solution-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/19423875-Landing-page-for-a-tech-startup\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>It starts with what the company can do for users and proceeds to show how it works.&nbsp;<\/p>\n\n\n\n<p>The designer also uses a white theme with bursts of engaging colors to draw people\u2019s attention to key information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example #3: Manufacturing company website mockup<\/strong><\/h3>\n\n\n\n<p>The layout of this <a href=\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">website template<\/a> looks very organized, with the homepage showing the type of services they offer.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-manufacturing.png\" alt=\"Manufacturing company website mockup\" class=\"wp-image-201186\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-manufacturing.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-manufacturing-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-manufacturing-768x410.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/19728017-HBM-website-exploration\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The color scheme they used in the <a href=\"https:\/\/www.markup.io\/blog\/graphic-design-trends\/\" target=\"_blank\" rel=\"noreferrer noopener\">graphic design<\/a> is equally appealing. There\u2019s also a section showing the kind of products the company manufactures.<\/p>\n\n\n\n<p class=\"has-text-align-center\">***<\/p>\n\n\n\n<p>There you have it, guys!&nbsp;<\/p>\n\n\n\n<p>We bet showcasing your ideas will be much easier now, right? Just one more stop before you go!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Streamline your website mockup design with the right tool<\/h2>\n\n\n\n<p>Now that you\u2019ve been <em>mockspired,<\/em> consider integrating&nbsp;MarkUp.io into your design workflow.<\/p>\n\n\n\n<p>Here\u2019s why:<\/p>\n\n\n\n<p>Using our platform, you can share mockup designs with your team or client and get reviews and comments on specific aspects of your work.&nbsp;<\/p>\n\n\n\n<p>MarkUp.io makes it easy for them to <a href=\"https:\/\/www.markup.io\/blog\/design-feedback-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">give feedback<\/a> and for you to track and implement it, so everyone is on the same page. This helps you streamline the entire design process.<\/p>\n\n\n\n<p>We know you\u2019d like to see this for yourself \u2014 seeing is believing, after all.&nbsp;<\/p>\n\n\n\n<p>Then, by all means, <a href=\"https:\/\/app.markup.io\/signup?trial=true%3Futm_source%3Dwebsite&amp;utm_medium=markup-blog&amp;utm_campaign=website-feedback-tools&amp;utm_content=free-trial\" target=\"_blank\" rel=\"noreferrer noopener\">sign up for a free 30-day trial with MarkUp.io<\/a> so you can experience frictionless feedback with zero misunderstandings and frustration.&nbsp;<\/p>\n\n\n\n<p>Some designers say it\u2019s life-changing! \ud83e\udd2d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You finally have the website design idea you\u2019ve been thinking about for your next project.&nbsp; You know that one of the best ways to communicate your vision to clients is with mockups, but you\u2019re stuck on how to make the mockup look, so stakeholders understand the idea. If you\u2019re not sure where to start, don\u2019t &hellip; <a href=\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":201185,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-201159","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>12 website mockup examples &amp; 5 tips to ace mockup design - Markup.io<\/title>\n<meta name=\"description\" content=\"Get inspired by these 12 website mockup examples for different use cases. By reading our blog, you&#039;ll also get 5 tips on mastering web mockup design. Dive in!\" \/>\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-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 website mockup examples &amp; 5 tips to ace mockup design - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Get inspired by these 12 website mockup examples for different use cases. By reading our blog, you&#039;ll also get 5 tips on mastering web mockup design. Dive in!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-27T15:59:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-24T10:52:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg\" \/>\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\/jpeg\" \/>\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=\"13 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-examples\/\",\"url\":\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/\",\"name\":\"12 website mockup examples &amp; 5 tips to ace mockup design - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg\",\"datePublished\":\"2023-03-27T15:59:07+00:00\",\"dateModified\":\"2024-01-24T10:52:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Get inspired by these 12 website mockup examples for different use cases. By reading our blog, you'll also get 5 tips on mastering web mockup design. Dive in!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"12 website mockup examples &amp; 5 tips to ace mockup design\"}]},{\"@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":"12 website mockup examples &amp; 5 tips to ace mockup design - Markup.io","description":"Get inspired by these 12 website mockup examples for different use cases. By reading our blog, you'll also get 5 tips on mastering web mockup design. Dive in!","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-examples\/","og_locale":"en_GB","og_type":"article","og_title":"12 website mockup examples &amp; 5 tips to ace mockup design - Markup.io","og_description":"Get inspired by these 12 website mockup examples for different use cases. By reading our blog, you'll also get 5 tips on mastering web mockup design. Dive in!","og_url":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/","og_site_name":"Markup.io","article_published_time":"2023-03-27T15:59:07+00:00","article_modified_time":"2024-01-24T10:52:16+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg","type":"image\/jpeg"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/","url":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/","name":"12 website mockup examples &amp; 5 tips to ace mockup design - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg","datePublished":"2023-03-27T15:59:07+00:00","dateModified":"2024-01-24T10:52:16+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Get inspired by these 12 website mockup examples for different use cases. By reading our blog, you'll also get 5 tips on mastering web mockup design. Dive in!","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/website-mockup-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/03\/website-mockup-examples-hero.jpg","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/website-mockup-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"12 website mockup examples &amp; 5 tips to ace mockup design"}]},{"@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\/201159","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=201159"}],"version-history":[{"count":6,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201159\/revisions"}],"predecessor-version":[{"id":202961,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201159\/revisions\/202961"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/201185"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=201159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=201159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=201159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}