CINXE.COM

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> <link rel="profile" href="https://gmpg.org/xfn/11"> <title>How to Create a Website Mockup in 5 Easy Steps (+ Examples!) – Go WordPress</title> <meta name='robots' content='max-image-preview:large' /> <link rel="alternate" hreflang="x-default" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/" /> <link rel="alternate" hreflang="en" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/" /> <link rel='dns-prefetch' href='//s0.wp.com' /> <link rel='dns-prefetch' href='//s2.wp.com' /> <link rel='dns-prefetch' href='//s1.wp.com' /> <link rel='dns-prefetch' href='//enwpgo.wordpress.com' /> <link rel='dns-prefetch' href='//fonts-api.wp.com' /> <link rel="alternate" type="application/rss+xml" title="Go WordPress » Feed" href="https://wordpress.com/go/feed/" /> <link rel="alternate" type="application/rss+xml" title="Go WordPress » Comments Feed" href="https://wordpress.com/go/comments/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function () { oldonload(); func(); } } } /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/s2.wp.com\/wp-includes\/js\/wp-emoji-release.min.js?m=1719498190i&ver=6.8-alpha-59438"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <link crossorigin='anonymous' rel='stylesheet' id='all-css-0-1' href='https://s2.wp.com/_static/??-eJxtzFsKgCAQQNENZaMg+BWtRXQI39KMtP0ogiD6PHC5cHThWmWsDGWInscWKkFE7talx0CjQml+ZCTYMVtGL3oj/mh2RBP8H3NI+H5vXflaFmWU0VJLo+MJKT40cA==&cssminify=yes' type='text/css' media='all' /> <style id='wp-emoji-styles-inline-css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-2-1' href='https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/block-library/style.css?m=1731954715i&cssminify=yes' type='text/css' media='all' /> <style id='wp-block-library-inline-css'> .has-text-align-justify { text-align:justify; } .has-text-align-justify{text-align:justify;} </style> <style id='wp-parsely-recommendations-style-inline-css'> .parsely-recommendations-list-title{font-size:1.2em}.parsely-recommendations-list{list-style:none;padding:unset}.parsely-recommendations-cardbody{overflow:hidden;padding:.8em;text-overflow:ellipsis;white-space:nowrap}.parsely-recommendations-cardmedia{padding:.8em .8em 0} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-4-1' href='https://s1.wp.com/_static/??-eJyVzDEOgCAMQNELiQU1Jg7Gs2AlDYpAaInx9ro5O/7hfbiywhTFRYEcKvnIQPXN1RVSa0h4MOxOssVDBXunKoqK34DlDq5F5gb+LIoVH4k/vpyzGYe+03oyw/4AcmU1KQ==&cssminify=yes' type='text/css' media='all' /> <link crossorigin='anonymous' rel='stylesheet' id='all-css-6-1' href='https://s2.wp.com/_static/??-eJzTLy/QzcxLzilNSS3WzyrWz01NyUxMzUnNTc0rQeEU5CRWphbp5qSmJyZX6uVm5uklFxfr6OPTDpRD5sM02efaGpoZmFkYGRuZGmQBAHPvL0Y=&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-8-1' href='https://s2.wp.com/wp-content/plugins/coblocks/2.18.1-simple-rev.4/dist/coblocks-style.css?m=1681832297i&cssminify=yes' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-10-1' href='https://s1.wp.com/_static/??/wp-content/mu-plugins/core-compat/wp-mediaelement.css,/wp-content/mu-plugins/wpcom-bbpress-premium-themes.css?m=1432920480j&cssminify=yes' type='text/css' media='all' /> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-family--albert-sans: 'Albert Sans', sans-serif;--wp--preset--font-family--alegreya: Alegreya, serif;--wp--preset--font-family--arvo: Arvo, serif;--wp--preset--font-family--bodoni-moda: 'Bodoni Moda', serif;--wp--preset--font-family--bricolage-grotesque: 'Bricolage Grotesque', sans-serif;--wp--preset--font-family--cabin: Cabin, sans-serif;--wp--preset--font-family--chivo: Chivo, sans-serif;--wp--preset--font-family--commissioner: Commissioner, sans-serif;--wp--preset--font-family--cormorant: Cormorant, serif;--wp--preset--font-family--courier-prime: 'Courier Prime', monospace;--wp--preset--font-family--crimson-pro: 'Crimson Pro', serif;--wp--preset--font-family--dm-mono: 'DM Mono', monospace;--wp--preset--font-family--dm-sans: 'DM Sans', sans-serif;--wp--preset--font-family--dm-serif-display: 'DM Serif Display', serif;--wp--preset--font-family--domine: Domine, serif;--wp--preset--font-family--eb-garamond: 'EB Garamond', serif;--wp--preset--font-family--epilogue: Epilogue, sans-serif;--wp--preset--font-family--fahkwang: Fahkwang, sans-serif;--wp--preset--font-family--figtree: Figtree, sans-serif;--wp--preset--font-family--fira-sans: 'Fira Sans', sans-serif;--wp--preset--font-family--fjalla-one: 'Fjalla One', sans-serif;--wp--preset--font-family--fraunces: Fraunces, serif;--wp--preset--font-family--gabarito: Gabarito, system-ui;--wp--preset--font-family--ibm-plex-mono: 'IBM Plex Mono', monospace;--wp--preset--font-family--ibm-plex-sans: 'IBM Plex Sans', sans-serif;--wp--preset--font-family--ibarra-real-nova: 'Ibarra Real Nova', serif;--wp--preset--font-family--instrument-serif: 'Instrument Serif', serif;--wp--preset--font-family--inter: Inter, sans-serif;--wp--preset--font-family--josefin-sans: 'Josefin Sans', sans-serif;--wp--preset--font-family--jost: Jost, sans-serif;--wp--preset--font-family--libre-baskerville: 'Libre Baskerville', serif;--wp--preset--font-family--libre-franklin: 'Libre Franklin', sans-serif;--wp--preset--font-family--literata: Literata, serif;--wp--preset--font-family--lora: Lora, serif;--wp--preset--font-family--merriweather: Merriweather, serif;--wp--preset--font-family--montserrat: Montserrat, sans-serif;--wp--preset--font-family--newsreader: Newsreader, serif;--wp--preset--font-family--noto-sans-mono: 'Noto Sans Mono', sans-serif;--wp--preset--font-family--nunito: Nunito, sans-serif;--wp--preset--font-family--open-sans: 'Open Sans', sans-serif;--wp--preset--font-family--overpass: Overpass, sans-serif;--wp--preset--font-family--pt-serif: 'PT Serif', serif;--wp--preset--font-family--petrona: Petrona, serif;--wp--preset--font-family--piazzolla: Piazzolla, serif;--wp--preset--font-family--playfair-display: 'Playfair Display', serif;--wp--preset--font-family--plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;--wp--preset--font-family--poppins: Poppins, sans-serif;--wp--preset--font-family--raleway: Raleway, sans-serif;--wp--preset--font-family--roboto: Roboto, sans-serif;--wp--preset--font-family--roboto-slab: 'Roboto Slab', serif;--wp--preset--font-family--rubik: Rubik, sans-serif;--wp--preset--font-family--rufina: Rufina, serif;--wp--preset--font-family--sora: Sora, sans-serif;--wp--preset--font-family--source-sans-3: 'Source Sans 3', sans-serif;--wp--preset--font-family--source-serif-4: 'Source Serif 4', serif;--wp--preset--font-family--space-mono: 'Space Mono', monospace;--wp--preset--font-family--syne: Syne, sans-serif;--wp--preset--font-family--texturina: Texturina, serif;--wp--preset--font-family--urbanist: Urbanist, sans-serif;--wp--preset--font-family--work-sans: 'Work Sans', sans-serif;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-albert-sans-font-family{font-family: var(--wp--preset--font-family--albert-sans) !important;}.has-alegreya-font-family{font-family: var(--wp--preset--font-family--alegreya) !important;}.has-arvo-font-family{font-family: var(--wp--preset--font-family--arvo) !important;}.has-bodoni-moda-font-family{font-family: var(--wp--preset--font-family--bodoni-moda) !important;}.has-bricolage-grotesque-font-family{font-family: var(--wp--preset--font-family--bricolage-grotesque) !important;}.has-cabin-font-family{font-family: var(--wp--preset--font-family--cabin) !important;}.has-chivo-font-family{font-family: var(--wp--preset--font-family--chivo) !important;}.has-commissioner-font-family{font-family: var(--wp--preset--font-family--commissioner) !important;}.has-cormorant-font-family{font-family: var(--wp--preset--font-family--cormorant) !important;}.has-courier-prime-font-family{font-family: var(--wp--preset--font-family--courier-prime) !important;}.has-crimson-pro-font-family{font-family: var(--wp--preset--font-family--crimson-pro) !important;}.has-dm-mono-font-family{font-family: var(--wp--preset--font-family--dm-mono) !important;}.has-dm-sans-font-family{font-family: var(--wp--preset--font-family--dm-sans) !important;}.has-dm-serif-display-font-family{font-family: var(--wp--preset--font-family--dm-serif-display) !important;}.has-domine-font-family{font-family: var(--wp--preset--font-family--domine) !important;}.has-eb-garamond-font-family{font-family: var(--wp--preset--font-family--eb-garamond) !important;}.has-epilogue-font-family{font-family: var(--wp--preset--font-family--epilogue) !important;}.has-fahkwang-font-family{font-family: var(--wp--preset--font-family--fahkwang) !important;}.has-figtree-font-family{font-family: var(--wp--preset--font-family--figtree) !important;}.has-fira-sans-font-family{font-family: var(--wp--preset--font-family--fira-sans) !important;}.has-fjalla-one-font-family{font-family: var(--wp--preset--font-family--fjalla-one) !important;}.has-fraunces-font-family{font-family: var(--wp--preset--font-family--fraunces) !important;}.has-gabarito-font-family{font-family: var(--wp--preset--font-family--gabarito) !important;}.has-ibm-plex-mono-font-family{font-family: var(--wp--preset--font-family--ibm-plex-mono) !important;}.has-ibm-plex-sans-font-family{font-family: var(--wp--preset--font-family--ibm-plex-sans) !important;}.has-ibarra-real-nova-font-family{font-family: var(--wp--preset--font-family--ibarra-real-nova) !important;}.has-instrument-serif-font-family{font-family: var(--wp--preset--font-family--instrument-serif) !important;}.has-inter-font-family{font-family: var(--wp--preset--font-family--inter) !important;}.has-josefin-sans-font-family{font-family: var(--wp--preset--font-family--josefin-sans) !important;}.has-jost-font-family{font-family: var(--wp--preset--font-family--jost) !important;}.has-libre-baskerville-font-family{font-family: var(--wp--preset--font-family--libre-baskerville) !important;}.has-libre-franklin-font-family{font-family: var(--wp--preset--font-family--libre-franklin) !important;}.has-literata-font-family{font-family: var(--wp--preset--font-family--literata) !important;}.has-lora-font-family{font-family: var(--wp--preset--font-family--lora) !important;}.has-merriweather-font-family{font-family: var(--wp--preset--font-family--merriweather) !important;}.has-montserrat-font-family{font-family: var(--wp--preset--font-family--montserrat) !important;}.has-newsreader-font-family{font-family: var(--wp--preset--font-family--newsreader) !important;}.has-noto-sans-mono-font-family{font-family: var(--wp--preset--font-family--noto-sans-mono) !important;}.has-nunito-font-family{font-family: var(--wp--preset--font-family--nunito) !important;}.has-open-sans-font-family{font-family: var(--wp--preset--font-family--open-sans) !important;}.has-overpass-font-family{font-family: var(--wp--preset--font-family--overpass) !important;}.has-pt-serif-font-family{font-family: var(--wp--preset--font-family--pt-serif) !important;}.has-petrona-font-family{font-family: var(--wp--preset--font-family--petrona) !important;}.has-piazzolla-font-family{font-family: var(--wp--preset--font-family--piazzolla) !important;}.has-playfair-display-font-family{font-family: var(--wp--preset--font-family--playfair-display) !important;}.has-plus-jakarta-sans-font-family{font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;}.has-poppins-font-family{font-family: var(--wp--preset--font-family--poppins) !important;}.has-raleway-font-family{font-family: var(--wp--preset--font-family--raleway) !important;}.has-roboto-font-family{font-family: var(--wp--preset--font-family--roboto) !important;}.has-roboto-slab-font-family{font-family: var(--wp--preset--font-family--roboto-slab) !important;}.has-rubik-font-family{font-family: var(--wp--preset--font-family--rubik) !important;}.has-rufina-font-family{font-family: var(--wp--preset--font-family--rufina) !important;}.has-sora-font-family{font-family: var(--wp--preset--font-family--sora) !important;}.has-source-sans-3-font-family{font-family: var(--wp--preset--font-family--source-sans-3) !important;}.has-source-serif-4-font-family{font-family: var(--wp--preset--font-family--source-serif-4) !important;}.has-space-mono-font-family{font-family: var(--wp--preset--font-family--space-mono) !important;}.has-syne-font-family{font-family: var(--wp--preset--font-family--syne) !important;}.has-texturina-font-family{font-family: var(--wp--preset--font-family--texturina) !important;}.has-urbanist-font-family{font-family: var(--wp--preset--font-family--urbanist) !important;}.has-work-sans-font-family{font-family: var(--wp--preset--font-family--work-sans) !important;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-12-1' href='https://s2.wp.com/_static/??-eJyNjtEOwjAIRX/Ijm3JXHwwfkvt0OAoNCvV+PdWjWbxyTc4l3MD3JILKoZiEItLXM4kGYLGWJFjmrFu+Yc0lWyAQNSo2vk7vINV56eQvUzJhxmOhXgC8VeX7c74r3BSNVzWDlUmlmHBoIzmX18ObdtEkufFIe67sd9tx64f+ssD8YBVNg==&cssminify=yes' type='text/css' media='all' /> <link rel='stylesheet' id='noto-sans-font-css' href='https://fonts-api.wp.com/css?family=Noto+Sans%3A400%2C400i%2C700%2C700i&subset=cyrillic%2Ccyrillic-ext%2Cdevanagari%2Cgreek%2Cgreek-ext%2Clatin-ext%2Cvietnamese&display=swap&ver=20210909' media='all' /> <link crossorigin='anonymous' rel='stylesheet' id='all-css-14-1' href='https://s0.wp.com/_static/??-eJx9i0EOgkAMAD/kWhYS9WJ8y9rUuqS73dASwu+BG168zSQzsLSAWp2qg3+pkEF6ICwNtbCC+Sp0RbMLnMIyhyYz52ow0VuUd2TYq5P+m5g0iGLyrPVHwkdSno71VZ7x3t/i0MW+GzdiHTze&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-global-styles-frontend-style-inline-css'> @import url('https://fonts-api.wp.com/css?family=Roboto:thin,extralight,light,regular,medium,semibold,bold,italic,bolditalic,extrabold,black|Rubik:thin,extralight,light,regular,medium,semibold,bold,italic,bolditalic,extrabold,black|');:root { --font-headings: Rubik; --font-base: Roboto; --font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-16-1' href='https://s0.wp.com/_static/??-eJyNjcsKQjEMBX/ImlsQry7ET5GahrbXNCmmRfx7H7gRN+7OwGEGbs2hSifpUIdrPFIRg4V6C3j5MNgQqBoHk4HlcKUYYry/Z5G0RrMV/C06FUEwxRLYsSa1L/iR9Uz1mc0bSKznwK/DsR787Kd5P/ntbnkAuNBIYA==&cssminify=yes' type='text/css' media='all' /> <script type="text/javascript" id="jetpack_related-posts-js-extra"> /* <![CDATA[ */ var related_posts_js_options = {"post_heading":"h4"}; /* ]]> */ </script> <script type="text/javascript" id="wpcom-actionbar-placeholder-js-extra"> /* <![CDATA[ */ var actionbardata = {"siteID":"196931530","postID":"18035544","siteURL":"https:\/\/wordpress.com\/go","xhrURL":"https:\/\/wordpress.com\/wp-admin\/admin-ajax.php","nonce":"ec3b3dda62","isLoggedIn":"","statusMessage":"","subsEmailDefault":"instantly","proxyScriptUrl":"https:\/\/s0.wp.com\/wp-content\/js\/wpcom-proxy-request.js?ver=20211021","shortlink":"https:\/\/wp.me\/pdkiT0-1dFRS","i18n":{"followedText":"New posts from this site will now appear in your <a href=\"https:\/\/wordpress.com\/read\">Reader<\/a>","foldBar":"Collapse this bar","unfoldBar":"Expand this bar"}}; /* ]]> */ </script> <script type="text/javascript" id="jetpack-mu-wpcom-settings-js-before"> /* <![CDATA[ */ var JETPACK_MU_WPCOM_SETTINGS = {"assetsUrl":"https:\/\/s1.wp.com\/wp-content\/mu-plugins\/jetpack-mu-wpcom-plugin\/sun\/vendor\/automattic\/jetpack-mu-wpcom\/src\/build\/"}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/_static/??-eJyNj9EKwjAMRX/ILmygwwfxU2Rr60ht09qm6v7eDqpMQfApXHLIPYF7ENITa2JwWQSbJ6QERnMY5KVmSJnghCRhzGgVRG0H1koEnzh9psYhNSZtYHXXFMayCNE/5u/dq9AOpJbG2kDD7U9ytL54SouFEUlGDCzO3rOOImnJ6N86xd9mpdPiY65Zx7mOtfNPSDicYvmzwkd3aPtuv+vbbtuZJ9KCeZ0='></script> <script type="text/javascript" id="rlt-proxy-js-after"> /* <![CDATA[ */ rltInitialize( {"token":null,"iframeOrigins":["https:\/\/widgets.wp.com"]} ); /* ]]> */ </script> <script type="text/javascript" id="landpack-nav-script-js-after"> /* <![CDATA[ */ document.addEventListener("DOMContentLoaded", () => { const API_GEO_ENDPOINT = 'https://public-api.wordpress.com/geo/'; const FCCA_LINK_SELECTOR = '.lp-footer-stack [data-is-fcca]'; function fetchGeoData() { return fetch( API_GEO_ENDPOINT ).then( res => res.json() ); } function removeLink( selector, condition ) { document.querySelectorAll( selector ).forEach( element => { const parent = element.parentNode; const parentTagName = parent.tagName.toLowerCase(); if ( condition ) { (parentTagName === 'li' ? parent : element).remove(); } }); } /** * Checks if the given data pertains to the specified region or country * @param {string} key - The key to check in the data * @param {string} name - The region or country name to check for * @param {object} data - The geolocation data * @returns {boolean} - True if the data pertains to the specified region or country */ function pertainsTo( key, name, data ) { if ( data && data[ key ] && name ) { return data[ key ].toLowerCase() === name.toLowerCase(); } return false; } fetchGeoData().then(data => { const isFCCA = pertainsTo( 'country_long', 'germany', data ); removeLink( FCCA_LINK_SELECTOR, ! isFCCA ); }); }); /* ]]> */ </script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://enwpgo.wordpress.com/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress.com" /> <link rel='shortlink' href='https://wp.me/pdkiT0-1dFRS' /> <style> @font-face { font-family: Recoleta; font-display: swap; src: url('https://s1.wp.com/i/fonts/recoleta/400.woff2') } </style> <link rel="alternate" type="application/json+oembed" href="https://public-api.wordpress.com/oembed/?format=json&url=https%3A%2F%2Fenwpgo.wordpress.com%2Fweb-design%2Fhow-to-create-a-website-mockup-in-5-easy-steps-examples%2F&for=wpcom-auto-discovery" /><link rel="alternate" type="application/xml+oembed" href="https://public-api.wordpress.com/oembed/?format=xml&url=https%3A%2F%2Fenwpgo.wordpress.com%2Fweb-design%2Fhow-to-create-a-website-mockup-in-5-easy-steps-examples%2F&for=wpcom-auto-discovery" />  <meta property="og:type" content="article" /> <meta property="og:title" content="How to Create a Website Mockup in 5 Easy Steps (+ Examples!)" /> <meta property="og:url" content="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/" /> <meta property="og:description" content="If you want to learn how and why to create a website mockup, you can follow this easy 5-step tutorial with plenty of website mockup examples." /> <meta property="article:published_time" content="2023-09-19T13:00:00+00:00" /> <meta property="article:modified_time" content="2023-09-08T16:31:20+00:00" /> <meta property="og:site_name" content="Go WordPress" /> <meta property="og:image" content="https://enwpgo.files.wordpress.com/2023/09/website-mockup-header.jpg?w=1200" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="600" /> <meta property="og:image:alt" content="" /> <meta property="og:locale" content="en_US" /> <meta property="article:publisher" content="https://www.facebook.com/WordPresscom" /> <meta name="twitter:text:title" content="How to Create a Website Mockup in 5 Easy Steps (+ Examples!)" /> <meta name="twitter:image" content="https://enwpgo.files.wordpress.com/2023/09/website-mockup-header.jpg?w=640" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:app:name:iphone" content="Jetpack" /> <meta name="twitter:app:id:iphone" content="1565481562" /> <meta name="twitter:app:name:ipad" content="Jetpack" /> <meta name="twitter:app:id:ipad" content="1565481562" /> <meta name="twitter:app:name:googleplay" content="Jetpack" /> <meta name="twitter:app:id:googleplay" content="com.jetpack.android" /> <meta name="twitter:app:url:iphone" content="wordpress://viewpost?blogId=196931530&postId=18035544" /> <meta name="twitter:app:url:ipad" content="wordpress://viewpost?blogId=196931530&postId=18035544" /> <meta name="twitter:app:url:googleplay" content="wordpress://viewpost?blogId=196931530&postId=18035544" />  <link rel="shortcut icon" type="image/x-icon" href="https://s1.wp.com/i/favicon.ico" sizes="16x16 24x24 32x32 48x48" /> <link rel="icon" type="image/x-icon" href="https://s1.wp.com/i/favicon.ico" sizes="16x16 24x24 32x32 48x48" /> <link rel="apple-touch-icon" href="https://s2.wp.com/i/webclip.png" /> <link rel="search" type="application/opensearchdescription+xml" href="https://wordpress.com/go/osd.xml" title="Go WordPress" /> <link rel="search" type="application/opensearchdescription+xml" href="https://s1.wp.com/opensearch.xml" title="WordPress.com" /> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"NewsArticle","mainEntityOfPage":{"@type":"WebPage","@id":"http:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/"},"headline":"How to Create a Website Mockup in 5 Easy Steps (+ Examples!)","url":"http:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/","thumbnailUrl":"https:\/\/enwpgo.files.wordpress.com\/2023\/09\/website-mockup-header.jpg?w=150","image":{"@type":"ImageObject","url":"https:\/\/enwpgo.files.wordpress.com\/2023\/09\/website-mockup-header.jpg"},"dateCreated":"2023-09-19T13:00:00Z","datePublished":"2023-09-19T13:00:00Z","dateModified":"2023-09-19T13:00:00Z","articleSection":"Web Design","author":[{"@type":"Person","name":"Nick Sch\u00e4ferhoff"}],"creator":["Nick Sch\u00e4ferhoff"],"publisher":{"@type":"Organization","name":"Go WordPress","logo":""},"keywords":[]}</script><link rel="canonical" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/" /> <script type="application/ld+json"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"Corporation","@id":"https:\/\/automattic.com\/#organization","url":"https:\/\/automattic.com\/","name":"Automattic","legalName":"Automattic Inc.","foundingDate":"2005-08-01","slogan":"We don\u2019t make software for free, we make it for freedom.","description":"We are the people behind <a href=\"https:\/\/wordpress.com\/\">WordPress.com<\/a>, <a href=\"https:\/\/woocommerce.com\/\">WooCommerce<\/a>, <a href=\"https:\/\/jetpack.com\/\">Jetpack<\/a>, <a href=\"https:\/\/simplenote.com\/\">Simplenote<\/a>, <a href=\"https:\/\/longreads.com\/\">Longreads<\/a>, <a href=\"https:\/\/vaultpress.com\/\">VaultPress<\/a>, <a href=\"https:\/\/akismet.com\/\">Akismet<\/a>, <a href=\"https:\/\/gravatar.com\/\">Gravatar<\/a>, <a href=\"\">Crowdsignal<\/a>, <a href=\"https:\/\/cloudup.com\/\">Cloudup<\/a>, and more. We believe in making the web a better place, and <a href=\"https:\/\/github.com\/Automattic\">we believe in Open Source<\/a>. The vast majority of our work is available under the GPL.","logo":{"@type":"ImageObject","@id":"https:\/\/automattic.com\/#logo","url":"https:\/\/automattic.com\/wp-content\/themes\/a8c\/automattic-2011\/images\/automattic-logo-2x.png","width":552,"height":60,"caption":"Automattic"},"image":{"@id":"https:\/\/automattic.com\/#logo"},"address":{"@type":"PostalAddress","streetAddress":"60 29th Street #343","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94110","addressCountry":"US"},"founder":{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#person","name":"Matt Mullenweg","description":"In 2002 I started contributing to Open Source software, and life has just gotten better from there. Co-founder of WordPress, founder Automattic.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Matt Mullenweg"}},"numberOfEmployees":1728,"sameAs":["https:\/\/twitter.com\/automattic","https:\/\/www.facebook.com\/AutomatticInc","https:\/\/www.linkedin.com\/company\/automattic\/","https:\/\/en.wikipedia.org\/wiki\/Automattic","https:\/\/www.youtube.com\/c\/automattic"],"subOrganization":{"@id":"https:\/\/wordpress.com\/#organization"}},{"@type":"Organization","@id":"https:\/\/wordpress.com\/#organization","url":"https:\/\/wordpress.com\/","name":"WordPress.com","legalName":"Automattic Inc.","foundingDate":"2005-08-01","slogan":"Build a website, build a movement.","description":"Create a free website or build a blog with ease on WordPress.com. Dozens of free, customizable, mobile-ready designs and themes. Free hosting and support.","logo":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/#logo","url":"https:\/\/s1.wp.com\/home.logged-out\/images\/wpcom-a-website-that-can.jpg","width":1024,"height":512,"caption":"WordPress.com"},"image":{"@id":"https:\/\/wordpress.com\/#logo"},"address":{"@type":"PostalAddress","streetAddress":"60 29th Street #343","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94110","addressCountry":"US"},"founder":{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#person","name":"Matt Mullenweg","description":"In 2002 I started contributing to Open Source software, and life has just gotten better from there. Co-founder of WordPress, founder Automattic.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Matt Mullenweg"}},"numberOfEmployees":1728,"sameAs":["https:\/\/twitter.com\/wordpressdotcom","https:\/\/www.facebook.com\/WordPresscom","https:\/\/www.instagram.com\/wordpressdotcom\/","https:\/\/www.linkedin.com\/company\/wordpress","https:\/\/www.youtube.com\/WordPressdotcom","https:\/\/www.pinterest.com\/wordpressdotcom\/","https:\/\/en.wikipedia.org\/wiki\/WordPress.com"],"parentOrganization":{"@id":"https:\/\/automattic.com\/#organization"}},{"@type":"WebSite","@id":"https:\/\/wordpress.com\/go\/#website","url":"https:\/\/wordpress.com\/go\/","name":"Go WordPress","description":"","potentialAction":{"@type":"SearchAction","target":"https:\/\/wordpress.com\/go\/search\/{search_term_string}\/","query-input":"required name=search_term_string"},"publisher":{"@id":"https:\/\/wordpress.com\/#organization"}},{"@type":"BreadcrumbList","@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"item":{"@type":"WebSite","@id":"https:\/\/wordpress.com\/go\/#website-breadcrumb","url":"https:\/\/wordpress.com\/go\/","name":"Home"}},{"@type":"ListItem","position":1,"item":{"@type":"CollectionPage","@id":"https:\/\/wordpress.com\/go\/category\/web-design\/#term-breadcrumb","url":"https:\/\/wordpress.com\/go\/category\/web-design\/","name":"Web Design"}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#webpage-breadcrumb","url":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/","name":"How to Create a Website Mockup in 5 Easy Steps (+ Examples!) \u2014"}}]},{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#primaryimage","url":"https:\/\/enwpgo.files.wordpress.com\/2022\/01\/feature-image-connection.jpg?w=1200","width":1200,"height":600,"caption":"How to Create a Website Mockup in 5 Easy Steps (+ Examples!) \u2014"},{"@type":"WebPage","@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#webpage","url":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/","name":"How to Create a Website Mockup in 5 Easy Steps (+ Examples!) \u2014","description":"","inLanguage":"en","isPartOf":{"@id":"https:\/\/wordpress.com\/go\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#primaryimage"},"breadcrumb":{"@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#breadcrumbs"},"publisher":{"@id":"https:\/\/wordpress.com\/#organization"},"datePublished":"2023-09-19T13:00:00+0000","dateModified":"2023-09-08T16:31:20+0000"},{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/54604352#person","name":"Nick Sch\u00e4ferhoff","description":"Nick Sch\u00e4ferhoff is writer, entrepreneur, and online marketer. He has been building websites and writing about digital marketing for more than a decade. Outside of work, you can most often find him at the gym, the dojo, or traveling with his wife. Get in touch with him via nickschaeferhoff.com.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/54604352#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/5f069a6cacb95c3811aa06a1884d3a5d?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Nick Sch\u00e4ferhoff"}},{"@type":"Article","@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#article","headline":"How to Create a Website Mockup in 5 Easy Steps (+ Examples!) \u2014","commentCount":0,"keywords":"web design","datePublished":"2023-09-19T13:00:00+0000","dateModified":"2023-09-08T16:31:20+0000","mainEntityOfPage":{"@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#webpage"},"isPartOf":{"@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#webpage"},"image":{"@id":"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/#primaryimage"},"publisher":{"@id":"https:\/\/wordpress.com\/#organization"},"author":{"@id":"https:\/\/wordpress.com\/schema.org\/author\/54604352#person"}}]} </script> <meta name="application-name" content="Go WordPress" /><meta name="msapplication-window" content="width=device-width;height=device-height" /><meta name="description" content="If you want to learn how and why to create a website mockup, you can follow this easy 5-step tutorial with plenty of website mockup examples." /> <link rel="stylesheet" id="custom-css-css" type="text/css" href="https://s2.wp.com/?custom-css=1&csblog=dkiT0&cscache=6&csrev=36" /> </head> <body class="post-template-default single single-post postid-18035544 single-format-standard customizer-styles-applied has-sidebar jetpack-reblog-enabled"> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content">Skip to content</a> <header class="masterbar">  <nav class="x-wpcom-global-nav x-nav" aria-label="WordPress.com"> <ul class="x-nav-list"> <li class="x-nav-item lpc x-nav--logo"> <a role="menuitem" class="x-nav-link x-nav-link--logo x-link" href="https://wordpress.com/"> <svg class="x-icon x-icon--logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 36" role="presentation" aria-label="WordPress.com logo"><path d="M52.84 12.9c1.08 0 2 .24 2.8.71.78.47 1.4 1.14 1.82 1.99.44.85.65 1.84.65 2.97 0 1.13-.21 2.12-.65 2.97a4.78 4.78 0 0 1-1.83 1.97 5.3 5.3 0 0 1-2.79.7c-1.07 0-2-.23-2.79-.7a4.77 4.77 0 0 1-1.83-1.97 6.44 6.44 0 0 1-.64-2.97c0-1.13.21-2.13.64-2.97a4.77 4.77 0 0 1 1.83-1.99c.79-.47 1.72-.7 2.8-.7ZM31.37 9.4l2.65 10.73h.13L36.97 9.4h2.6l2.83 10.74h.13L45.17 9.4h2.85L43.9 24h-2.62l-2.94-10.25h-.11L35.28 24h-2.62L28.52 9.4h2.85Zm21.49 5.55c-.6 0-1.1.16-1.49.49a2.9 2.9 0 0 0-.88 1.3 5.4 5.4 0 0 0-.29 1.82c0 .67.1 1.27.3 1.81.18.54.48.97.87 1.3.4.32.9.48 1.49.48.58 0 1.07-.16 1.46-.48.39-.33.68-.76.88-1.3a5.4 5.4 0 0 0 .29-1.8c0-.68-.1-1.29-.3-1.83a2.88 2.88 0 0 0-.87-1.3c-.4-.33-.87-.49-1.46-.49ZM64.7 12.9a2.75 2.75 0 0 0-2.7 1.98h-.12v-1.83h-2.5v10.96h2.58v-6.44a2.27 2.27 0 0 1 1.2-2.07c.39-.2.81-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm8.95 1.96h-.1a4.93 4.93 0 0 0-.57-.85c-.24-.3-.57-.56-.99-.78a3.44 3.44 0 0 0-1.59-.32 4.24 4.24 0 0 0-3.93 2.55 7.1 7.1 0 0 0-.6 3.08c0 1.22.2 2.22.59 3.06a4.16 4.16 0 0 0 3.94 2.59 3.16 3.16 0 0 0 2.57-1.07c.25-.3.44-.58.58-.84h.15V24h2.55V9.4h-2.6v5.46Zm-.25 5.53c-.2.53-.5.95-.88 1.24-.38.3-.85.45-1.4.45-.55 0-1.04-.15-1.43-.46-.4-.3-.69-.73-.88-1.26-.2-.54-.3-1.15-.3-1.83 0-.69.1-1.28.3-1.81.19-.53.48-.94.87-1.24.38-.3.87-.45 1.44-.45.58 0 1.03.15 1.42.43.38.3.67.7.87 1.22.2.53.3 1.14.3 1.85 0 .7-.1 1.33-.3 1.86Zm13.24-10.36a5.87 5.87 0 0 0-2.84-.63h-5.5V24h2.66v-4.93h2.8c1.13 0 2.08-.2 2.86-.63a4.23 4.23 0 0 0 1.75-1.71c.4-.73.6-1.56.6-2.5s-.2-1.75-.6-2.48a4.22 4.22 0 0 0-1.73-1.72Zm-.68 5.58c-.2.4-.52.71-.93.94-.43.23-.96.34-1.62.34h-2.45v-5.28h2.43c.67 0 1.21.11 1.63.33.42.22.74.53.94.92.2.4.3.85.3 1.37 0 .53-.1.98-.3 1.38Zm9.39-2.71a2.75 2.75 0 0 0-2.71 1.98h-.12v-1.83h-2.51v10.96h2.59v-6.44a2.27 2.27 0 0 1 1.2-2.07c.38-.2.8-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm9.81 1.33c-.47-.45-1-.78-1.6-1a5.68 5.68 0 0 0-4.66.4 4.87 4.87 0 0 0-1.82 2 6.49 6.49 0 0 0-.65 2.96c0 1.13.22 2.14.65 2.99a4.62 4.62 0 0 0 1.84 1.95c.8.46 1.75.69 2.85.69.85 0 1.61-.13 2.28-.39a4.2 4.2 0 0 0 1.63-1.1c.43-.47.72-1.02.87-1.66l-2.42-.27a2 2 0 0 1-.5.78 2.56 2.56 0 0 1-1.82.63 2.9 2.9 0 0 1-1.48-.36 2.46 2.46 0 0 1-.98-1.04 3.5 3.5 0 0 1-.35-1.57h7.66v-.8c0-.96-.13-1.78-.4-2.48a4.71 4.71 0 0 0-1.1-1.72Zm-6.15 3.26c.03-.43.13-.83.33-1.2a2.57 2.57 0 0 1 2.34-1.37 2.34 2.34 0 0 1 2.18 1.25c.2.38.31.82.32 1.32h-5.17Zm14.65.27-1.87-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.36-.77c0-.37.18-.67.54-.9.37-.24.82-.36 1.36-.36.4 0 .74.07 1.02.2.27.13.5.3.66.5.16.21.28.44.35.67l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.05-.82 6.2 6.2 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.55 1.76c0 .8.25 1.46.75 1.98s1.29.89 2.34 1.1l1.88.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.19.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84.91 0 1.72-.15 2.43-.44.7-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.26-1.42-.77-1.9a4.76 4.76 0 0 0-2.32-1.07Zm10.13 0-1.88-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.35-.77c0-.37.17-.67.54-.9a2.4 2.4 0 0 1 1.36-.36c.4 0 .73.07 1.01.2a1.8 1.8 0 0 1 1.01 1.17l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.04-.82 6.1 6.1 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.56 1.76c0 .8.25 1.46.76 1.98.5.52 1.28.89 2.34 1.1l1.87.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.18.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84a6.3 6.3 0 0 0 2.43-.44c.71-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.25-1.42-.76-1.9a4.76 4.76 0 0 0-2.32-1.07Zm5.85 3.28a1.55 1.55 0 0 0-1.58 1.55c0 .44.15.8.46 1.11.3.3.68.46 1.12.46.28 0 .54-.07.77-.21.24-.14.43-.33.58-.57a1.5 1.5 0 0 0-.25-1.89c-.32-.3-.68-.45-1.1-.45ZM136 15.4c.4-.28.87-.42 1.4-.42.62 0 1.12.18 1.5.53.37.35.61.8.71 1.32h2.48a4.07 4.07 0 0 0-.7-2.07 4.07 4.07 0 0 0-1.65-1.37 5.52 5.52 0 0 0-2.38-.5 4.83 4.83 0 0 0-4.61 2.71 6.47 6.47 0 0 0-.64 2.96c0 1.11.2 2.08.63 2.93a4.77 4.77 0 0 0 1.81 2 5.3 5.3 0 0 0 2.83.72 5.4 5.4 0 0 0 2.4-.5 4.04 4.04 0 0 0 2.3-3.46h-2.47c-.08.4-.22.73-.42 1-.2.28-.46.5-.76.64s-.65.21-1.03.21c-.54 0-1-.14-1.4-.43-.4-.28-.71-.7-.94-1.23a5.03 5.03 0 0 1-.32-1.92c0-.75.1-1.37.33-1.9.22-.53.53-.93.93-1.22Zm14.8-1.8a5.34 5.34 0 0 0-2.79-.7c-1.07 0-2 .23-2.8.7a4.77 4.77 0 0 0-1.82 1.99 6.49 6.49 0 0 0-.65 2.97c0 1.13.22 2.12.65 2.97.43.84 1.04 1.5 1.83 1.97s1.72.7 2.79.7 2-.23 2.8-.7a4.78 4.78 0 0 0 1.82-1.97 6.5 6.5 0 0 0 .65-2.97 6.5 6.5 0 0 0-.65-2.97 4.77 4.77 0 0 0-1.83-1.99Zm-.44 6.76c-.19.54-.48.97-.88 1.3-.39.32-.87.48-1.46.48a2.3 2.3 0 0 1-1.48-.48c-.4-.33-.69-.76-.88-1.3-.2-.54-.3-1.14-.3-1.8 0-.68.1-1.29.3-1.83.2-.54.49-.98.88-1.3.4-.33.89-.49 1.48-.49.6 0 1.07.16 1.46.49.4.32.69.76.88 1.3.2.54.3 1.15.3 1.82 0 .67-.1 1.27-.3 1.81Zm18.68-6.5a3.36 3.36 0 0 0-2.47-.96c-.8 0-1.49.18-2.07.54-.58.37-1 .85-1.23 1.46h-.12a2.85 2.85 0 0 0-1.08-1.47 3.2 3.2 0 0 0-1.89-.54 3.3 3.3 0 0 0-1.9.54c-.53.35-.9.84-1.14 1.47h-.12v-1.87h-2.48V24h2.6v-6.66c0-.46.08-.85.26-1.2.18-.33.43-.6.73-.78.31-.2.65-.28 1.02-.28.55 0 1 .17 1.34.5.34.34.5.8.5 1.36V24h2.55v-6.83c0-.62.17-1.12.52-1.51.35-.39.84-.58 1.47-.58a2 2 0 0 1 1.33.47c.36.32.54.82.54 1.5V24h2.6v-7.35c0-1.23-.32-2.16-.96-2.8v.01ZM11.47 5.33c6.32 0 11.46 5.12 11.46 11.42a11.46 11.46 0 0 1-22.93 0c0-6.3 5.14-11.42 11.47-11.42Zm.18 12.32-3.1 8.95a10.38 10.38 0 0 0 6.34-.16.9.9 0 0 1-.07-.15l-3.17-8.64Zm-9.6-5.08A10.26 10.26 0 0 0 6.97 26Zm18.46-.75c.05.33.07.68.07 1.06 0 1.04-.2 2.21-.78 3.68l-3.15 9.06a10.26 10.26 0 0 0 3.86-13.8ZM11.47 6.5c-3.6 0-6.77 1.84-8.62 4.63A23.92 23.92 0 0 0 6.26 11c.56-.03.62.78.07.85 0 0-.56.06-1.18.1L8.9 23.06l2.26-6.74-1.6-4.39c-.56-.03-1.09-.1-1.09-.1-.55-.03-.49-.87.07-.84 0 0 1.7.13 2.71.13C12.33 11.13 14 11 14 11c.55-.03.62.78.07.85 0 0-.56.06-1.18.1l3.72 11.04 1.03-3.43a9.5 9.5 0 0 0 .79-3.32 5.4 5.4 0 0 0-.85-2.83c-.53-.85-1.02-1.56-1.02-2.4 0-.95.72-1.83 1.74-1.83h.13a10.28 10.28 0 0 0-6.96-2.69Z" /></svg> </a> </li> <li class="x-nav-item x-nav-item--wide"> <button role="menuitem" class="x-nav-link x-link" data-dropdown-trigger="products" aria-haspopup="true" aria-expanded="false"> Products <span class="x-nav-link-chevron" aria-hidden="true"></span> </button> </li> <li class="x-nav-item x-nav-item--wide"> <button role="menuitem" class="x-nav-link x-link" data-dropdown-trigger="features" aria-haspopup="true" aria-expanded="false"> Features <span class="x-nav-link-chevron" aria-hidden="true"></span> </button> </li> <li class="x-nav-item x-nav-item--wide"> <button role="menuitem" class="x-nav-link x-link" data-dropdown-trigger="resources" aria-haspopup="true" aria-expanded="false"> Resources <span class="x-nav-link-chevron" aria-hidden="true"></span> </button> </li> <li class="x-nav-item x-nav-item--wide lpc x-nav--pricing"> <a role="menuitem" class="x-nav-link x-link" href="https://wordpress.com/pricing/"> Plans & Pricing </a> </li> </ul> <ul class="x-nav-list"> <li class="x-nav-item x-nav-item--wide lpc x-nav--log-in"> <a role="menuitem" class="x-nav-link x-link" href="https://wordpress.com/log-in/"> Log in </a> </li> <li class="x-nav-item x-nav-item--wide lpc x-nav--sign-up"> <a role="menuitem" class="x-nav-link x-nav-link--primary x-link" href="https://wordpress.com/start/"> Get started </a> </li> <li class="x-nav-item x-nav-item--narrow"> <button role="menuitem" class="x-nav-link x-nav-link--menu x-link" aria-haspopup="true" aria-expanded="false"> <span class="x-hidden">Menu</span> <span class="x-icon x-icon--menu"> <span></span> <span></span> <span></span> </span> </button> </li> </ul> </nav> <div class="x-dropdown"> <div class="x-dropdown-top"> <div class="x-dropdown-top-fill"></div> </div> <div class="x-dropdown-middle"></div> <div class="x-dropdown-bottom"> <div class="x-dropdown-bottom-fill"></div> </div> <div class="x-dropdown-content" data-dropdown-name="products" role="menu" aria-label="Products" aria-hidden="true"> <ul> <li class="lpc x-nav--hosting"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/hosting/" tabindex="-1"> WordPress Hosting </a> </li> <li class="lpc x-nav--agencies"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/for-agencies/" tabindex="-1"> WordPress for Agencies </a> </li> <li class="lpc x-nav--domains"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/domains/" tabindex="-1"> Domain Names </a> </li> <li class="lpc x-nav--website-builder"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/website-builder/" tabindex="-1"> Website Builder </a> </li> <li class="lpc x-nav--create-blog"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/create-blog/" tabindex="-1"> Create a Blog </a> </li> <li class="lpc x-nav--newsletter"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/newsletter/" tabindex="-1"> Newsletter </a> </li> <li class="lpc x-nav--email"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/professional-email/" tabindex="-1"> Professional Email </a> </li> <li class="lpc x-nav--website-design-service"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/website-design-service/" tabindex="-1"> Website Design Services </a> </li> <li class="lpc x-nav--ecommerce"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/ecommerce/" tabindex="-1"> Commerce </a> </li> <li class="lpc x-nav--vip x-nav-show_separator_above"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wpvip.com/wordpress-vip-agile-content-platform?utm_source=WordPresscom&utm_medium=automattic_referral&utm_campaign=top_nav" tabindex="-1"> Enterprise WordPress<span class="x-nav__external-link-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="x-icon x-icon--external" role="presentation" aria-hidden="true"> <path d="M5.5 0v1h1.795L2.38 5.915l.705.705L8 1.705V3.5h1V0H5.5zM8 8H1V1h3V0H1a1 1 0 00-1 1v7a1 1 0 001 1h7a1 1 0 001-1V5H8v3z" /> </svg></span> </a> </li> </ul> </div> <div class="x-dropdown-content" data-dropdown-name="features" role="menu" aria-label="Features" aria-hidden="true"> <ul> <li class="lpc x-nav--features"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/features/" tabindex="-1"> Overview </a> </li> <li class="lpc x-nav--themes x-nav-show_separator_above"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/themes" tabindex="-1"> WordPress Themes </a> </li> <li class="lpc x-nav--plugins"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/plugins" tabindex="-1"> WordPress Plugins </a> </li> <li class="lpc x-nav--patterns"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/patterns" tabindex="-1"> WordPress Patterns </a> </li> <li class="lpc x-nav--google"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/google/" tabindex="-1"> Google Apps </a> </li> </ul> </div> <div class="x-dropdown-content" data-dropdown-name="resources" role="menu" aria-label="Resources" aria-hidden="true"> <ul> <li class="lpc x-nav--support"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/support/" tabindex="-1"> WordPress.com Support </a> </li> <li class="lpc x-nav--blog"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/blog/" tabindex="-1"> WordPress News </a> </li> <li class="lpc x-nav--experts"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/go/" tabindex="-1"> Website Building Tips </a> </li> <li class="lpc x-nav--business-name-generator"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/business-name-generator/" tabindex="-1"> Business Name Generator </a> </li> <li class="lpc x-nav--logo-maker"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/logo-maker/" tabindex="-1"> Logo Maker </a> </li> <li class="lpc x-nav--discover"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/discover" tabindex="-1"> Discover New Posts </a> </li> <li class="lpc x-nav--tags"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/tags" tabindex="-1"> Popular Tags </a> </li> <li class="lpc x-nav--search"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/read/search" tabindex="-1"> Blog Search </a> </li> <li class="lpc x-nav--webinars"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/webinars/" tabindex="-1"> Daily Webinars </a> </li> <li class="lpc x-nav--learn"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/learn/" tabindex="-1"> Learn WordPress </a> </li> </ul> </div> </div> <div class="x-menu" role="menu" aria-label="WordPress.com Navigation Menu" aria-hidden="true"> <div class="x-menu-overlay"></div> <div class="x-menu-content"> <button class="x-menu-button x-link" tabindex="-1"> <span class="x-hidden">Close the navigation menu</span> <span class="x-icon x-icon--close"> <span></span> <span></span> </span> </button> <div class="x-menu-list"> <div class="x-menu-list-title"> Get started </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--sign-up"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/start/" tabindex="-1"> Sign up <span class="x-menu-link-chevron" aria-hidden="true"></span> </a> </li> <li class="x-menu-grid-item lpc x-nav--log-in"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/log-in/" tabindex="-1"> Log in <span class="x-menu-link-chevron" aria-hidden="true"></span> </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-hidden"> About </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--pricing"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/pricing/" tabindex="-1"> Plans & Pricing </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-menu-list-title"> Products </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--hosting"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/hosting/" tabindex="-1"> WordPress Hosting </a> </li> <li class="x-menu-grid-item lpc x-nav--agencies"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/for-agencies/" tabindex="-1"> WordPress for Agencies </a> </li> <li class="x-menu-grid-item lpc x-nav--domains"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/domains/" tabindex="-1"> Domain Names </a> </li> <li class="x-menu-grid-item lpc x-nav--website-builder"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/website-builder/" tabindex="-1"> Website Builder </a> </li> <li class="x-menu-grid-item lpc x-nav--create-blog"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/create-blog/" tabindex="-1"> Create a Blog </a> </li> <li class="x-menu-grid-item lpc x-nav--newsletter"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/newsletter/" tabindex="-1"> Newsletter </a> </li> <li class="x-menu-grid-item lpc x-nav--email"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/professional-email/" tabindex="-1"> Professional Email </a> </li> <li class="x-menu-grid-item lpc x-nav--website-design-service"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/website-design-service/" tabindex="-1"> Website Design Services </a> </li> <li class="x-menu-grid-item lpc x-nav--ecommerce"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/ecommerce/" tabindex="-1"> Commerce </a> </li> <li class="x-menu-grid-item lpc x-nav--vip"> <a role="menuitem" class="x-menu-link x-link" href="https://wpvip.com/wordpress-vip-agile-content-platform?utm_source=WordPresscom&utm_medium=automattic_referral&utm_campaign=top_nav" tabindex="-1"> Enterprise WordPress <span class="x-nav__external-link-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="x-icon x-icon--external" role="presentation" aria-hidden="true"> <path d="M5.5 0v1h1.795L2.38 5.915l.705.705L8 1.705V3.5h1V0H5.5zM8 8H1V1h3V0H1a1 1 0 00-1 1v7a1 1 0 001 1h7a1 1 0 001-1V5H8v3z" /> </svg></span> </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-menu-list-title"> Features </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--features"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/features/" tabindex="-1"> Overview </a> </li> <li class="x-menu-grid-item lpc x-nav--themes"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/themes" tabindex="-1"> WordPress Themes </a> </li> <li class="x-menu-grid-item lpc x-nav--plugins"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/plugins" tabindex="-1"> WordPress Plugins </a> </li> <li class="x-menu-grid-item lpc x-nav--patterns"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/patterns" tabindex="-1"> WordPress Patterns </a> </li> <li class="x-menu-grid-item lpc x-nav--google"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/google/" tabindex="-1"> Google Apps </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-menu-list-title"> Resources </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--support"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/support/" tabindex="-1"> WordPress.com Support </a> </li> <li class="x-menu-grid-item lpc x-nav--blog"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/blog/" tabindex="-1"> WordPress News </a> </li> <li class="x-menu-grid-item lpc x-nav--experts"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/go/" tabindex="-1"> Website Building Tips </a> </li> <li class="x-menu-grid-item lpc x-nav--business-name-generator"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/business-name-generator/" tabindex="-1"> Business Name Generator </a> </li> <li class="x-menu-grid-item lpc x-nav--logo-maker"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/logo-maker/" tabindex="-1"> Logo Maker </a> </li> <li class="x-menu-grid-item lpc x-nav--discover"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/discover" tabindex="-1"> Discover New Posts </a> </li> <li class="x-menu-grid-item lpc x-nav--tags"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/tags" tabindex="-1"> Popular Tags </a> </li> <li class="x-menu-grid-item lpc x-nav--search"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/read/search" tabindex="-1"> Blog Search </a> </li> <li class="x-menu-grid-item lpc x-nav--webinars"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/webinars/" tabindex="-1"> Daily Webinars </a> </li> <li class="x-menu-grid-item lpc x-nav--learn"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/learn/" tabindex="-1"> Learn WordPress </a> </li> </ul> </div> <div class="x-menu-list is-mobile-app-supported"> <div class="x-menu-list-title"> Jetpack App </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--mobile-badge x-nav--apple-app-store is-ios"> <a role="menuitem" class="x-menu-link x-link" href="https://apps.wordpress.com/get/?campaign=wpcom-log-out-home-global-nav" tabindex="-1"> <img src="https://wpcom.files.wordpress.com/2023/06/group-1000004724.png" loading="lazy" alt="" role="presentation" width="120" height="34"> </a> </li> <li class="x-menu-grid-item lpc x-nav--mobile-badge x-nav--google-play is-android"> <a role="menuitem" class="x-menu-link x-link" href="https://apps.wordpress.com/get/?campaign=wpcom-log-out-home-global-nav" tabindex="-1"> <img src="https://wpcom.files.wordpress.com/2023/06/play-store-logo.png" loading="lazy" alt="" role="presentation" width="120" height="34"> </a> </li> <li class="x-menu-grid-item lpc x-nav--learn-more"> <a role="menuitem" class="x-menu-link x-link" href="https://apps.wordpress.com/mobile" tabindex="-1"> Learn more <span class="x-menu-link-chevron" aria-hidden="true"></span> </a> </li> </ul> </div> </div> </div> <nav id="secondary-navigation" class="secondary-navigation" aria-label="Category Navigation"> <div class="wpcom-go-header__home-link"> <a href="https://wordpress.com/go/" rel="home">Go by WordPress.com</a> <button class="menu-toggle" aria-controls="menu-secondary-menu" aria-expanded="false"> <span class="menu-toggle__text">Browse</span> <span class="menu-toggle__hamburger"></span> </button> </div> <ul id="menu-secondary-menu" class="wpcom-go-header__nav nav-menu" aria-expanded="false"> <li class="menu-item"> <a href="https://wordpress.com/go/category/website-building/">Website Building</a> </li> <li class="menu-item current-menu-item"> <a href="https://wordpress.com/go/category/web-design/">Web Design</a> </li> <li class="menu-item"> <a href="https://wordpress.com/go/category/content-blogging/">Content & Blogging</a> </li> <li class="menu-item"> <a href="https://wordpress.com/go/category/digital-marketing/">Digital Marketing</a> </li> <li class="menu-item"> <a href="https://wordpress.com/go/category/tutorials/">Tutorials</a> </li> <li class="wpcom-go-search search-form-mobile"> <form class="search-form" method="get" action="https://wordpress.com/go/"> <input type="text" class="wpcom-h4-go-search-field" name="s" placeholder="Search tips" value=""> <input type="submit" value="Search" aria-hidden="true"> </form> </li> </ul>  </nav> </header> <main id="content" class="site-content site-main"> <article id="post-18035544" class="post-18035544 post type-post status-publish format-standard has-post-thumbnail hentry category-web-design"> <div class="single-header-wrapper"> <div class="featured-image"> <img src="https://enwpgo.files.wordpress.com/2023/09/website-mockup-header.jpg?w=1024" alt="How to Create a Website Mockup in 5 Easy Steps (+ Examples!)" srcset="https://enwpgo.files.wordpress.com/2023/09/website-mockup-header.jpg?w=660 660w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-header.jpg?w=960 960w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-header.jpg?w=1024 1280w" sizes="(max-width: 768px) 100vw, 100vw"/> </div> <header class="entry-header"> <div class="entry-header-text"> <div class="post-category"><svg class="go-category-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM6 6h5v5H6V6zm4.5 13C9.12 19 8 17.88 8 16.5S9.12 14 10.5 14s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm3-6l3-5 3 5h-6z"/></g></svg><span class="cat-links"><a href="https://wordpress.com/go/category/web-design/" rel="category tag">Web Design</a></span></div><h1 class="entry-title no-widows">How to Create a Website Mockup in 5 Easy Steps (+ Examples!)</h1><span class="posted-on"><time class="entry-date published updated" datetime="2023-09-19T09:00:00-04:00">September 19, 2023</time></span> </div> </header> <div class="entry-meta"> <span class="byline"> <span class="author-avatar"><img loading="lazy" alt='' src='https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=150&d=mysteryman&r=G' srcset='https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=150&d=mysteryman&r=G 1x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=225&d=mysteryman&r=G 1.5x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=300&d=mysteryman&r=G 2x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=450&d=mysteryman&r=G 3x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=600&d=mysteryman&r=G 4x' class='avatar avatar-150' height='150' width='150' loading='lazy' decoding='async' /></span><span class="author vcard"><a class="url fn n" href="https://wordpress.com/go/author/nschaeferhoff/">Nick Schäferhoff</a></span></span> </div> </div> <div class="entry-content-wrapper"> <div class="entry-content"> <p>A website mockup is a crucial step in the <a href="https://wordpress.com/go/web-design/web-design-process/">web design process</a>. Like wireframes, they help visualize the end product without starting to actually <a href="https://wordpress.com/go/website-building/how-to-make-a-website/">build a website</a> yet. This helps clarify your vision and get everyone involved on the same page, as well as make decisions before committing to a design.</p> <figure class="wp-block-image size-large"><a href="https://wordpress.com/start/?ref=website-go"><img data-attachment-id="18033033" data-permalink="https://wordpress.com/go/startyoursite-1/" data-orig-file="https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png" data-orig-size="2170,1088" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="startyoursite" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=1024" width="1024" height="513" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=1024" alt="Open a store. Launch a business. You can. You will. We'll help. Invent the world's greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it's going to need a website - that's where we come in. Start your website." class="wp-image-18033033" srcset="https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=1024 1024w, https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=2046 2046w, https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=150 150w, https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=300 300w, https://enwpgo.files.wordpress.com/2023/06/startyoursite-1.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>Because they are such a crucial tool for this process, in this post, we will cover everything you need to know about website mockups. The post explains what a website mockup is, the purpose of creating one, lays out some examples, and a step-by-step guide to mock up your own <a href="https://wordpress.com/go/web-design/20-basic-website-design-elements-and-why-they-matter/">website design</a>.</p> <p>At the end of the post, we want you to feel capable of using this tool to build exactly the website you want to build.</p> <div class="wp-block-group has-background" style="background-color:#fef7f2"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <p style="font-size:26px"><strong>In this article:</strong></p> <ul class="wp-block-list"> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#what-is-a-website-mockup">What is a Website Mockup?</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#what-s-the-purpose-of-creating-a-mockup-before-development">What’s the Purpose of Creating a Mockup Before Development?</a> <ul class="wp-block-list"> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#visualize-your-site-and-collect-feedback">Visualize Your Site and Collect Feedback</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#save-time-and-market-your-skills">Save Time and Market Your Skills</a></li> </ul> </li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#5-website-mockup-examples-to-better-understand-their-purpose">5 Website Mockup Examples to Better Understand Their Purpose</a> <ul class="wp-block-list"> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#shop-page-website-mockup">Shop Page Website Mockup</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#elearning-website-design-mockup">eLearning Website Design Mockup</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#clothing-website-design-mockup">Clothing Website Design Mockup</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#landing-page-mockup-for-a-tech-startup-website">Landing Page Mockup for a Tech Startup Website</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#food-delivery-website-mockup">Food Delivery Website Mockup</a></li> </ul> </li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#how-to-create-a-website-mockup-that-looks-great">How to Create a Website Mockup That Looks Great</a> <ul class="wp-block-list"> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#1-pick-your-design-tool">1. Pick Your Design Tool</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#2-set-up-your-wireframe">2. Set Up Your Wireframe</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#3-add-visual-elements">3. Add Visual Elements</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#4-share-collect-feedback-iterate">4. Share, Collect Feedback, Iterate</a></li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#5-next-stop-prototype">5. Next Stop, Prototype</a></li> </ul> </li> <li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/#don-t-skip-the-website-mockup-step">Don’t Skip the Website Mockup Step</a></li> </ul> </div></div> <h2 class="wp-block-heading" id="what-is-a-website-mockup">What is a Website Mockup?</h2> <p>Let’s start with the obvious question. What exactly is a website mockup? It’s easier to show than tell, so here is an image to help clarify.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035546" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/website-mockup-example-1/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg" data-orig-size="1400,1607" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="website-mockup-example-1" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg?w=261" data-large-file="https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg?w=892" width="892" height="1023" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg?w=892" alt="" class="wp-image-18035546" srcset="https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg?w=892 892w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg?w=131 131w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg?w=261 261w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-example-1.jpg 1400w" sizes="(max-width: 892px) 100vw, 892px" /></figure> <p>Now, the above looks like a screenshot of a finished website, doesn’t it?</p> <p>It’s not. This is not an image taken from a website that already exists; instead, it’s a visual representation of what a website will look like in the end. It contains the main <a href="https://wordpress.com/go/web-design/website-layout/">layouts</a>, branding, colors, fonts, text, and images.</p> <p>Basically, it has everything you need except for the final ingredient: interactivity. A website mockup is a static image file and is not available in the browser. It has no animations, pop-ups, or working links. All of those are added in the prototyping phase.</p> <p>What’s important to note is that, just like wireframes, website mockups can contain different levels of detail. Similar to their counterparts, you also differentiate between low-fidelity and high-fidelity mockups. The first kind contains less, the second more details.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035547" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/website-mockup-lowfi-highfi/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp" data-orig-size="916,1024" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="website-mockup-lowfi-highfi" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp?w=268" data-large-file="https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp?w=916" width="916" height="1024" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp?w=916" alt="" class="wp-image-18035547" srcset="https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp 916w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp?w=134 134w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp?w=268 268w, https://enwpgo.files.wordpress.com/2023/09/website-mockup-lowfi-highfi.webp?w=768 768w" sizes="(max-width: 916px) 100vw, 916px" /></figure> <p>This doesn’t mean that one is better than the other. A low-fidelity mockup can also simply be a step on the way to a high-fidelity version.</p> <p>It’s also important to note that the distinction between a high-fidelity wireframe and a low-fidelity mockup is a bit fluid. They can be pretty much the same thing. But splitting hairs like this is also a bit counterproductive. In the end, what’s important is how you use these tools to arrive at the design of your website.</p> <h2 class="wp-block-heading" id="what-s-the-purpose-of-creating-a-mockup-before-development">What’s the Purpose of Creating a Mockup Before Development?</h2> <p>So, why would you create a website mockup in the first place? What is the point?</p> <h3 class="wp-block-heading" id="visualize-your-site-and-collect-feedback">Visualize Your Site and Collect Feedback</h3> <p>Ideally, mockups are one of the stages of your web design process. A mockup is a step further than a wireframe, which only concerns itself with structure and layout.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035548" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/structure-layout/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp" data-orig-size="1024,768" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="structure-layout" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp?w=1024" width="1024" height="768" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp?w=1024" alt="" class="wp-image-18035548" srcset="https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp 1024w, https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/structure-layout.webp?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure> <p>In this part of the website creation process, on the other hand, you already get a lot closer to the finalized design. Here, you fill the structural elements with content and life. That includes colors, button shapes, <a href="https://wordpress.com/go/website-building/website-branding/">branding elements</a>, visual hierarchy, etc. It’s sort of a middle stage, where you can already fully picture what the final website will look like.</p> <p>Because website mockups are a lot closer to the final website, they allow you to communicate your ideas more clearly to other parties involved. This helps get everyone on the same page and, most importantly, allows stakeholders to voice their opinions.</p> <p>In most cases, there are a whole bunch of people or even departments concerned with the website creation process. Having a concrete visual to work with makes it much easier to give and collect feedback. Especially since many mockup tools have feedback functionality built-in, so you can collect it all in one place.</p> <p>Gathering feedback is an invaluable part of the design process since it allows you to curate additional ideas and iterate on the website concept until it fulfills all the roles it is supposed to.</p> <h3 class="wp-block-heading" id="save-time-and-market-your-skills">Save Time and Market Your Skills</h3> <p>Another benefit of website mockups is that they save time. It’s easier to change some colors or move elements around in an image than it is to go into the codebase of a website and make the changes there. That’s true even for <a href="https://wordpress.com/go/tutorials/how-to-customize-wordpress-themes-no-code-needed/">website customizations that don’t require coding</a>. Plus, mockups make it faster to create several different design versions.</p> <p>Website mockups can also be a great tool, even if they are not for a concrete project. You can use them for marketing purposes and to show off your skills. As you will see in the website mockup examples below, you can also use them to simply explore website ideas. That way, you can stretch your creativity and also create samples of what you are capable of to attract clients.</p> <h2 class="wp-block-heading" id="5-website-mockup-examples-to-better-understand-their-purpose">5 Website Mockup Examples to Better Understand Their Purpose</h2> <p>As mentioned, there are different levels of website mockups. To give you a better impression of what they can look like, let’s go over some examples.</p> <h3 class="wp-block-heading" id="shop-page-website-mockup">Shop Page Website Mockup</h3> <figure class="wp-block-image size-large"><img data-attachment-id="18035549" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/shop-page-website-mockup/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg" data-orig-size="800,600" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="shop-page-website-mockup" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg?w=800" width="800" height="600" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg?w=800" alt="" class="wp-image-18035549" srcset="https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg 800w, https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/shop-page-website-mockup.jpg?w=768 768w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption"><a href="https://dribbble.com/shots/1164825-Shop-Page">Source</a></figcaption></figure> <p>Here is an example of a low-fidelity mockup (or high-fidelity wireframe). You can see that it already contains important elements like colors and <a href="https://wordpress.com/go/web-design/web-font-best-practices-5-tips-on-choosing-a-font-for-your-brand/">typography</a>; however, a lot of it is still empty, and there are no images. Still, it gives a good impression of the direction this website is headed.</p> <h3 class="wp-block-heading" id="elearning-website-design-mockup">eLearning Website Design Mockup</h3> <figure class="wp-block-image size-large"><img data-attachment-id="18035550" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/elearning-website-design-mockup/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg" data-orig-size="1202,1156" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="elearning-website-design-mockup" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg?w=1024" width="1024" height="984" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg?w=1024" alt="" class="wp-image-18035550" srcset="https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg?w=1024 1024w, https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/elearning-website-design-mockup.jpg 1202w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption"><a href="https://www.behance.net/gallery/178555739/eLearning-Website-Design">Source</a></figcaption></figure> <p>Next up is this mockup for an eLearning website. While it still has placeholder text, you can already clearly see what the end product will look like. It has a logo, colors, icons, and even drop-shadow already in place. There is plenty of material to provide feedback for.</p> <h3 class="wp-block-heading" id="clothing-website-design-mockup">Clothing Website Design Mockup</h3> <figure class="wp-block-image size-large is-resized"><img data-attachment-id="18035551" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/clothing-website-design-mockup/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg" data-orig-size="800,600" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="clothing-website-design-mockup" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg?w=800" width="800" height="600" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg?w=800" alt="" class="wp-image-18035551" style="width:840px;height:auto" srcset="https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg 800w, https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/clothing-website-design-mockup.jpg?w=768 768w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption"><a href="https://dribbble.com/shots/1492470-Clothing-Website">Source</a></figcaption></figure> <p>This fashion website mockup is pretty detailed. You can see a logo, images, font types, colors, and icons. Note that it even shows the hover behavior for an element as a preview for later interactivity.</p> <h3 class="wp-block-heading" id="landing-page-mockup-for-a-tech-startup-website">Landing Page Mockup for a Tech Startup Website</h3> <figure class="wp-block-image size-large"><img data-attachment-id="18035552" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/landing-page-mockup-tech-startup/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg" data-orig-size="1536,1152" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="landing-page-mockup-tech-startup" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg?w=1024" width="1024" height="768" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg?w=1024" alt="" class="wp-image-18035552" srcset="https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg?w=1024 1024w, https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/landing-page-mockup-tech-startup.jpg 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption"><a href="https://dribbble.com/shots/19498930-Landing-pages-for-a-tech-startup">Source</a></figcaption></figure> <p>This example is a mockup of a landing page. It, too, is pretty advanced. Note how it includes both the desktop and mobile versions, which you always need to consider.</p> <h3 class="wp-block-heading" id="food-delivery-website-mockup">Food Delivery Website Mockup</h3> <figure class="wp-block-image size-large"><img data-attachment-id="18035553" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/food-delivery-website-mockup/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/food-delivery-website-mockup.jpg" data-orig-size="640,826" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="food-delivery-website-mockup" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/food-delivery-website-mockup.jpg?w=232" data-large-file="https://enwpgo.files.wordpress.com/2023/09/food-delivery-website-mockup.jpg?w=640" width="640" height="826" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/food-delivery-website-mockup.jpg?w=640" alt="" class="wp-image-18035553" srcset="https://enwpgo.files.wordpress.com/2023/09/food-delivery-website-mockup.jpg 640w, https://enwpgo.files.wordpress.com/2023/09/food-delivery-website-mockup.jpg?w=116 116w, https://enwpgo.files.wordpress.com/2023/09/food-delivery-website-mockup.jpg?w=232 232w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption class="wp-element-caption"><a href="https://dribbble.com/shots/20225698-Olla-Food-Delivery-Landing-Page">Source</a></figcaption></figure> <p>The final example is a mockup for a food delivery service landing page or <a href="https://wordpress.com/go/website-building/building-a-restaurant-website/">restaurant website</a>. It is very far advanced and even has some custom icons and images as well as concrete content/dishes. Seems like it could be a screenshot from an existing website, doesn’t it?</p> <h2 class="wp-block-heading" id="how-to-create-a-website-mockup-that-looks-great">How to Create a Website Mockup That Looks Great</h2> <p>Now that we have a better idea about what a website mockup looks like and why you should create one, let’s go over how to do so, including the tools you can use for it.</p> <p>However, in order to successfully mock up a website design, you first have to have a few things in place. As mentioned, it’s the middle stage of the <a href="https://wordpress.com/go/website-building/website-planning-template/">website planning process</a>, so you should already have a foundation to work with, including:</p> <ul class="wp-block-list"> <li><a href="https://wordpress.com/go/digital-marketing/website-metrics-goals/">Website goals</a></li> <li><a href="https://wordpress.com/go/digital-marketing/how-to-use-personas-in-digital-marketing/">Target group</a></li> <li>Content</li> <li><a href="https://wordpress.com/go/website-building/website-branding/">Branding and color scheme</a></li> <li><a href="https://wordpress.com/go/website-building/website-structure-optimized-for-ux-seo/">Website structure</a></li> <li><a href="https://wordpress.com/go/web-design/website-wireframe/">Wireframes</a></li> </ul> <p>With these in mind, let’s now go off and create a website mockup.</p> <h3 class="wp-block-heading" id="1-pick-your-design-tool">1. Pick Your Design Tool</h3> <p>While you can also create a mockup physically in real life, it is much easier if you use a digital tool. That will also help you share it with others and collect feedback more conveniently.</p> <p>Website mockup tools roughly fall into two categories:</p> <ul class="wp-block-list"> <li><strong>Wireframing and prototyping tools</strong> – This is specialized software for exactly the purpose of creating mockups. They can often accommodate the entire process from wireframes all the way to prototypes. Tools like these come with common UI components and libraries to make the creation process faster and also usually have collaboration and feedback tools. Some can even deliver HTML and CSS code. Popular solutions in this category are <a href="https://www.adobe.com/products/xd/learn/get-started/what-is-adobe-xd-used-for.html">Adobe XD</a>, <a href="https://www.figma.com/">Figma</a>, <a href="https://www.sketch.com/">Sketch</a> (Mac only), <a href="https://www.mockplus.com/">Mockplus</a>, <a href="https://www.justinmind.com/">Justinmind</a>, and <a href="https://moqups.com/">Moqups</a>.</li> <li><strong>Graphic design tools</strong> – While graphic design software works for more than just this one purpose, they also make excellent solutions for creating website mockups. Some of them are so powerful that they are especially suitable for high-fidelity mockups or unusual layouts. Examples include <a href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a> and <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, <a href="https://www.canva.com/">Canva</a>, and <a href="https://www.visme.co/">Visme</a>.</li> </ul> <p>For this tutorial, we are going with Figma. They have a free plan where you can work on one file, which is completely sufficient for the purposes of this demonstration.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035554" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/figma-tutorial-1/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg" data-orig-size="1536,761" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="figma-tutorial-1" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg?w=1024" width="1024" height="507" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg?w=1024" alt="" class="wp-image-18035554" srcset="https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg?w=1024 1024w, https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/figma-tutorial-1.jpg 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure> <p>Plus, you can use their wireframing kit to quickly put together a structure to work on.</p> <h3 class="wp-block-heading" id="2-set-up-your-wireframe">2. Set Up Your Wireframe</h3> <p>Speaking of which, as already mentioned, wireframes are the predecessors of mockups. They provide the layout skeleton and, therefore, form the basis for more detailed design work. So, that’s what we want to start off with.</p> <p>As listed above, ideally, you already have your wireframes, so this step mostly involves setting them up or importing them into your tool of choice. If you are not that far, now is the time to roll up your sleeves and get started. Refer to our detailed <a href="https://wordpress.com/go/web-design/website-wireframe/">wireframe tutorial</a> for more information. Don’t forget to create wireframes for both the desktop and mobile versions of your site!</p> <p>In Figma, to get started, we first open the aforementioned wireframing kit. It comes with a lot of built-in components like menus, hero images, footers, etc. to quickly put together a design foundation.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035555" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/figma-wireframe/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg" data-orig-size="1536,727" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="figma-wireframe" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg?w=1024" width="1024" height="484" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg?w=1024" alt="" class="wp-image-18035555" srcset="https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg?w=1024 1024w, https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/figma-wireframe.jpg 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure> <p>After a bit of mucking about, this is the website layout we are left with:</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035556" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/figma-layout/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg" data-orig-size="1121,1999" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="figma-layout" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg?w=168" data-large-file="https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg?w=574" width="574" height="1023" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg?w=574" alt="" class="wp-image-18035556" srcset="https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg?w=574 574w, https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg?w=84 84w, https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg?w=168 168w, https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/figma-layout.jpg 1121w" sizes="(max-width: 574px) 100vw, 574px" /></figure> <h3 class="wp-block-heading" id="3-add-visual-elements">3. Add Visual Elements</h3> <p>After you’ve put the skeleton in place, it is now time to make it look more like a finished website. Using your wireframe as a foundation, start incorporating visual elements such as:</p> <ul class="wp-block-list"> <li>Color scheme</li> <li>Typography</li> <li>Content</li> <li>Images</li> <li>Navigation</li> <li>Logo and other branding elements</li> </ul> <p>In our example case, we have adjusted font types, added colors, and included images and some written content.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035557" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/figma-add-visuals/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg" data-orig-size="1110,1999" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="figma-add-visuals" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg?w=167" data-large-file="https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg?w=569" width="569" height="1024" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg?w=569" alt="" class="wp-image-18035557" srcset="https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg?w=569 569w, https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg?w=83 83w, https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg?w=167 167w, https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/figma-add-visuals.jpg 1110w" sizes="(max-width: 569px) 100vw, 569px" /></figure> <p>Looks a lot more like a website already, doesn’t it?</p> <p>The important thing is to take it one step at a time. You can make changes to singular components and even do several versions and tinker with it until you feel ready to show it to someone else.</p> <h3 class="wp-block-heading" id="4-share-collect-feedback-iterate">4. Share, Collect Feedback, Iterate</h3> <p>Once you have settled on a version that you are satisfied with, now is the time to share it with other people involved in the project. That can be team members, clients, stakeholders, and maybe even users.</p> <p>In Figma, you have a built-in function to circulate the mockup directly from inside the tool via email.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035558" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/figma-sharing/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg" data-orig-size="921,705" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="figma-sharing" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg?w=921" width="921" height="705" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg?w=921" alt="" class="wp-image-18035558" srcset="https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg 921w, https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/figma-sharing.jpg?w=768 768w" sizes="(max-width: 921px) 100vw, 921px" /></figure> <p>You can also determine whether invitees can edit or only view the file in question. They also have the possibility to comment on the file, and you can have conversations with them inside the mockup for clarification.</p> <figure class="wp-block-image size-large"><img data-attachment-id="18035559" data-permalink="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/attachment/figma-comments/" data-orig-file="https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg" data-orig-size="1536,761" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="figma-comments" data-image-description="" data-image-caption="" data-medium-file="https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg?w=300" data-large-file="https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg?w=1024" width="1024" height="507" loading="lazy" src="https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg?w=1024" alt="" class="wp-image-18035559" srcset="https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg?w=1024 1024w, https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg?w=150 150w, https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg?w=300 300w, https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg?w=768 768w, https://enwpgo.files.wordpress.com/2023/09/figma-comments.jpg 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure> <p>This stage is especially useful if you involve people who don’t have anything to do with the project. They haven’t developed the same blindness as you might have and can come to the whole thing with a fresh perspective.</p> <p>Don’t be afraid if not everything you hear back is positive. The whole point of creating a website mockup is to gather feedback in order to improve the design.</p> <p>Remember, this is not the final product. The point is to provide a design reference from which to develop the end result. Therefore, try to get your ego out of the way and focus on listening to what others tell you. They might see something you have overlooked or come up with ideas you hadn’t considered. Remember, all of this helps to end up with a better website in the end.</p> <p>Once the first round of feedback is done, it’s time to go back to the drawing board. Go through the suggestions you received, find solutions to issues that have cropped up, and improve your website mockup until you feel ready to share it again. Then, rinse and repeat.</p> <h3 class="wp-block-heading" id="5-next-stop-prototype">5. Next Stop, Prototype</h3> <p>When the mockup is done, the next step is to create an interactive prototype. Here, in addition to the design, you also test <a href="https://wordpress.com/go/web-design/enhance-your-ux-with-design-cues-from-award-winning-websites/">usability</a> and user behavior. It’s the last step before finalizing the website.</p> <p>However, the foundation for that is that you have a proper mockup. As you have hopefully seen, these website design phases all build upon one another. It’s much easier to take the next step when you have successfully finished the previous stage.</p> <p>Therefore, before moving on to prototyping, be sure that you have spent enough time in the mockup phase to give yourself the best chance to ace the next one as well.</p> <h2 class="wp-block-heading" id="don-t-skip-the-website-mockup-step">Don’t Skip the Website Mockup Step</h2> <p>Website mockups are a great tool to help you design websites that are both aesthetically pleasing and functional. It’s the stage of the design process where the rough concept gets closer to reality, and you move towards a real vision of what the finished site will look like.</p> <p>It’s also the stage where you gather invaluable input. Having more than one pair of eyeballs on the progress of the project is always a good idea and can get you some fresh input.</p> <p>For that reason, the mockup phase is something you should not skip. It helps you get a lot more clarity and, if done right, results in a better final website.</p> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <hr class="wp-block-separator has-alpha-channel-opacity" /> <p><strong>Want more tips? Get new post notifications emailed to you.</strong></p> <div class="wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline wp-block-jetpack-subscriptions"> <div class="wp-block-jetpack-subscriptions__container is-not-subscriber"> <form action="https://wordpress.com/email-subscriptions" method="post" accept-charset="utf-8" data-blog="196931530" data-post_access_level="everybody" data-subscriber_email="" id="subscribe-blog" > <div class="wp-block-jetpack-subscriptions__form-elements"> <p id="subscribe-email"> <label id="subscribe-field-label" for="subscribe-field" class="screen-reader-text" > Type your email… </label> <input required="required" type="email" name="email" class="no-border-radius has-vivid-cyan-blue-border-color" style="font-size: 16px;padding: 15px 23px 15px 23px;border-color: vivid-cyan-blue;border-radius: 0px;border-width: 1px;" placeholder="Type your email…" value="" id="subscribe-field" title="Please fill in this field." /> </p> <p id="subscribe-submit" > <input type="hidden" name="action" value="subscribe"/> <input type="hidden" name="blog_id" value="196931530"/> <input type="hidden" name="source" value="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/"/> <input type="hidden" name="sub-type" value="subscribe-block"/> <input type="hidden" name="app_source" value=""/> <input type="hidden" name="redirect_fragment" value="subscribe-blog"/> <input type="hidden" name="lang" value="en"/> <input type="hidden" id="_wpnonce" name="_wpnonce" value="62f991b203" /><input type="hidden" name="_wp_http_referer" value="/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/" /><input type="hidden" name="post_id" value="18035544"/> <button type="submit" class="wp-block-button__link no-border-radius has-vivid-cyan-blue-border-color has-text-color has-white-color has-background has-vivid-cyan-blue-background-color" style="font-size: 16px;padding: 15px 23px 15px 23px;margin-top: 10px;border-color: vivid-cyan-blue;border-radius: 0px;border-width: 1px;" name="jetpack_subscriptions_widget" > Subscribe </button> </p> </div> </form> </div> </div> <hr class="wp-block-separator has-alpha-channel-opacity" /> </div></div> <div id="jp-post-flair" class="sharedaddy sd-like-enabled sd-sharing-enabled"><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-tumblr"><a rel="nofollow noopener noreferrer" data-shared="" class="share-tumblr sd-button share-icon" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/?share=tumblr" target="_blank" title="Click to share on Tumblr" ><span>Tumblr</span></a></li><li class="share-twitter"><a rel="nofollow noopener noreferrer" data-shared="sharing-twitter-18035544" class="share-twitter sd-button share-icon" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/?share=twitter" target="_blank" title="Click to share on Twitter" ><span>Twitter</span></a></li><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-18035544" class="share-facebook sd-button share-icon" href="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/?share=facebook" target="_blank" title="Click to share on Facebook" ><span>Facebook</span></a></li><li class="share-end"></li></ul></div></div></div><div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-196931530-18035544-67466202bf3ef' data-src='//widgets.wp.com/likes/index.html?ver=20241127#blog_id=196931530&post_id=18035544&origin=enwpgo.wordpress.com&obj_id=196931530-18035544-67466202bf3ef&domain=wordpress.com' data-name='like-post-frame-196931530-18035544-67466202bf3ef' data-title='Like or Reblog'><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class='loading'>Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Related</em></h3> </div></div> </div> <div class="about-the-author"><h4><span>ABOUT THE AUTHOR</span></h4><div class="author-bio"><div class="author-avatar"><img loading="lazy" alt='' src='https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=150&d=mysteryman&r=G' srcset='https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=150&d=mysteryman&r=G 1x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=225&d=mysteryman&r=G 1.5x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=300&d=mysteryman&r=G 2x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=450&d=mysteryman&r=G 3x, https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=600&d=mysteryman&r=G 4x' class='avatar avatar-150' height='150' width='150' loading='lazy' decoding='async' /></div><div class="author-details"><h4>Nick Schäferhoff</h4><p class="author-description">Nick Schäferhoff is writer, entrepreneur, and online marketer. He has been building websites and writing about digital marketing for more than a decade. Outside of work, you can most often find him at the gym, the dojo, or traveling with his wife. Get in touch with him via nickschaeferhoff.com.</p><p class="author-archive"><a class="link__more" href="https://wordpress.com/go/author/nschaeferhoff/">More by Nick Schäferhoff</a></p></div></div></div> </div> <footer class="entry-footer"> <div class="go-cta__create"><h2 class="no-widows">Let our experts build your custom WordPress.com website.</h2><p class="text__cta no-widows">Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.</p><a class="button__cta" href="https://wordpress.com/website-design-service/?ref=wpcomgo-footer-link">Get started</a></div> <div class="related-posts"> <h4><span>RECOMMENDED ARTICLES</span></h4> <div class="post-grid"> <article id="post-18034646" class="post-18034646 post type-post status-publish format-standard has-post-thumbnail hentry category-web-design"> <a class="post-card" href="https://wordpress.com/go/web-design/ai-web-design/" rel="bookmark"> <div class="featured-image"> <div class="post-thumbnail"> <img src="https://enwpgo.files.wordpress.com/2023/08/ai-website.jpg?w=1024" alt="How to Leverage AI and Web Design to Improve Your Website" srcset="https://enwpgo.files.wordpress.com/2023/08/ai-website.jpg?w=660 660w, https://enwpgo.files.wordpress.com/2023/08/ai-website.jpg?w=960 960w, https://enwpgo.files.wordpress.com/2023/08/ai-website.jpg?w=1024 1280w" sizes="(max-width: 768px) 100vw, 100vw"/> </div> </div> <header class="entry-header"> <div class="post-category"><svg class="go-category-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM6 6h5v5H6V6zm4.5 13C9.12 19 8 17.88 8 16.5S9.12 14 10.5 14s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm3-6l3-5 3 5h-6z"/></g></svg><span class="cat-links">Web Design</span></div><h2 class="entry-title no-widows">How to Leverage AI and Web Design to Improve Your Website</h2> </header> </a> </article> <article id="post-17994133" class="post-17994133 post type-post status-publish format-standard has-post-thumbnail hentry category-web-design"> <a class="post-card" href="https://wordpress.com/go/web-design/free-web-design-is-a-reality-with-wordpress-com/" rel="bookmark"> <div class="featured-image"> <div class="post-thumbnail"> <img src="https://enwpgo.files.wordpress.com/2017/11/0a0d7-webdesigncontentcreative_479670.jpg?w=1024" alt="Free Web Design Is a Reality With WordPress.com" srcset="https://enwpgo.files.wordpress.com/2017/11/0a0d7-webdesigncontentcreative_479670.jpg?w=660 660w, https://enwpgo.files.wordpress.com/2017/11/0a0d7-webdesigncontentcreative_479670.jpg?w=960 960w, https://enwpgo.files.wordpress.com/2017/11/0a0d7-webdesigncontentcreative_479670.jpg?w=1024 1280w" sizes="(max-width: 768px) 100vw, 100vw"/> </div> </div> <header class="entry-header"> <div class="post-category"><svg class="go-category-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM6 6h5v5H6V6zm4.5 13C9.12 19 8 17.88 8 16.5S9.12 14 10.5 14s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm3-6l3-5 3 5h-6z"/></g></svg><span class="cat-links">Web Design</span></div><h2 class="entry-title no-widows">Free Web Design Is a Reality With WordPress.com</h2> </header> </a> </article> <article id="post-17994042" class="post-17994042 post type-post status-publish format-standard has-post-thumbnail hentry category-web-design"> <a class="post-card" href="https://wordpress.com/go/web-design/anatomy-of-a-website/" rel="bookmark"> <div class="featured-image"> <div class="post-thumbnail"> <img src="https://enwpgo.files.wordpress.com/2017/10/91875-webtemplatewebsitedesign_472389.jpg?w=1024" alt="Understanding the Anatomy of a Website" srcset="https://enwpgo.files.wordpress.com/2017/10/91875-webtemplatewebsitedesign_472389.jpg?w=660 660w, https://enwpgo.files.wordpress.com/2017/10/91875-webtemplatewebsitedesign_472389.jpg?w=960 960w, https://enwpgo.files.wordpress.com/2017/10/91875-webtemplatewebsitedesign_472389.jpg?w=1024 1280w" sizes="(max-width: 768px) 100vw, 100vw"/> </div> </div> <header class="entry-header"> <div class="post-category"><svg class="go-category-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM6 6h5v5H6V6zm4.5 13C9.12 19 8 17.88 8 16.5S9.12 14 10.5 14s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm3-6l3-5 3 5h-6z"/></g></svg><span class="cat-links">Web Design</span></div><h2 class="entry-title no-widows">Understanding the Anatomy of a Website</h2> </header> </a> </article> </div></div> </footer> </article> </main> <section class="wpcom-go-footer__subfooter"> <div class="section-content"> <div class="subfooter-cta-text"> <h2 class="subfooter-cta-bg-text"> Design your portfolio. <span>Open a store.</span> <span>Launch a business.</span> </h2> <h2> You can. You will. <span>We’ll help.</span> </h2> <p class="no-widows">Invent the world’s greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it’s going to need a website—that’s where we come in.</p> <a class="button__cta" href="https://wordpress.com/start/?ref=go%2Fweb-design%2Fhow-to-create-a-website-mockup-in-5-easy-steps-examples-lp">Start your website</a> </div> <div class="subfooter-cta-image"> <img loading="lazy" src="https://s2.wp.com/wp-content/themes/a8c/wpcomgo/assets/images/man-with-shadow-go.jpg" alt="Man with Shadow"> </div> </div> </section> <section class="wpcom-global-nav-footer lp-block lp-footer-section lp-section is-style-text-white-background-gray-100 lp-padding-top-7 lp-padding-bottom-0" data-section-name="footer"><div class="lp-section__content has-small-font-size has-text-align-left"><div class="lp-wrapper lp-wrapper--layout-center-minus lp-wrapper--layout-wide@L"><div class="lp-padding-bottom-5 lp-padding-bottom-6@L"><h2 class="lp-hidden">WordPress.com</h2><svg class="lp-footer-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 36" role="presentation" aria-label="WordPress.com logo"><path d="M52.84 12.9c1.08 0 2 .24 2.8.71.78.47 1.4 1.14 1.82 1.99.44.85.65 1.84.65 2.97 0 1.13-.21 2.12-.65 2.97a4.78 4.78 0 0 1-1.83 1.97 5.3 5.3 0 0 1-2.79.7c-1.07 0-2-.23-2.79-.7a4.77 4.77 0 0 1-1.83-1.97 6.44 6.44 0 0 1-.64-2.97c0-1.13.21-2.13.64-2.97a4.77 4.77 0 0 1 1.83-1.99c.79-.47 1.72-.7 2.8-.7ZM31.37 9.4l2.65 10.73h.13L36.97 9.4h2.6l2.83 10.74h.13L45.17 9.4h2.85L43.9 24h-2.62l-2.94-10.25h-.11L35.28 24h-2.62L28.52 9.4h2.85Zm21.49 5.55c-.6 0-1.1.16-1.49.49a2.9 2.9 0 0 0-.88 1.3 5.4 5.4 0 0 0-.29 1.82c0 .67.1 1.27.3 1.81.18.54.48.97.87 1.3.4.32.9.48 1.49.48.58 0 1.07-.16 1.46-.48.39-.33.68-.76.88-1.3a5.4 5.4 0 0 0 .29-1.8c0-.68-.1-1.29-.3-1.83a2.88 2.88 0 0 0-.87-1.3c-.4-.33-.87-.49-1.46-.49ZM64.7 12.9a2.75 2.75 0 0 0-2.7 1.98h-.12v-1.83h-2.5v10.96h2.58v-6.44a2.27 2.27 0 0 1 1.2-2.07c.39-.2.81-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm8.95 1.96h-.1a4.93 4.93 0 0 0-.57-.85c-.24-.3-.57-.56-.99-.78a3.44 3.44 0 0 0-1.59-.32 4.24 4.24 0 0 0-3.93 2.55 7.1 7.1 0 0 0-.6 3.08c0 1.22.2 2.22.59 3.06a4.16 4.16 0 0 0 3.94 2.59 3.16 3.16 0 0 0 2.57-1.07c.25-.3.44-.58.58-.84h.15V24h2.55V9.4h-2.6v5.46Zm-.25 5.53c-.2.53-.5.95-.88 1.24-.38.3-.85.45-1.4.45-.55 0-1.04-.15-1.43-.46-.4-.3-.69-.73-.88-1.26-.2-.54-.3-1.15-.3-1.83 0-.69.1-1.28.3-1.81.19-.53.48-.94.87-1.24.38-.3.87-.45 1.44-.45.58 0 1.03.15 1.42.43.38.3.67.7.87 1.22.2.53.3 1.14.3 1.85 0 .7-.1 1.33-.3 1.86Zm13.24-10.36a5.87 5.87 0 0 0-2.84-.63h-5.5V24h2.66v-4.93h2.8c1.13 0 2.08-.2 2.86-.63a4.23 4.23 0 0 0 1.75-1.71c.4-.73.6-1.56.6-2.5s-.2-1.75-.6-2.48a4.22 4.22 0 0 0-1.73-1.72Zm-.68 5.58c-.2.4-.52.71-.93.94-.43.23-.96.34-1.62.34h-2.45v-5.28h2.43c.67 0 1.21.11 1.63.33.42.22.74.53.94.92.2.4.3.85.3 1.37 0 .53-.1.98-.3 1.38Zm9.39-2.71a2.75 2.75 0 0 0-2.71 1.98h-.12v-1.83h-2.51v10.96h2.59v-6.44a2.27 2.27 0 0 1 1.2-2.07c.38-.2.8-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm9.81 1.33c-.47-.45-1-.78-1.6-1a5.68 5.68 0 0 0-4.66.4 4.87 4.87 0 0 0-1.82 2 6.49 6.49 0 0 0-.65 2.96c0 1.13.22 2.14.65 2.99a4.62 4.62 0 0 0 1.84 1.95c.8.46 1.75.69 2.85.69.85 0 1.61-.13 2.28-.39a4.2 4.2 0 0 0 1.63-1.1c.43-.47.72-1.02.87-1.66l-2.42-.27a2 2 0 0 1-.5.78 2.56 2.56 0 0 1-1.82.63 2.9 2.9 0 0 1-1.48-.36 2.46 2.46 0 0 1-.98-1.04 3.5 3.5 0 0 1-.35-1.57h7.66v-.8c0-.96-.13-1.78-.4-2.48a4.71 4.71 0 0 0-1.1-1.72Zm-6.15 3.26c.03-.43.13-.83.33-1.2a2.57 2.57 0 0 1 2.34-1.37 2.34 2.34 0 0 1 2.18 1.25c.2.38.31.82.32 1.32h-5.17Zm14.65.27-1.87-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.36-.77c0-.37.18-.67.54-.9.37-.24.82-.36 1.36-.36.4 0 .74.07 1.02.2.27.13.5.3.66.5.16.21.28.44.35.67l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.05-.82 6.2 6.2 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.55 1.76c0 .8.25 1.46.75 1.98s1.29.89 2.34 1.1l1.88.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.19.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84.91 0 1.72-.15 2.43-.44.7-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.26-1.42-.77-1.9a4.76 4.76 0 0 0-2.32-1.07Zm10.13 0-1.88-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.35-.77c0-.37.17-.67.54-.9a2.4 2.4 0 0 1 1.36-.36c.4 0 .73.07 1.01.2a1.8 1.8 0 0 1 1.01 1.17l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.04-.82 6.1 6.1 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.56 1.76c0 .8.25 1.46.76 1.98.5.52 1.28.89 2.34 1.1l1.87.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.18.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84a6.3 6.3 0 0 0 2.43-.44c.71-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.25-1.42-.76-1.9a4.76 4.76 0 0 0-2.32-1.07Zm5.85 3.28a1.55 1.55 0 0 0-1.58 1.55c0 .44.15.8.46 1.11.3.3.68.46 1.12.46.28 0 .54-.07.77-.21.24-.14.43-.33.58-.57a1.5 1.5 0 0 0-.25-1.89c-.32-.3-.68-.45-1.1-.45ZM136 15.4c.4-.28.87-.42 1.4-.42.62 0 1.12.18 1.5.53.37.35.61.8.71 1.32h2.48a4.07 4.07 0 0 0-.7-2.07 4.07 4.07 0 0 0-1.65-1.37 5.52 5.52 0 0 0-2.38-.5 4.83 4.83 0 0 0-4.61 2.71 6.47 6.47 0 0 0-.64 2.96c0 1.11.2 2.08.63 2.93a4.77 4.77 0 0 0 1.81 2 5.3 5.3 0 0 0 2.83.72 5.4 5.4 0 0 0 2.4-.5 4.04 4.04 0 0 0 2.3-3.46h-2.47c-.08.4-.22.73-.42 1-.2.28-.46.5-.76.64s-.65.21-1.03.21c-.54 0-1-.14-1.4-.43-.4-.28-.71-.7-.94-1.23a5.03 5.03 0 0 1-.32-1.92c0-.75.1-1.37.33-1.9.22-.53.53-.93.93-1.22Zm14.8-1.8a5.34 5.34 0 0 0-2.79-.7c-1.07 0-2 .23-2.8.7a4.77 4.77 0 0 0-1.82 1.99 6.49 6.49 0 0 0-.65 2.97c0 1.13.22 2.12.65 2.97.43.84 1.04 1.5 1.83 1.97s1.72.7 2.79.7 2-.23 2.8-.7a4.78 4.78 0 0 0 1.82-1.97 6.5 6.5 0 0 0 .65-2.97 6.5 6.5 0 0 0-.65-2.97 4.77 4.77 0 0 0-1.83-1.99Zm-.44 6.76c-.19.54-.48.97-.88 1.3-.39.32-.87.48-1.46.48a2.3 2.3 0 0 1-1.48-.48c-.4-.33-.69-.76-.88-1.3-.2-.54-.3-1.14-.3-1.8 0-.68.1-1.29.3-1.83.2-.54.49-.98.88-1.3.4-.33.89-.49 1.48-.49.6 0 1.07.16 1.46.49.4.32.69.76.88 1.3.2.54.3 1.15.3 1.82 0 .67-.1 1.27-.3 1.81Zm18.68-6.5a3.36 3.36 0 0 0-2.47-.96c-.8 0-1.49.18-2.07.54-.58.37-1 .85-1.23 1.46h-.12a2.85 2.85 0 0 0-1.08-1.47 3.2 3.2 0 0 0-1.89-.54 3.3 3.3 0 0 0-1.9.54c-.53.35-.9.84-1.14 1.47h-.12v-1.87h-2.48V24h2.6v-6.66c0-.46.08-.85.26-1.2.18-.33.43-.6.73-.78.31-.2.65-.28 1.02-.28.55 0 1 .17 1.34.5.34.34.5.8.5 1.36V24h2.55v-6.83c0-.62.17-1.12.52-1.51.35-.39.84-.58 1.47-.58a2 2 0 0 1 1.33.47c.36.32.54.82.54 1.5V24h2.6v-7.35c0-1.23-.32-2.16-.96-2.8v.01ZM11.47 5.33c6.32 0 11.46 5.12 11.46 11.42a11.46 11.46 0 0 1-22.93 0c0-6.3 5.14-11.42 11.47-11.42Zm.18 12.32-3.1 8.95a10.38 10.38 0 0 0 6.34-.16.9.9 0 0 1-.07-.15l-3.17-8.64Zm-9.6-5.08A10.26 10.26 0 0 0 6.97 26Zm18.46-.75c.05.33.07.68.07 1.06 0 1.04-.2 2.21-.78 3.68l-3.15 9.06a10.26 10.26 0 0 0 3.86-13.8ZM11.47 6.5c-3.6 0-6.77 1.84-8.62 4.63A23.92 23.92 0 0 0 6.26 11c.56-.03.62.78.07.85 0 0-.56.06-1.18.1L8.9 23.06l2.26-6.74-1.6-4.39c-.56-.03-1.09-.1-1.09-.1-.55-.03-.49-.87.07-.84 0 0 1.7.13 2.71.13C12.33 11.13 14 11 14 11c.55-.03.62.78.07.85 0 0-.56.06-1.18.1l3.72 11.04 1.03-3.43a9.5 9.5 0 0 0 .79-3.32 5.4 5.4 0 0 0-.85-2.83c-.53-.85-1.02-1.56-1.02-2.4 0-.95.72-1.83 1.74-1.83h.13a10.28 10.28 0 0 0-6.96-2.69Z" /></svg></div><div class="lp-grid lp-grid--type-footer lp-grid--gutter-y-4"><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Products</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--hosting"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/hosting/">WordPress Hosting</a></li><li class="lp-block x-nav-footer--agencies"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/for-agencies/">WordPress for Agencies</a></li><li class="lp-block x-nav-footer--domains"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/domains/">Domain Names</a></li><li class="lp-block x-nav-footer--website-builder"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/website-builder/">Website Builder</a></li><li class="lp-block x-nav-footer--create-blog"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/create-blog/">Create a Blog</a></li><li class="lp-block x-nav-footer--email"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/professional-email/">Professional Email</a></li><li class="lp-block x-nav-footer--p2"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/p2/">P2: WordPress for Teams</a></li><li class="lp-block x-nav-footer--website-design-service"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/website-design-service/">Website Design Services</a></li><li class="lp-block x-nav-footer--vip"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wpvip.com/wordpress-vip-agile-content-platform?utm_source=WordPresscom&utm_medium=automattic_referral&utm_campaign=footer">Enterprise <span class="lp-link-chevron-external">WordPress</span></a></li></ul></details></div><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Features</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--features"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/features/">Overview</a></li><li class="lp-block x-nav-footer--themes"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/themes">WordPress Themes</a></li><li class="lp-block x-nav-footer--plugins"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/plugins">WordPress Plugins</a></li><li class="lp-block x-nav-footer--patterns"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/patterns">WordPress Patterns</a></li><li class="lp-block x-nav-footer--google"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/google/">Google Apps</a></li></ul></details></div><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Resources</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--support"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/support/">WordPress.com Support</a></li><li class="lp-block x-nav-footer--forums"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/forums/">WordPress Forums</a></li><li class="lp-block x-nav-footer--blog"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/blog/">WordPress News</a></li><li class="lp-block x-nav-footer--experts"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/go/">Website Building Tips</a></li><li class="lp-block x-nav-footer--business-name-generator"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/business-name-generator/">Business Name Generator</a></li><li class="lp-block x-nav-footer--logo-maker"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/logo-maker/">Logo Maker</a></li><li class="lp-block x-nav-footer--discover"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/discover">Discover New Posts</a></li><li class="lp-block x-nav-footer--tags"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/tags">Popular Tags</a></li><li class="lp-block x-nav-footer--search"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/read/search">Blog Search</a></li><li class="lp-block x-nav-footer--webinars"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/webinars/">Daily Webinars</a></li><li class="lp-block x-nav-footer--learn"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/learn/">Learn WordPress</a></li><li class="lp-block x-nav-footer--dev-resources"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://developer.wordpress.com/">Developer <span class="lp-link-chevron-external">Resources</span></a></li><li class="lp-block x-nav-footer--remove_subscriptions"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/me/purchases" data-is-fcca="1">Remove Subscriptions</a></li></ul></details></div><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Company</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--about"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/about/">About</a></li><li class="lp-block x-nav-footer--partners"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/partners/">Partners</a></li><li class="lp-block x-nav-footer--press"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://automattic.com/press/"> <span class="lp-link-chevron-external">Press</span></a></li><li class="lp-block x-nav-footer--tos"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/tos/">Terms of Service</a></li><li class="lp-block x-nav-footer--privacy"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://automattic.com/privacy/">Privacy <span class="lp-link-chevron-external">Policy</span></a></li><li class="lp-block x-nav-footer--ccpa-dnsd"><a class="lp-footer-stack__content__item lp-link-invisible" href="#" data-is-ccpa-dnsd="1" data-is-ccpa-dnsd-trigger="1">Do Not Sell or Share My Personal Information</a></li><li class="lp-block x-nav-footer--ccpa-privacy"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://automattic.com/privacy/#california-consumer-privacy-act-ccpa" data-is-ccpa-dnsd="1">Privacy Notice for California Users</a></li></ul></details></div></div><div class="lp-grid lp-grid--type-footer lp-padding-top-7"><div class="lp-grid__column-span-4 lp-grid__column-span-3@L"><div class="lp-flex@L lp-flex--align-center@L has-text-align-center"><h3 class="lp-hidden">Mobile Apps</h3><ul class="lp-flex lp-flex--justify-center lp-flex--wrap lp-flex--gap-1 has-normal-font-size"><li><div class="lp-block lp-mobile-badge lp-mobile-badge--type-apple-app-store"><a class="lp-mobile-badge__link" href="https://apps.apple.com/app/apple-store/id1565481562?ct=wp.com--footer&mt=8&pt=299112"><span class="lp-mobile-badge__content"><svg class="lp-mobile-badge__content__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 23" aria-hidden="true"><path d="m12.88 5.97.28.02c1.6.05 3.08.85 4 2.16a4.95 4.95 0 0 0-2.36 4.15 4.78 4.78 0 0 0 2.92 4.4 10.96 10.96 0 0 1-1.52 3.1c-.9 1.33-1.83 2.64-3.32 2.66-1.45.04-1.94-.85-3.6-.85-1.67 0-2.19.83-3.57.89-1.42.05-2.5-1.43-3.43-2.76-1.85-2.7-3.3-7.63-1.36-10.97a5.32 5.32 0 0 1 4.47-2.73C6.81 6 8.13 7 9 7c.86 0 2.48-1.18 4.16-1zm.3-5.25a4.87 4.87 0 0 1-1.11 3.49 4.1 4.1 0 0 1-3.24 1.53 4.64 4.64 0 0 1 1.14-3.36A4.96 4.96 0 0 1 13.18.72z" /></svg><span class="lp-mobile-badge__content__label"><span class="lp-mobile-badge__line lp-mobile-badge__line--is-top">Download on the</span> <span class="lp-mobile-badge__line lp-mobile-badge__line--is-bottom">App Store</span></span></span></a></div></li><li><div class="lp-block lp-mobile-badge lp-mobile-badge--type-google-play"><a class="lp-mobile-badge__link" href="https://play.google.com/store/apps/details?id=com.jetpack.android&referrer=utm_source%3Dwordpress.com%26utm_campaign%3Dfooter%26utm_medium%3Dwebsite"><span class="lp-mobile-badge__content"><svg class="lp-mobile-badge__content__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 38" aria-hidden="true"><defs><path id="lp-mobile-badge-path-1" d="M31.28 24.77 6.05 39.07A4.05 4.05 0 0 1 0 35.55V6.95a4.05 4.05 0 0 1 6.05-3.52l25.23 14.3a4.05 4.05 0 0 1 0 7.04Z" /></defs><g transform="translate(0 -2.25)"><mask id="lp-mobile-badge-path-2" fill="#fff"><use xlink:href="#lp-mobile-badge-path-1" /></mask><use fill="#34a853" xlink:href="#lp-mobile-badge-path-1" /><path fill="#ea4335" mask="url(#lp-mobile-badge-path-2)" d="M-4 21.25h40v20H-4z" /><path fill="#fbbc04" mask="url(#lp-mobile-badge-path-2)" d="M35 2v38.5L15.62 21.25z" /><path fill="#4285f4" mask="url(#lp-mobile-badge-path-2)" d="m-4 1.75 19.62 19.5L-4 40.75z" /></g></svg><span class="lp-mobile-badge__content__label"><span class="lp-mobile-badge__line lp-mobile-badge__line--is-top">Get it on</span> <span class="lp-mobile-badge__line lp-mobile-badge__line--is-bottom">Google Play</span></span></span></a></div></li></ul><h3 class="lp-hidden">Social Media</h3><ul class="lp-footer-social-media lp-flex lp-flex--justify-center lp-pt-18 lp-pt-0@L lp-pl-24@L"><li class="lp-block x-nav-footer--facebook lp-pl-8@L"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://www.facebook.com/WordPresscom/" title="WordPress.com on Facebook"><span class="lp-hidden">WordPress.com on Facebook</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2C6.03 1.2 1.2 6.06 1.2 12.06c0 5.43 3.95 9.92 9.11 10.74v-7.6H7.57v-3.14h2.74V9.67c0-2.72 1.61-4.23 4.08-4.23 1.18 0 2.42.22 2.42.22v2.67h-1.36c-1.35 0-1.76.84-1.76 1.7v2.03h3l-.49 3.15h-2.5v7.59a10.85 10.85 0 0 0 9.1-10.74c0-6-4.83-10.86-10.8-10.86Z" /></svg></a></li><li class="lp-block x-nav-footer--twitter"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://twitter.com/wordpressdotcom" title="WordPress.com on X (Twitter)"><span class="lp-hidden">WordPress.com on X (Twitter)</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2a10.8 10.8 0 1 0 0 21.6 10.8 10.8 0 0 0 0-21.6ZM10.03 6l2.9 4.23L16.58 6h1l-4.2 4.87 4.56 6.63h-3.35l-3.07-4.47-3.84 4.47h-.99l4.4-5.1L6.67 6h3.35Zm-.47.75H8.03l3.54 5.06.45.64 3.03 4.34h1.52l-3.71-5.32-.45-.63-2.85-4.1Z" /></svg></a></li><li class="lp-block x-nav-footer--instagram"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://www.instagram.com/wordpressdotcom/" title="WordPress.com on Instagram"><span class="lp-hidden">WordPress.com on Instagram</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2a10.8 10.8 0 1 0 0 21.6 10.8 10.8 0 0 0 0-21.6Zm.5 3.6c1.5 0 1.77.01 2.47.04a5.3 5.3 0 0 1 1.75.34c.47.18.87.43 1.27.83.4.4.65.8.83 1.27.18.46.3.99.34 1.75l.02.47v.18c.01.36.02.78.02 1.61v1.42c0 1.32-.01 1.6-.04 2.26a5.34 5.34 0 0 1-.34 1.75c-.18.47-.43.87-.83 1.27-.4.4-.8.65-1.27.83-.46.18-.98.3-1.75.34l-.47.02h-.18c-.36.01-.77.02-1.6.02h-1.43c-.83 0-1.25 0-1.61-.02H9.5l-.47-.02a5.29 5.29 0 0 1-1.75-.34A3.53 3.53 0 0 1 6.01 18c-.4-.4-.65-.8-.83-1.27-.18-.46-.3-.98-.34-1.75l-.02-.47v-.18a51 51 0 0 1-.02-1.4v-1.85c0-.77.01-1.15.02-1.5V9.4l.02-.38c.04-.76.16-1.29.34-1.75.18-.47.43-.87.83-1.27.4-.4.8-.65 1.28-.83a5.28 5.28 0 0 1 2.12-.35h.18c.41-.02.86-.03 1.92-.03Zm-1.14 1.3c-1.35 0-1.6 0-2.27.04-.7.03-1.08.15-1.33.25a2.38 2.38 0 0 0-1.37 1.36c-.1.26-.22.64-.25 1.34-.03.62-.04.88-.04 2.01v1.8c0 1.13.01 1.4.04 2.02.03.7.15 1.08.25 1.33a2.34 2.34 0 0 0 1.37 1.37 4 4 0 0 0 1.33.25c.62.03.89.04 2.02.04h1.79c1.12 0 1.39-.01 2.01-.04.7-.03 1.08-.15 1.34-.25a2.38 2.38 0 0 0 1.36-1.37c.1-.25.22-.63.25-1.33l.02-.38v-.17c.02-.35.02-.71.02-1.47v-1.78c0-1.13-.01-1.4-.04-2.02a3.98 3.98 0 0 0-.25-1.34 2.23 2.23 0 0 0-.53-.82c-.26-.26-.5-.41-.83-.54-.26-.1-.64-.22-1.34-.25-.65-.03-.91-.04-2.21-.04h-1.34ZM12 8.3a3.7 3.7 0 1 1 0 7.4 3.7 3.7 0 0 1 0-7.4Zm0 1.3a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8Zm3.84-2.3a.86.86 0 1 1 0 1.72.86.86 0 0 1 0-1.73Z" /></svg></a></li><li class="lp-block x-nav-footer--youtube"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://www.youtube.com/WordPressdotcom" title="WordPress.com on YouTube"><span class="lp-hidden">WordPress.com on YouTube</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2a10.8 10.8 0 1 0 0 21.6 10.8 10.8 0 0 0 0-21.6Zm5.61 5.73c.62.18 1.11.7 1.28 1.36.27 1.07.3 3.15.31 3.62v.19c0 .46-.03 2.55-.3 3.61a1.88 1.88 0 0 1-1.28 1.37c-1.02.3-4.83.32-5.51.32h-.21c-.69 0-4.5-.03-5.52-.32-.62-.18-1.1-.7-1.27-1.37-.27-1.07-.3-3.15-.3-3.61v-.19c0-.47.03-2.55.29-3.6.16-.67.65-1.2 1.27-1.37 1.05-.3 5.09-.34 5.57-.34h.16c.68 0 4.5.03 5.51.33Zm-7.05 2.76v4.63L14.29 12l-3.73-2.3Z" /></svg></a></li></ul></div></div></div></div><div class="lp-wrapper lp-wrapper--layout-full lp-padding-top-5"><footer class="lp-section is-style-white-gray-mono lp-padding-top-4 lp-padding-bottom-4"><div class="lp-section__content has-tiny-font-size has-text-align-center"><h2 class="lp-hidden">Automattic</h2><div class="lp-wrapper lp-wrapper--layout-wide"><div class="lp-grid lp-grid--type-footer lp-grid--align-baseline lp-grid--gutter-y-3"><div class="lp-grid__column-span-4 lp-grid__column-span-2@M lp-text-left@M color-blue-50"><a class="lp-flex lp-flex--inline lp-link-invisible lp-no-wrap" href="https://automattic.com" data-dictionary="WyJBbiBBdXRvbWF0dGljIGJyYWluY2hpbGQiLCJBbiBBdXRvbWF0dGljIGNvbnRyYXB0aW9uIiwiQW4gQXV0b21hdHRpYyBjcmVhdGlvbiIsIkFuIEF1dG9tYXR0aWMgZXhwZXJpbWVudCIsIkFuIEF1dG9tYXR0aWMgaW52ZW50aW9uIiwiQW4gQXV0b21hdHRpYyBqb2ludCIsIkFuIEF1dG9tYXR0aWMgbWVkbGV5IiwiQW4gQXV0b21hdHRpYyBvcHVzIiwiQW4gQXV0b21hdHRpYyBwcm9kdWN0aW9uIiwiQW4gQXV0b21hdHRpYyBydWNrdXMiLCJBbiBBdXRvbWF0dGljIHRoaW5nYW1hamlnIl0="><span class="lp-hidden">Automattic</span><svg class="lp-icon lp-icon--custom-automattic-footer lp-color-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143 12" aria-hidden="true"><path d="M53.01 4.19a.749.749 0 0 0-1.033.226L50.225 7.13a.748.748 0 0 0 .219 1.035.748.748 0 0 0 1.033-.226l1.752-2.713a.748.748 0 0 0-.219-1.035Zm88.303-.303c-.922-.845-2.274-1.644-4.102-1.644-2.735 0-4.272 1.874-4.272 3.826v.2c0 1.935 1.552 3.748 4.41 3.748 1.705 0 3.118-.814 4.01-1.644l1.152 1.214c-1.122 1.106-3.027 2.043-5.285 2.043-3.872 0-6.222-2.52-6.222-5.285v-.338c0-2.765 2.565-5.377 6.314-5.377 2.166 0 4.133.906 5.193 2.043l-1.198 1.214Zm-16.931 7.343V1.967c.768 0 1.076-.415 1.076-.968h.814V11.23h-1.89Zm-9.202-8.633v8.633h-1.92V2.597h-4.471V.999h10.862v1.598h-4.471Zm-14.088 0v8.633h-1.92V2.597H94.7V.999h10.862v1.598h-4.471Zm-14.21.399-2.228 4.302h4.532L86.88 2.996Zm4.408 8.234-1.352-2.534h-6.007l-1.306 2.534h-2.028L86.128 1h1.598l5.623 10.231H91.29Zm-16.438 0V3.134l-.507.891-4.287 7.205h-.937l-4.24-7.205-.507-.89v8.095H62.5V1h2.657l4.04 7.02.477.86.477-.86L74.145 1h2.627V11.23h-1.92ZM37.765 2.597v8.633h-1.92V2.597h-4.471V.999h10.862v1.598h-4.471ZM21.587 11.63c-3.671 0-5.377-1.997-5.377-4.655V.999h1.905v6.007c0 1.89 1.245 3.01 3.61 3.01 2.428 0 3.427-1.12 3.427-3.01V.999h1.92v5.976c0 2.535-1.628 4.655-5.485 4.655ZM6.394 2.996 4.166 7.298h4.532L6.394 2.996Zm4.409 8.234L9.45 8.696H3.444L2.138 11.23H.11L5.64 1H7.24L12.86 11.23h-2.058ZM55.8 5.992c0-1.982-1.444-3.75-4.056-3.75-2.611 0-4.04 1.768-4.04 3.75v.245c0 1.982 1.429 3.78 4.04 3.78 2.612 0 4.056-1.798 4.056-3.78v-.245Zm-4.056 5.638c-3.626 0-5.976-2.612-5.976-5.331V5.96c0-2.766 2.35-5.331 5.976-5.331 3.642 0 5.992 2.565 5.992 5.331V6.3c0 2.72-2.35 5.331-5.992 5.331Z" /></svg></a></div><div class="lp-grid__column-span-4 lp-grid__column-span-2@M lp-text-right@M lp-color-primary"><a class="lp-link-invisible lp-link-chevron-external" href="https://automattic.com/work-with-us/" title="Remote Jobs">Work With Us</a></div></div></div></div></footer></div></div></section> </div>  <script type="text/javascript" src="//0.gravatar.com/js/hovercards/hovercards.min.js?ver=2024484048849247f5660a2d05b85c6fc286379897f30a1061ad46e7f037e059ed7fe7" id="grofiles-cards-js"></script> <script type="text/javascript" id="wpgroho-js-extra"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/wp-content/mu-plugins/gravatar-hovercards/wpgroho.js?m=1610363240i'></script> <script> // Initialize and attach hovercards to all gravatars ( function() { function init() { if ( typeof Gravatar === 'undefined' ) { return; } if ( typeof Gravatar.init !== 'function' ) { return; } Gravatar.profile_cb = function ( hash, id ) { WPGroHo.syncProfileData( hash, id ); }; Gravatar.my_hash = WPGroHo.my_hash; Gravatar.init( 'body', '#wp-admin-bar-my-account', { i18n: { 'Edit your profile': 'Edit your profile', 'View profile': 'View profile', 'Sorry, we are unable to load this Gravatar profile.': 'Sorry, we are unable to load this Gravatar profile.', 'Profile not found.': 'Profile not found.', 'Too Many Requests.': 'Too Many Requests.', 'Internal Server Error.': 'Internal Server Error.', }, } ); } if ( document.readyState !== 'loading' ) { init(); } else { document.addEventListener( 'DOMContentLoaded', init ); } } )(); </script> <div style="display:none"> <div class="grofile-hash-map-5f069a6cacb95c3811aa06a1884d3a5d"> </div> </div> <div id="actionbar" style="display: none;" class="actnbr-a8c-wpcomgo actnbr-has-follow"> <ul> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-reblog" href=""> <svg class="gridicon gridicons-reblog" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M22.086 9.914L20 7.828V18c0 1.105-.895 2-2 2h-7v-2h7V7.828l-2.086 2.086L14.5 8.5 19 4l4.5 4.5-1.414 1.414zM6 16.172V6h7V4H6c-1.105 0-2 .895-2 2v10.172l-2.086-2.086L.5 15.5 5 20l4.5-4.5-1.414-1.414L6 16.172z"/></g></svg><span>Reblog</span> </a> </li> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> <div class="actnbr-popover tip tip-top-left actnbr-notice" id="follow-bubble"> <div class="tip-arrow"></div> <div class="tip-inner actnbr-follow-bubble"> <ul> <li class="actnbr-sitename"> <a href="https://wordpress.com/go"> <img loading='lazy' alt='' src='https://s2.wp.com/i/logo/wpcom-gray-white.png' srcset='https://s2.wp.com/i/logo/wpcom-gray-white.png 1x' class='avatar avatar-50' height='50' width='50' /> Go WordPress </a> </li> <div class="actnbr-message no-display"></div> <form method="post" action="https://subscribe.wordpress.com" accept-charset="utf-8" style="display: none;"> <div class="actnbr-follow-count">Join 1,901 other subscribers</div> <div> <input type="email" name="email" placeholder="Enter your email address" class="actnbr-email-field" aria-label="Enter your email address" /> </div> <input type="hidden" name="action" value="subscribe" /> <input type="hidden" name="blog_id" value="196931530" /> <input type="hidden" name="source" value="https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/" /> <input type="hidden" name="sub-type" value="actionbar-follow" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="62f991b203" /> <div class="actnbr-button-wrap"> <button type="submit" value="Sign me up"> Sign me up </button> </div> </form> <li class="actnbr-login-nudge"> <div> Already have a WordPress.com account? <a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fwordpress.com%2Fgo%2Fweb-design%2Fhow-to-create-a-website-mockup-in-5-easy-steps-examples%2F&signup_flow=account">Log in now.</a> </div> </li> </ul> </div> </div> </li> <li class="actnbr-ellipsis actnbr-hidden"> <svg class="gridicon gridicons-ellipsis" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M7 12c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2zm12-2c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm-7 0c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z"/></g></svg> <div class="actnbr-popover tip tip-top-left actnbr-more"> <div class="tip-arrow"></div> <div class="tip-inner"> <ul> <li class="actnbr-sitename"> <a href="https://wordpress.com/go"> <img loading='lazy' alt='' src='https://s2.wp.com/i/logo/wpcom-gray-white.png' srcset='https://s2.wp.com/i/logo/wpcom-gray-white.png 1x' class='avatar avatar-50' height='50' width='50' /> Go WordPress </a> </li> <li class="actnbr-folded-customize"> <a href="https://enwpgo.wordpress.com/wp-admin/customize.php?url=https%3A%2F%2Fenwpgo.wordpress.com%2Fgo%2Fweb-design%2Fhow-to-create-a-website-mockup-in-5-easy-steps-examples%2F"> <svg class="gridicon gridicons-customize" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z"/></g></svg> <span>Customize</span> </a> </li> <li class="actnbr-folded-follow"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> </li> <li class="actnbr-signup"><a href="https://wordpress.com/start/">Sign up</a></li> <li class="actnbr-login"><a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fwordpress.com%2Fgo%2Fweb-design%2Fhow-to-create-a-website-mockup-in-5-easy-steps-examples%2F&signup_flow=account">Log in</a></li> <li class="actnbr-shortlink"><a href="https://wp.me/pdkiT0-1dFRS">Copy shortlink</a></li> <li class="flb-report"> <a href="https://wordpress.com/abuse/?report_url=https://wordpress.com/go/web-design/how-to-create-a-website-mockup-in-5-easy-steps-examples/" target="_blank" rel="noopener noreferrer"> Report this content </a> </li> <li class="actnbr-reader"> <a href="https://wordpress.com/read/blogs/196931530/posts/18035544"> View post in Reader </a> </li> <li class="actnbr-subs"> <a href="https://subscribe.wordpress.com/">Manage subscriptions</a> </li> <li class="actnbr-fold"><a href="">Collapse this bar</a></li> </ul> </div> </div> </li> </ul> </div> <script> window.addEventListener( "load", function( event ) { var link = document.createElement( "link" ); link.href = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.css?v=20241015"; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild( link ); var script = document.createElement( "script" ); script.src = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.js?v=20231122"; script.defer = true; document.body.appendChild( script ); } ); </script> <div id="jp-carousel-loading-overlay"> <div id="jp-carousel-loading-wrapper"> <span id="jp-carousel-library-loading"> </span> </div> </div> <div class="jp-carousel-overlay" style="display: none;"> <div class="jp-carousel-container">  <div class="jp-carousel-wrap swiper-container jp-carousel-swiper-container jp-carousel-transitions" itemscope itemtype="https://schema.org/ImageGallery"> <div class="jp-carousel swiper-wrapper"></div> <div class="jp-swiper-button-prev swiper-button-prev"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskPrev" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="9" height="12"> <path d="M16.2072 16.59L11.6496 12L16.2072 7.41L14.8041 6L8.8335 12L14.8041 18L16.2072 16.59Z" fill="white"/> </mask> <g mask="url(#maskPrev)"> <rect x="0.579102" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </div> <div class="jp-swiper-button-next swiper-button-next"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskNext" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="8" height="12"> <path d="M8.59814 16.59L13.1557 12L8.59814 7.41L10.0012 6L15.9718 12L10.0012 18L8.59814 16.59Z" fill="white"/> </mask> <g mask="url(#maskNext)"> <rect x="0.34375" width="23.8822" height="24" fill="#FFFFFF"/> </g> </svg> </div> </div>  <div class="jp-carousel-close-hint"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskClose" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="15" height="14"> <path d="M19.3166 6.41L17.9135 5L12.3509 10.59L6.78834 5L5.38525 6.41L10.9478 12L5.38525 17.59L6.78834 19L12.3509 13.41L17.9135 19L19.3166 17.59L13.754 12L19.3166 6.41Z" fill="white"/> </mask> <g mask="url(#maskClose)"> <rect x="0.409668" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </div>  <div class="jp-carousel-info"> <div class="jp-carousel-info-footer"> <div class="jp-carousel-pagination-container"> <div class="jp-swiper-pagination swiper-pagination"></div> <div class="jp-carousel-pagination"></div> </div> <div class="jp-carousel-photo-title-container"> <h2 class="jp-carousel-photo-caption"></h2> </div> <div class="jp-carousel-photo-icons-container"> <a href="#" class="jp-carousel-icon-btn jp-carousel-icon-info" aria-label="Toggle photo metadata visibility"> <span class="jp-carousel-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskInfo" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7537 2C7.26076 2 2.80273 6.48 2.80273 12C2.80273 17.52 7.26076 22 12.7537 22C18.2466 22 22.7046 17.52 22.7046 12C22.7046 6.48 18.2466 2 12.7537 2ZM11.7586 7V9H13.7488V7H11.7586ZM11.7586 11V17H13.7488V11H11.7586ZM4.79292 12C4.79292 16.41 8.36531 20 12.7537 20C17.142 20 20.7144 16.41 20.7144 12C20.7144 7.59 17.142 4 12.7537 4C8.36531 4 4.79292 7.59 4.79292 12Z" fill="white"/> </mask> <g mask="url(#maskInfo)"> <rect x="0.8125" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </span> </a> <a href="#" class="jp-carousel-icon-btn jp-carousel-icon-comments" aria-label="Toggle photo comments visibility"> <span class="jp-carousel-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskComments" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.3271 2H20.2486C21.3432 2 22.2388 2.9 22.2388 4V16C22.2388 17.1 21.3432 18 20.2486 18H6.31729L2.33691 22V4C2.33691 2.9 3.2325 2 4.3271 2ZM6.31729 16H20.2486V4H4.3271V18L6.31729 16Z" fill="white"/> </mask> <g mask="url(#maskComments)"> <rect x="0.34668" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> <span class="jp-carousel-has-comments-indicator" aria-label="This image has comments."></span> </span> </a> </div> </div> <div class="jp-carousel-info-extra"> <div class="jp-carousel-info-content-wrapper"> <div class="jp-carousel-photo-title-container"> <h2 class="jp-carousel-photo-title"></h2> </div> <div class="jp-carousel-comments-wrapper"> <div id="jp-carousel-comments-loading"> <span>Loading Comments...</span> </div> <div class="jp-carousel-comments"></div> <div id="jp-carousel-comment-form-container"> <span id="jp-carousel-comment-form-spinner"> </span> <div id="jp-carousel-comment-post-results"></div> <form id="jp-carousel-comment-form"> <label for="jp-carousel-comment-form-comment-field" class="screen-reader-text">Write a Comment...</label> <textarea name="comment" class="jp-carousel-comment-form-field jp-carousel-comment-form-textarea" id="jp-carousel-comment-form-comment-field" placeholder="Write a Comment..." ></textarea> <div id="jp-carousel-comment-form-submit-and-info-wrapper"> <div id="jp-carousel-comment-form-commenting-as"> <fieldset> <label for="jp-carousel-comment-form-email-field">Email (Required)</label> <input type="text" name="email" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-email-field" /> </fieldset> <fieldset> <label for="jp-carousel-comment-form-author-field">Name (Required)</label> <input type="text" name="author" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-author-field" /> </fieldset> <fieldset> <label for="jp-carousel-comment-form-url-field">Website</label> <input type="text" name="url" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-url-field" /> </fieldset> </div> <input type="submit" name="submit" class="jp-carousel-comment-form-button" id="jp-carousel-comment-form-button-submit" value="Post Comment" /> </div> </form> </div> </div> <div class="jp-carousel-image-meta"> <div class="jp-carousel-title-and-caption"> <div class="jp-carousel-photo-info"> <h3 class="jp-carousel-caption" itemprop="caption description"></h3> </div> <div class="jp-carousel-photo-description"></div> </div> <ul class="jp-carousel-image-exif" style="display: none;"></ul> <a class="jp-carousel-image-download" href="#" target="_blank" style="display: none;"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="19" height="18"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.84615 5V19H19.7775V12H21.7677V19C21.7677 20.1 20.8721 21 19.7775 21H5.84615C4.74159 21 3.85596 20.1 3.85596 19V5C3.85596 3.9 4.74159 3 5.84615 3H12.8118V5H5.84615ZM14.802 5V3H21.7677V10H19.7775V6.41L9.99569 16.24L8.59261 14.83L18.3744 5H14.802Z" fill="white"/> </mask> <g mask="url(#mask0)"> <rect x="0.870605" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> <span class="jp-carousel-download-text"></span> </a> <div class="jp-carousel-image-map" style="display: none;"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> window.WPCOM_sharing_counts = {"https:\/\/wordpress.com\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/":18035544}; </script> <style id='jetpack-block-subscriptions-inline-css'> .is-style-compact .is-not-subscriber .wp-block-button__link,.is-style-compact .is-not-subscriber .wp-block-jetpack-subscriptions__button{border-end-start-radius:0!important;border-start-start-radius:0!important;margin-inline-start:0!important}.is-style-compact .is-not-subscriber .components-text-control__input,.is-style-compact .is-not-subscriber p#subscribe-email input[type=email]{border-end-end-radius:0!important;border-start-end-radius:0!important}.is-style-compact:not(.wp-block-jetpack-subscriptions__use-newline) .components-text-control__input{border-inline-end-width:0!important}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form-container{display:flex;flex-direction:column}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline:not(.wp-block-jetpack-subscriptions__use-newline) .is-not-subscriber .wp-block-jetpack-subscriptions__form-elements{align-items:flex-start;display:flex}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline:not(.wp-block-jetpack-subscriptions__use-newline) p#subscribe-submit{display:flex;justify-content:center}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__textfield .components-text-control__input,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form input[type=email],.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__textfield .components-text-control__input,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form input[type=email]{box-sizing:border-box;cursor:pointer;line-height:1.3;min-width:auto!important;white-space:nowrap!important}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__button[contenteditable=true],.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__button[contenteditable=true]{white-space:pre-wrap!important}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form input[type=email]::placeholder,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form input[type=email]:disabled,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form input[type=email]::placeholder,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form input[type=email]:disabled{color:currentColor;opacity:.5}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form button{border-color:#0000;border-style:solid}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__textfield,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form p#subscribe-email,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__textfield,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form p#subscribe-email{background:#0000;flex-grow:1}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__textfield .components-base-control__field,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__textfield .components-text-control__input,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form .wp-block-jetpack-subscriptions__textfield input[type=email],.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form p#subscribe-email .components-base-control__field,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form p#subscribe-email .components-text-control__input,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form p#subscribe-email input[type=email],.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__textfield .components-base-control__field,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__textfield .components-text-control__input,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form .wp-block-jetpack-subscriptions__textfield input[type=email],.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form p#subscribe-email .components-base-control__field,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form p#subscribe-email .components-text-control__input,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form p#subscribe-email input[type=email]{height:auto;margin:0;width:100%}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form p#subscribe-email,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form p#subscribe-submit,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form p#subscribe-email,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form p#subscribe-submit{line-height:0;margin:0;padding:0}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline.wp-block-jetpack-subscriptions__show-subs .wp-block-jetpack-subscriptions__subscount{font-size:16px;margin:8px 0;text-align:end}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline.wp-block-jetpack-subscriptions__use-newline .wp-block-jetpack-subscriptions__form-elements{display:block}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline.wp-block-jetpack-subscriptions__use-newline .wp-block-jetpack-subscriptions__button,.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline.wp-block-jetpack-subscriptions__use-newline button{display:inline-block;max-width:100%}.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline.wp-block-jetpack-subscriptions__use-newline .wp-block-jetpack-subscriptions__subscount{text-align:start}#subscribe-submit.is-link{text-align:center;width:auto!important}#subscribe-submit.is-link a{margin-left:0!important;margin-top:0!important;width:auto!important}@keyframes jetpack-memberships_button__spinner-animation{to{transform:rotate(1turn)}}.jetpack-memberships-spinner{display:none;height:1em;margin:0 0 0 5px;width:1em}.jetpack-memberships-spinner svg{height:100%;margin-bottom:-2px;width:100%}.jetpack-memberships-spinner-rotating{animation:jetpack-memberships_button__spinner-animation .75s linear infinite;transform-origin:center}.is-loading .jetpack-memberships-spinner{display:inline-block}body.jetpack-memberships-modal-open{overflow:hidden}dialog.jetpack-memberships-modal{opacity:1}dialog.jetpack-memberships-modal,dialog.jetpack-memberships-modal iframe{background:#0000;border:0;bottom:0;box-shadow:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%}dialog.jetpack-memberships-modal::backdrop{background-color:#000;opacity:.7;transition:opacity .2s ease-out}dialog.jetpack-memberships-modal.is-loading,dialog.jetpack-memberships-modal.is-loading::backdrop{opacity:0} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-2-2' href='https://s2.wp.com/_static/??-eJydjEEKgCAQAD+UrR6KLtFbTJfQdJXWxe9HUB/oOMMw0KtyhRpSgyyqJjkCMURs1brzZWAhyMVLQgZnryKMCbiHipfahXzC0TEP8H/2NZ94fltezbxMxkx61vEGx+U/hQ==&cssminify=yes' type='text/css' media='all' /> <script type="text/javascript" id="comment-like-js-extra"> /* <![CDATA[ */ var comment_like_text = {"loading":"Loading...","swipeUrl":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/comment-likes\/js\/lib\/swipe.js?ver=20131008"}; /* ]]> */ </script> <script type="text/javascript" id="coblocks-loader-js-extra"> /* <![CDATA[ */ var wpcom_coblocks_js = {"coblocks_masonry_js":"https:\/\/s2.wp.com\/wp-content\/plugins\/coblocks\/2.18.1-simple-rev.4\/dist\/js\/coblocks-masonry.min.js","coblocks_lightbox_js":"https:\/\/s2.wp.com\/wp-content\/plugins\/coblocks\/2.18.1-simple-rev.4\/dist\/js\/coblocks-lightbox.min.js","jquery_core_js":"\/wp-includes\/js\/jquery\/jquery.min.js","jquery_migrate_js":"\/wp-includes\/js\/jquery\/jquery-migrate.min.js","masonry_js":"\/wp-includes\/js\/masonry.min.js","imagesloaded_js":"\/wp-includes\/js\/imagesloaded.min.js"}; var coblocksLigthboxData = {"closeLabel":"Close Gallery","leftLabel":"Previous","rightLabel":"Next"}; /* ]]> */ </script> <script type="text/javascript" id="jetpack-blocks-assets-base-url-js-before"> /* <![CDATA[ */ var Jetpack_Block_Assets_Base_Url="https://s0.wp.com/wp-content/mu-plugins/jetpack-plugin/sun/_inc/blocks/"; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/_static/??-eJyNkEGOwjAMRS+EE4oqlc2Is4TULU6TuNQJnbk9RkVi1MVoVpG+3vv+il1n8JwL5mKD2MRXighVcHGjZkB5YBPkYH9xqcIc60hZbKQJxd4rVry53Edc/oA9p/Tq3KSwC/bix7pG9pPYk2nOpgGhNOvEBR+mtT1J2Zo2CCK7Xkckyvu+csOkZ93Za6qXR36J2T1odIX4n7xMNOvePMHAvgoM9L0XlQr6I8vP+zHKwEo9r/LedUlfTdd07bE9dm14Ak/sjkA='></script> <script type="text/javascript" id="jquery-fix-widows-js-after"> /* <![CDATA[ */ ( function( $ ) { $( document ).ready( function() { $( document ).fixWidows( { minWidth: 661, selectors: [ '.no-widows', '.hero-area-title', '.hero-area-content', '.hero-area-button', '.text-intro h1', '.text-intro p', '.feature-grid h3', '.feature-grid p', ], } ); } ); } )( jQuery ); /* ]]> */ </script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/dom-ready/index.min.js?m=1731954715i&ver=222ad38e3e5e302c8bbf" id="wp-dom-ready-js"></script> <script type="text/javascript" id="wp-dom-ready-js-after"> /* <![CDATA[ */ wp.galleryBlockV2Enabled = true /* ]]> */ </script> <script type="text/javascript" id="jetpack-carousel-js-extra"> /* <![CDATA[ */ var jetpackSwiperLibraryPath = {"url":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/jetpack-plugin\/sun\/_inc\/build\/carousel\/swiper-bundle.min.js"}; var jetpackCarouselStrings = {"widths":[370,700,1000,1200,1400,2000],"is_logged_in":"","lang":"en","ajaxurl":"https:\/\/wordpress.com\/go\/wp-admin\/admin-ajax.php","nonce":"5d3d794c1a","display_exif":"1","display_comments":"1","single_image_gallery":"1","single_image_gallery_media_file":"","background_color":"black","comment":"Comment","post_comment":"Post Comment","write_comment":"Write a Comment...","loading_comments":"Loading Comments...","image_label":"Open image in full-screen.","download_original":"View full size <span class=\"photo-size\">{0}<span class=\"photo-size-times\">\u00d7<\/span>{1}<\/span>","no_comment_text":"Please be sure to submit some text with your comment.","no_comment_email":"Please provide an email address to comment.","no_comment_author":"Please provide your name to comment.","comment_post_error":"Sorry, but there was an error posting your comment. Please try again later.","comment_approved":"Your comment was approved.","comment_unapproved":"Your comment is in moderation.","camera":"Camera","aperture":"Aperture","shutter_speed":"Shutter Speed","focal_length":"Focal Length","copyright":"Copyright","comment_registration":"0","require_name_email":"1","login_url":"https:\/\/enwpgo.wordpress.com\/wp-login.php?redirect_to=https%3A%2F%2Fwordpress.com%2Fgo%2Fweb-design%2Fhow-to-create-a-website-mockup-in-5-easy-steps-examples%2F","blog_id":"196931530","meta_data":["camera","aperture","shutter_speed","focal_length","copyright"],"stats_query_args":"blog=196931530&v=wpcom&tz=-4&user_id=0&subd=enwpgo","is_public":"1"}; /* ]]> */ </script> <script type="text/javascript" id="sharing-js-js-extra"> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/_static/??-eJydjsEOgjAQRH9IWNEET8ZPMaWtuLDdNt0Wwt9bDXjwYsJt38zsZGAOFbKmbKzAIGBQEkyWjY9QrOBpeSBR7ZDrQQ5vTXtOlhO4XAXKPXJ5tCkoPa4MkhnupRU68nqUwp3oiCGhL+EJ7bynKyMZ0Cr6LJa+sU34s3CLVXPQ3v3g7jXyVNEaZczyOZH7dcbNXZvL+dg07althxfpw4X0'></script> <script type="text/javascript" id="sharing-js-js-after"> /* <![CDATA[ */ var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-tumblr' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-tumblr' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomtumblr', 'menubar=1,resizable=1,width=450,height=450' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-twitter' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-twitter' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-facebook' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); /* ]]> */ </script> <script type="text/javascript"> (function () { var wpcom_reblog = { source: 'toolbar', toggle_reblog_box_flair: function (obj_id, post_id) { // Go to site selector. This will redirect to their blog if they only have one. const postEndpoint = `https://wordpress.com/post`; // Ideally we would use the permalink here, but fortunately this will be replaced with the // post permalink in the editor. const originalURL = `${ document.location.href }?page_id=${ post_id }`; const url = postEndpoint + '?url=' + encodeURIComponent( originalURL ) + '&is_post_share=true' + '&v=5'; const redirect = function () { if ( ! window.open( url, '_blank' ) ) { location.href = url; } }; if ( /Firefox/.test( navigator.userAgent ) ) { setTimeout( redirect, 0 ); } else { redirect(); } }, }; window.wpcom_reblog = wpcom_reblog; })(); </script> <script type="text/javascript"> // <![CDATA[ (function() { try{ if ( window.external &&'msIsSiteMode' in window.external) { if (window.external.msIsSiteMode()) { var jl = document.createElement('script'); jl.type='text/javascript'; jl.async=true; jl.src='/wp-content/plugins/ie-sitemode/custom-jumplist.php'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jl, s); } } }catch(e){} })(); // ]]> </script> <iframe src='https://widgets.wp.com/likes/master.html?ver=20241127#ver=20241127&origin=https://wordpress.com' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe> <div id='likes-other-gravatars' class='wpl-new-layout' role="dialog" aria-hidden="true" tabindex="-1"> <div class="likes-text"> <span>%d</span> </div> <ul class="wpl-avatars sd-like-gravatars"></ul> </div> <script src="//stats.wp.com/w.js?67" defer></script> <script type="text/javascript"> _tkq = window._tkq || []; _stq = window._stq || []; _tkq.push(['storeContext', {'blog_id':'196931530','blog_tz':'-4','user_lang':'en','blog_lang':'en','user_id':'0'}]); _stq.push(['view', {'blog':'196931530','v':'wpcom','tz':'-4','user_id':'0','post':'18035544','subd':'enwpgo'}]); _stq.push(['extra', {'crypt':'UE40eW5QN0p8M2Y/RE1lSiYrZXhzUkM5fD1uTDNLUGt6QzVbd3FKb3Q4aWxfXXI3YWo4Qz1OQTklbU5iaFcmUVFuNjY9c2xqOUdMWmdBL19wOGp1T3xISjRRdT1tTj0xUG4vS0p4Y3xOZ2JRWVpORElfWH4mcUVWLjh4aVhpPWZXPSZNY0JOfjhDfC5yOGgxREw4eS9sejEyRjFVU2hqYiVVbEtKOT1GcS12VC1uMXhRXTRnPWpdQTVvRHB+UlVNfE0mUz94JjB5N29NZnIwdEhoN1FMaGtpSldvLFRPaUcuUS1fZSVBRXd4aWQ4a3gxX3A3TmVWNnR3Y2IrTnQ0P2pVUzdlbS5Gcz1bOS5veSVzUG1hSzBOMTQySSVYaElobVI0MkkrbEViVjVQUC5zQitwdTVfb0dud1AxfHNWckQvOCw5X1o3TWUw'}]); _stq.push([ 'clickTrackerInit', '196931530', '18035544' ]); </script> <noscript><img src="https://pixel.wp.com/b.gif?v=noscript" style="height:1px;width:1px;overflow:hidden;position:absolute;bottom:1px;" alt="" /></noscript> <script defer id="bilmur" data-customproperties="{"enq_jquery":"1","logged_in":"0","wptheme":"a8c\/wpcomgo","wptheme_is_block":"0"}" data-provider="wordpress.com" data-service="simple" src="/wp-content/js/bilmur.min.js?i=12&m=202448"></script><script defer id="bilmur" data-customproperties="{"enq_jquery":"1","logged_in":"0","wptheme":"a8c\/wpcomgo","wptheme_is_block":"0"}" data-provider="wordpress.com" data-service="simple" src="/wp-content/js/bilmur-4.min.js?i=12&m=202448"></script><script> ( function() { function getMobileUserAgentInfo() { if ( typeof wpcom_mobile_user_agent_info === 'object' ) { wpcom_mobile_user_agent_info.init(); var mobileStatsQueryString = ''; if ( wpcom_mobile_user_agent_info.matchedPlatformName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_platforms' + '=' + wpcom_mobile_user_agent_info.matchedPlatformName; } if ( wpcom_mobile_user_agent_info.matchedUserAgentName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_devices' + '=' + wpcom_mobile_user_agent_info.matchedUserAgentName; } if ( wpcom_mobile_user_agent_info.isIPad() ) { mobileStatsQueryString += '&x_' + 'ipad_views' + '=' + 'views'; } if ( mobileStatsQueryString != '' ) { new Image().src = document.location.protocol + '//pixel.wp.com/g.gif?v=wpcom-no-pv' + mobileStatsQueryString + '&baba=' + Math.random(); } } } document.addEventListener( 'DOMContentLoaded', getMobileUserAgentInfo ); } )(); </script>  <script type="text/javascript"> ( function() { 'use strict'; var setupAnalytics = function() { window.a8cAnalyticsConfig = {"cookieBanner":{"version":"2","cssZIndex":50001,"skipBanner":false,"cookieDomain":"wordpress.com","v1CookieName":"sensitive_pixel_option","v2CookieName":"sensitive_pixel_options","v1Text":"Our websites and dashboards use cookies. By continuing, you agree to their use. <a target=\"_blank\" href=\"https:\/\/automattic.com\/cookies\/\">Learn more<\/a>, including how to control cookies.","v2Text":"As an open source company, we take your privacy seriously and want to be as transparent as possible. So: We use cookies to collect some personal data from you (like your browsing data, IP addresses, and other unique identifiers). Some of these cookies we absolutely need in order to make things work, and others you can choose in order to optimize your experience while using our site and services.","v2OptionsText":"Your privacy is critically important to us. We and our partners use, store, and process your personal data to optimize: our <strong>website<\/strong> such as by improving security or conducting analytics, <strong>marketing activities<\/strong> to help deliver relevant marketing or content, and your <strong>user experience<\/strong> such as by remembering your account name, language settings, or cart information, where applicable. You can customize your cookie settings below. Learn more in our <a href=\"https:\/\/automattic.com\/privacy\/\" target=\"_blank\">Privacy Policy<\/a> and <a href=\"https:\/\/automattic.com\/cookies\/\" target=\"_blank\">Cookie Policy<\/a>.","v2EssentialOptionHeading":"Required","v2EssentialOptionText":"These cookies are essential for our websites and services to perform basic functions and are necessary for us to operate certain features, like allowing registered users to authenticate and perform account-related functions, storing preferences set by users (like account name, language, and location), and ensuring our services operate properly.","v2AnalyticsOptionHeading":"Analytics","v2AnalyticsOptionText":"These cookies allow us to optimize performance by collecting information on how users interact with our websites.","v2AdvertisingOptionHeading":"Advertising","v2AdvertisingOptionText":"We and our advertising partners set these cookies to provide you with relevant content and to understand that content\u2019s effectiveness.","v1ButtonText":"Got It!","v2CustomizeButtonText":"Customize","v2AcceptAllButtonText":"Accept all","v2AcceptSelectionButtonText":"Accept selection","hiddenConsents":[],"isLoggedIn":false},"doNotSellDialog":{"contactEmailAddress":"privacypolicyupdates@automattic.com"},"adminAnalytics":"analytics-wpcom-admin.php","fireAnalyticsOptions":[]}; }; if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script> <div style="display: none;" id="a8c-analytics"> <script type="text/javascript"> ( function() { 'use strict'; /** * Establish the farthest away parent from an element matching * a given list of selectors. Selectors can be css classes, IDs, * element types, etc. (e.g. '.my-class', '#my-id', 'div', etc.) */ const getLastMatchingAncestor = ( event, selectors ) => { let { target: element } = event; let foundElement = null; while ( element && !foundElement ) { for ( const selector of selectors ) { if ( element.matches( selector ) ) { foundElement = element; break; } } element = element.parentElement; } return foundElement; } /** * Establish the closest parent from an element matching * a given list of selectors. Selectors can be css classes, IDs, * element types, etc. (e.g. '.my-class', '#my-id', 'div', etc.) */ const getClosestMatchingAncestor = ( event, selectors ) => { let { target: element } = event; let foundElement; for ( const selector of selectors ) { foundElement = element.closest( selector ); if ( foundElement ) { break; } } return foundElement; } /** * Main function to setup analytics. */ const setupAnalytics = () => { /** * Returns the current page path. */ function getCurrentPagePath( pathname = '' ) { return ( pathname || window.location.pathname ).replace( /^\/|\/$/g, '' ); } /** * Returns the current page name. */ function getCurrentPageName( pathname = '' ) { return getCurrentPagePath( pathname ).replace( getLocaleInPagePathRegExp(), '' ); } /** * Returns the current page locale. */ function getCurrentPageLocale() { const currentPagePath = getLocaleInPagePathRegExp().exec( getCurrentPagePath() ); return getCurrentPagePath !== null && getCurrentPagePath.length === 2 ? getCurrentPagePath[1] : ''; } /** * Helper function to extract locale from page path. */ function getLocaleInPagePathRegExp() { return /^(af|als|am|an|ar|arc|as|ast|av|ay|az|ba|bel|bg|bm|bn|bo|br|bs|ca|ce|ckb|cs|csb|cv|cy|da|de|dv|dz|el|el\-po|en|en\-gb|eo|es|es\-mx|et|eu|fa|fi|fo|fr|fr\-be|fr\-ca|fr\-ch|fur|fy|ga|gd|gl|gn|gu|he|hi|hr|hu|hy|ia|id|ii|ilo|is|it|ja|ka|kal|kir|km|kn|ko|kk|ks|kv|la|li|lo|lv|lt|mk|ml|mwl|mn|mr|ms|mya|nah|nap|ne|nds|nl|nn|nb|non|nv|oci|or|os|pa|pl|ps|pt|pt\-br|qu|ro|ru|rup|sc|si|sk|skr|sl|snd|so|sq|sr|su|sv|ta|te|th|tl|tir|tr|tt|ty|udm|ug|uk|ur|uz|vec|vi|wa|xal|yi|yo|za|zh\-cn|zh\-hk|zh\-tw)(?:\/|$)/; } /** * Returns the config for WPcom analytics. Sets various event props * used in tracking, e.g. locale, page path, etc. Mainly used for Tracks * event props. */ function getWPCOMAnalyticsDefaultConfig() { const currentGenericPageName = null; const cannonicalPath = "\/go\/web-design\/how-to-create-a-website-mockup-in-5-easy-steps-examples\/"; return { // Current page props. currentPagePath: getCurrentPagePath(), currentPageName: getCurrentPageName(), currentGenericPageName: currentGenericPageName ?? getCurrentPageName( cannonicalPath ), currentPageLocale: getCurrentPageLocale(), // Page variation props. pageVariation: '', pagePersonalVariation: '', // Current user props. currentUserIdHash: "", currentUserIdHashShort: "", currentUserEmailHash: "", // Other misc. props. isHomepage: false, affiliateJSVersion: "1716355472", } } // When a8c-analytics:loaded is fired, start main event handling. document.addEventListener( 'a8c-analytics:loaded', () => { const cb = window.a8cAnalytics.cb; const kit = window.a8cAnalytics.kit; const config = getWPCOMAnalyticsDefaultConfig(); const configOptions = window.a8cAnalyticsConfig.fireAnalyticsOptions; // Extend config with any custom props. Object.assign( window.a8cAnalyticsConfig, config ); // Backcompat. for `lpName` and `lpVariation` config properties. config.currentPageName = ! configOptions.currentPageName && 'logged-out-homepage' === configOptions.lpName ? configOptions.lpName : config.currentPageName; config.currentPageName = ! configOptions.currentPageName && 'logged-out-app-promo' === configOptions.lpName ? configOptions.lpName : config.currentPageName; // Backcompat. for `lpPersonalVariation` config property. config.pageVariation = ! configOptions.pageVariation && configOptions.lpVariation ? configOptions.lpVariation : config.pageVariation; config.pagePersonalVariation = ! configOptions.pagePersonalVariation && configOptions.lpPersonalVariation ? configOptions.lpPersonalVariation : config.pagePersonalVariation; /** * Applies linkers, e.g. for "forwarding" certain URL parameters between WordPress.com * and other properties (e.g. Jetpack.com). Used for affiliate tracking, coupons, etc. */ const applyLinkers = () => { kit.linkQueryVars( [ { includeRegExps: [ /^(?:[^\/]+\.)?(?:wordpress|jetpack|woocommerce|crowdsignal|wpjobmanager)\.com(?:\/|$)/i, ], linkQueryVars: [ 'aff', 'affiliate', 'cid', // Aff campaign ID. 'sid', // Aff sub ID. 'irclickid' // Impact Affiliate Click ID ], }, { includeRegExps: [ /^(?:[^\/]+\.)?(?:wordpress|jetpack)\.com(?:\/|$)/i, ], linkQueryVars: [ 'coupon', ], }, ] ); } /** * Handles currencies. Gets the currency value from cookies, and sets the currency * if the cookie is not present. Can also be overridden by setting the `currency` URL * paramter. */ const fireCurrencyHandlers = () => { let currency = kit.getQueryVar( 'currency' ) || ''; if ( ! currency && 'amex-business-in' === config.currentPageName ) { currency = 'USD'; // Special case for this LP. } if ( currency ) { kit.docCookies.setItem( 'landingpage_currency', currency, 31536000, '/', '.rootDomain' ); } }; /** * Fires the `wpcom_page_view` Tracks event. */ const fireTracks = () => { const props = Object.assign( {}, kit.getQueryVars( '', kit.QUERY_PARAMS ), { // Page props. path: config.currentPagePath, name: config.currentPageName, locale: config.currentPageLocale, variation: config.pageVariation, personal_variation: config.pagePersonalVariation, // Back compat. LP props. lp_name: config.currentGenericPageName, lp_variation: config.pageVariation, lp_personal_variation: config.pagePersonalVariation, } ); window._tkq.push( [ 'recordEvent', 'wpcom_page_view', props ] ); }; function fireRedditAdvertisingPixel() { !function(w,d){if(!w.rdt){var p=w.rdt=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.callQueue.push(arguments)};p.callQueue=[];var t=d.createElement("script");t.src="https://www.redditstatic.com/ads/pixel.js",t.async=!0;var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}}(window,document); rdt('init','a2_ehx23cq176s3'); rdt('track', 'PageVisit'); } /** * Handles the referral tracking. */ const fireAffiliateReferrals = () => { kit.attachScriptElement( 'https://s1.wp.com/wp-content/themes/h4/landing/marketing/js/affiliate-referrals.js?v=' + config.affiliateJSVersion ); }; /** * Loads the Google Ads gtag. */ const loadGoogleAdsGtag = () => { kit.loadGtag( 'AW-946162814' ); } /** * Loads and fires the Google Analytics 4. */ const fireGoogleAnalyticsFour = () => { const gtagOptions = { 'anonymize_ip': true, 'use_amp_client_id': true }; kit.loadGtag( 'G-1H4VG5F5JF', gtagOptions ); } const fireParsely = ( trackingId ) => { kit.loadParselyTracker( trackingId ); } const fireHotJar = () => { if ( ! kit.pertainsToSTS() ) { kit.fireHotjar( 227769 ); } } /** * Loads and fires the Facebook Pixel. */ const fireFacebook = () => { kit.loadFacebook(); fbq( 'init', '823166884443641' ); fbq( 'track', 'PageView' ); } /** * Loads and fires Microsoft Clarity */ const fireMicrosoftClarity = () => { if ( window.clarity ) { return; } // Needs to be set prior to loading the external script. window.clarity = window.clarity || function () { ( window.clarity.q = window.clarity.q || [] ).push( arguments ); }; const clarityScript = kit.attachScriptElement( 'https://www.clarity.ms/tag/j0cc1i1dba' ); document.body.appendChild( clarityScript ); }; const fireImpactAffiliate = () => { kit.loadImpactAffiliate( config.currentUserIdHash, config.currentUserEmailHash ); } /** * Handles scroll percentage tracking. */ const trackScrollPercentage = () => { const scrollPosition = window.pageYOffset; const pageHeight = document.body.scrollHeight - window.innerHeight; const scrollProgress = ( scrollPosition / pageHeight ) * 100; // Check if the user has scrolled to 25%, 50%, 75%, or 100% of the page if ( scrollProgress >= 25 && scrollProgress < 50 ) { dispatchScrollCustomEvent( 25 ) } else if ( scrollProgress >= 50 && scrollProgress < 75 ) { dispatchScrollCustomEvent( 50 ) } else if ( scrollProgress >= 75 && scrollProgress < 100 ) { dispatchScrollCustomEvent( 75 ) } else if ( scrollProgress >= 100 ) { dispatchScrollCustomEvent( 100 ) } } /** * Dispatches a custom event with the scroll percentage. */ const dispatchScrollCustomEvent = ( scrollPercentage ) => { const event = new CustomEvent( `PageScrollPercentage${scrollPercentage}`, { detail: scrollPercentage } ); window.dispatchEvent(event); } /** * Handles the scroll tracking callback. E.g. firing Tracks and GA events. */ const scrollTrackingCallback = ( event ) => { const { detail: scrollPercentage } = event; const trackingProps = {}; // Event props. trackingProps.percent = event.detail ?? 0; trackingProps.path = config.currentPagePath || ''; trackingProps.name = config.currentPageName || ''; trackingProps.locale = config.currentPageLocale || ''; trackingProps.variation = config.pageVariation || ''; trackingProps.personal_variation = config.pagePersonalVariation || ''; trackingProps.lp_name = config.currentGenericPageName || ''; trackingProps.lp_variation = config.pageVariation || ''; trackingProps.lp_personal_variation = config.pagePersonalVariation || ''; tracksAnalyticsScrollEvent( trackingProps ); } /** * Dispatches a Tracks event for page scroll. */ const tracksAnalyticsScrollEvent = ( trackingProps ) => { window._tkq.push( [ 'recordEvent', 'wpcom_page_scroll', trackingProps ] ); } // Call the trackScrollProgress function every time the user scrolls window.addEventListener( 'scroll', trackScrollPercentage ); // Listen to events for specific scroll percentages, each event is only acted upon once. window.addEventListener( 'PageScrollPercentage25', scrollTrackingCallback, { once: true } ) window.addEventListener( 'PageScrollPercentage50', scrollTrackingCallback, { once: true } ) window.addEventListener( 'PageScrollPercentage75', scrollTrackingCallback, { once: true } ) window.addEventListener( 'PageScrollPercentage100', scrollTrackingCallback, { once: true } ) /** * Handles click tracking for certain elements in Tracks and GA. */ const setupTracksGAClickTracking = () => { document.querySelector( 'body' ).addEventListener( 'click', ( event ) => { // We only care about clicks on certain elements. if ( event.target.matches( 'a, button, .click-tracking-enable' ) ) { const { target: clickEventTarget } = event; // Initialize eventProps object with some defaults. const eventProps = {}; eventProps.path = config.currentPagePath || ''; eventProps.name = config.currentPageName || ''; eventProps.lp_name = config.currentGenericPageName || ''; eventProps.locale = config.currentPageLocale || ''; eventProps.variation = config.pageVariation || ''; eventProps.personal_variation = config.pagePersonalVariation || ''; // Identify farthest and closest parent element. const selectors = [ '.wpcom-masterbar.wpcom-header', '.lpc', '.lp-block', '.lp-module', 'section', 'post', 'article' ]; const section = getLastMatchingAncestor( event, selectors ); const container = getClosestMatchingAncestor( event, selectors ); // Get class name and ID for container and add to props. eventProps.container_id = container ? container.getAttribute( 'id' ) : ''; eventProps.container_class = container ? container.getAttribute( 'class' ) : ''; eventProps.container = eventProps.container_id || eventProps.container_class; // What type of element have we clicked? eventProps.is_cta = clickEventTarget.matches( 'is-cta' ) ?? false; eventProps.is_in_header_nav = clickEventTarget.classList.contains('x-nav-link') || clickEventTarget.classList.contains('x-dropdown-link') || clickEventTarget.classList.contains('x-menu-link') || section === 'lpc-header-nav' || section === 'wpcom-masterbar.wpcom-header'; const isClickedElementButton = clickEventTarget.classList.contains('lpc-button') || clickEventTarget.classList.contains('button') || clickEventTarget.classList.contains('wp-block-button__link'); const isParentElementButton = clickEventTarget.parentElement && (clickEventTarget.parentElement.classList.contains('lpc-button') || clickEventTarget.parentElement.classList.contains('button') || clickEventTarget.parentElement.classList.contains('wp-block-button__link')); eventProps.is_button = isClickedElementButton || isParentElementButton; // Link data. eventProps.href = clickEventTarget.getAttribute( 'href' ) || ''; eventProps.target = clickEventTarget.getAttribute( 'target' ) || ''; eventProps.text = clickEventTarget.innerText || ''; eventProps.use_beacon = true; // Emit tracking event in Tracks and GA. window._tkq.push( [ 'recordEvent', 'wpcom_link_click', eventProps ] ); // TODO: Implement a click delay on navigation links and CTA buttons to improve data integrity. // if ( props.is_in_header_nav || props.is_cta || props.is_button ) { // if ( props.href && 0 !== props.href.indexOf( '#' ) && -1 !== [ '', '_top', '_self' ].indexOf( props.target ) ) { // event.preventDefault(); // Allow time for trackers to record the click. // setTimeout( function() { // document.location = props.href; // }, 300 ); // } // } } }); } /** * Add cookie and stats tracking for the Landpack language picker. */ const setupLocaleChangeTracking = () => { function createLocaleCookie( locale ) { const cookieDomain = '.wordpress.com'; const cookieName = 'wpcom_locale'; const date = new Date(); date.setTime( date.getTime() + ( 5 * 365 * 24 * 60 * 60 * 1000 ) ); const expires = " expires=" + date.toGMTString(); document.cookie = cookieName + '=' + locale + ';' + expires +'; path=/; domain=' + cookieDomain; } function createStatsRequest( locale, href ) { const languageChangeStat = new Image(); languageChangeStat.onload = () => window.location.href = href; languageChangeStat.onerror = languageChangeStat.onload; languageChangeStat.src = 'https://pixel.wp.com/g.gif?v=wpcom-no-pv&x_language-switcher=manual-switch-' + locale + '&rm=' + Math.random(); } document.body.addEventListener( 'click', ( event ) => { const { target } = event; if ( target.matches( '.lp-language-picker a[lang]' ) ) { event.preventDefault(); const code = target.getAttribute( 'lang' ); const href = target.getAttribute( 'href' ); createLocaleCookie( code ); createStatsRequest( code, href ); } }); } /** * Loads and fires the Bing tracking pixel. */ const fireBing = () => { ( function( w, d, t, r, u ) { var f, n, i; w[ u ] = w[ u ] || [], f = function() { var o = { ti: "4074038" }; o.q = w[ u ], w[ u ] = new UET( o ), w[ u ].push( "pageLoad" ) }, n = d.createElement( t ), n.src = r, n.async = 1, n.onload = n.onreadystatechange = function() { var s = this.readyState; s && s !== "loaded" && s !== "complete" || ( f(), n.onload = n.onreadystatechange = null ) }, i = d.getElementsByTagName( t )[ 0 ], i.parentNode.insertBefore( n, i ) } )( window, document, "script", "//bat.bing.com/bat.js", "uetq" ); } /** * Adds a click event for Facebook pixel tracking on the /webinar sub pages. */ const trackFacebookWebinarClicks = () => { const facebookPixelURL = 'https://www.facebook.com/tr?id=759053181468957&ev=SubscribedButtonClick&noscript=1'; const elementsToTrack = document.getElementsByClassName( 'webinar-facebook-click-track' ); const handleFacebookClickEvent = ( event ) => { const facebookImgPixel = document.createElement( 'img' ); facebookImgPixel.width = 1; facebookImgPixel.height = 1; facebookImgPixel.src = facebookPixelURL; document.body.appendChild( facebookImgPixel ); } Array.from( elementsToTrack ).forEach( ( element ) => element.addEventListener( 'click', handleFacebookClickEvent )); } // Apply the URL parameter linkers. applyLinkers(); // Add "essential" trackers to queue. cb.addTracker( 'essential', false, fireCurrencyHandlers ); // Add "analytics" trackers to queue. cb.addTracker( 'analytics', false, fireTracks ); cb.addTracker( 'analytics', false, fireAffiliateReferrals ); cb.addTracker( 'analytics', false, setupTracksGAClickTracking ); cb.addTracker( 'analytics', false, trackScrollPercentage ); cb.addTracker( 'analytics', false, setupLocaleChangeTracking ); cb.addTracker( 'analytics', true, fireGoogleAnalyticsFour ); cb.addTracker( 'analytics', true, () => fireParsely( 'wordpress.com' ) ); // Add "advertising" trackers to queue. cb.addTracker( 'advertising', true, loadGoogleAdsGtag ); cb.addTracker( 'advertising', true, fireFacebook ); cb.addTracker( 'advertising', true, trackFacebookWebinarClicks ); cb.addTracker( 'advertising', true, fireBing ); cb.addTracker( 'advertising', true, fireRedditAdvertisingPixel); // cb.addTracker( 'advertising', true, fireHotJar ); - Disabling for now. Enable when Hotjar is required to be used. // cb.addTracker( 'advertising', true, fireMicrosoftClarity ); - Disabling for now. cb.addTracker( 'advertising', true, fireImpactAffiliate ); // Maybe fire trackers now, via cookie banner, based on bucketed consent. cb.maybeFireTrackers(); }); }; // CCPA - Do Not Sell My Data. document.addEventListener( 'a8c-analytics:loaded-is-ccpa', ( event ) => { const { detail } = event; const isCCPAEligible = JSON.parse( detail ).isCCPA; if ( ! isCCPAEligible ) { document.querySelectorAll( '[data-is-ccpa-dnsd]' ).forEach( ( element ) => { const parent = element.parentNode; const parentTagName = parent.tagName.toLowerCase(); // If the link in a part of a list, remove the entire parent item. // Otherwise, remove only the link element. ( parentTagName === 'li' ? parent : element ).remove(); } ); return; } document.querySelector( '[data-is-ccpa-dnsd-trigger]' ).onclick = ( event ) => { event.preventDefault(); window.a8cAnalytics.dnsd.show(); }; } ); if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script> </div> <script type="text/javascript"> ( function() { 'use strict'; var currentScript = document.currentScript; var setupAnalytics = function() { function getScript() { var script = document.createElement( 'script' ); var prev = currentScript || document.getElementsByTagName( 'script' )[ 0 ]; script.setAttribute( 'src', "https:\/\/s0.wp.com\/wp-content\/mu-plugins\/a8c-analytics\/a8c-analytics.js?v=1729607242" ); script.setAttribute( 'async', true ); prev.parentNode.insertBefore( script, prev ); } getScript(); }; if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script>  </body> </html>