{"id":31214,"date":"2021-08-06T05:00:00","date_gmt":"2021-08-06T12:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=31214"},"modified":"2024-06-10T21:12:38","modified_gmt":"2024-06-11T04:12:38","slug":"what-is-negative-space-in-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/","title":{"rendered":"Negative Space \u2013 How Best to Use It in Website and App Design"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space-1024x512.png\" alt=\"Negative space\" class=\"wp-image-31216\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Have you ever viewed an image or photograph that you really like and wondered why it looks so interesting and engaging? Or maybe you&#8217;ve wondered why a scene in a movie or TV show triggers a strong emotional response. <\/p>\n\n\n\n<p>Is it the subject matter or the artist&#8217;s use of perspective? Perhaps. But then think about your favorite websites or user interfaces; what is it about how they look that makes you enjoy using them. Maybe it&#8217;s something about the colors or the fonts used on the webpage or app. Or maybe what you&#8217;re reacting to in all these examples is something else altogether: negative space.<\/p>\n\n\n\n<p class=\"has-text-align-center\">\u200b\u200b<img loading=\"lazy\" decoding=\"async\" width=\"328\" height=\"493\" src=\"https:\/\/lh4.googleusercontent.com\/FP0F8So4npeFwzKrPb2K7Nb777uoxB0AXz0s1FfQ-nYrOyImIQTKKblgAC09JmUzGGuM-ujZHYddPuStr39YA9ETbQPIhofNgqa5sarnipmoQEuMvVml5ciA94CxWcSxJXoRzj_n\"><\/p>\n\n\n\n<p>Design any website, app or a landing page in minutes. Try UXPin, end to end design app for advanced prototyping and design handoff. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-negative-space\"><strong>What is negative space?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-align-left\">At its most straightforward, negative space is the space around or between the subject of an image. You can see it all the time, whether it&#8217;s the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/free-e-book-zen-white-space-web-ui-design-balance-contrast\/\" target=\"_blank\" rel=\"noreferrer noopener\">white space<\/a> surrounding the text of this blog post or the black background behind a model&#8217;s face in a stylish black and white photo. But beyond that, negative space can also add more information or meaning to the subject. But more on that later.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/8zZIKtvkWRHzNvoSYlKDdK81zLawAnZHV4p_ooscZKdF0gkwJ9as3p_rg-uI6QZQL8oq67zfidTl3yn1I0fRW6hwoBmOm-4fRVjFxZdxh0sKZkArI0UsIQrSa504UNLEoIGFMrkf\" width=\"624\" height=\"249\"><\/p>\n\n\n\n<p>First, let&#8217;s look at what design looks like without negative space.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-world-without-negative-space\"><strong>A world without negative space.<\/strong><\/h2>\n\n\n\n<p>Chances are, as a kid, you might have encountered the <a href=\"https:\/\/www.bustle.com\/articles\/46383-14-insane-scenes-from-wheres-waldo-that-you-completely-glossed-over-as-a-kid\" target=\"_blank\" rel=\"noreferrer noopener\">Where&#8217;s Waldo<\/a> (also called Where&#8217;s Wally) series of books. You know the ones, with all the intricately drawn bustling crowd scenes with hundreds of characters. And somewhere within each scene is the subject of the image, Waldo (or Wally). Sometimes it could take hours to find the little figure with his distinctive round black glasses and red and white striped clothes and hat. There&#8217;s not a shred of negative space to be found in any of those drawings.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/fvXoJi_keYFr1iA-e00VGy7vVVRMqnXk9_hOchSriVHweGmQ3hJYMpA_J8JwhP1TgKBSSjNTqZDUGf8c5woiuRuGpqky2p8gxgSy6ty2n-kcUmoLbLSwnQIUpYFfiVa2Q0Fq1d2C\" width=\"624\" height=\"249\"><\/p>\n\n\n\n<p>Well, imagine if that&#8217;s how we all created our designs. Imagine trying to read this post if all the letters and lines were squeezed up tight against each other, or worse still, covered in text from other blog posts. Or imagine trying to use an app designed with all the layout elements crammed together, like Where&#8217;s Waldo. It just wouldn&#8217;t work. An app or website designed like Where&#8217;s Waldo would be unusable. If you&#8217;re old enough to remember what some website designs looked like in the 1990s, you&#8217;ll understand why.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-use-negative-space-in-design\"><strong>How to use negative space in design<\/strong><\/h2>\n\n\n\n<p>When it comes to web pages and app design, negative space has a vital role to play. The considered use of negative space allows a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-layout-best-practices-12-timeless-ui-patterns-explained\/\" target=\"_blank\" rel=\"noreferrer noopener\">web page<\/a> or app to &#8220;breathe,&#8221; which helps draw greater attention to the crucial elements included on a page or app screen. Plus, clever use of negative space can help create a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/organizing-information\/\" target=\"_blank\" rel=\"noreferrer noopener\">hierarchy of information<\/a> so that not all aspects compete for the viewer&#8217;s attention simultaneously.<\/p>\n\n\n\n<p>A thoughtful approach to negative should try to achieve:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>better scannability of a page or app.<\/li>\n\n\n\n<li>enhanced visual hierarchy.<\/li>\n\n\n\n<li>intuitive bonds between the different elements of a page or screen.<\/li>\n\n\n\n<li>an overall less cluttered feel.<\/li>\n\n\n\n<li>improved user focus on core features while reducing distraction.<\/li>\n\n\n\n<li>added style and elegance to a page or screen.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-difference-between-big-and-small-spaces\"><strong>The difference between big and small spaces<\/strong><\/h2>\n\n\n\n<p>How you use negative space in web design or app screen also depends on whether you are applying it to a small or large space.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-larger-spaces\">Larger spaces<\/h3>\n\n\n\n<p>When working with larger spaces, such as the overall design and layout of a web page or app screen, you need to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-content-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">look at the overall content<\/a> when applying negative space. Questions to ask yourself include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can negative space be used to separate elements?<\/li>\n\n\n\n<li>Does your text need to be divided into columns?<\/li>\n\n\n\n<li>How big should you size your margins and padding?<\/li>\n\n\n\n<li>How much distance between images should you use?<\/li>\n<\/ul>\n\n\n\n<p>This type of negative space significantly affects the user&#8217;s visual flow. Whether it is potential guidance or strong push, it can let the attention lead to where you want them to stay.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-smaller-spaces\">Smaller spaces<\/h3>\n\n\n\n<p>Smaller spaces require a different kind of negative spacing. These include design elements such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fonts<\/a><\/li>\n\n\n\n<li>Line spacing<\/li>\n\n\n\n<li>Paragraphs<\/li>\n\n\n\n<li>Lists<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Buttons<\/a><\/li>\n\n\n\n<li>Icons<\/li>\n<\/ul>\n\n\n\n<p>The negative space you assign to smaller <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">design elements<\/a> primarily emphasizes the overall clarity of a website or app screen, especially the amount of negative spacing associated with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">typography<\/a>.\u00a0<\/p>\n\n\n\n<p>Negative space directly influences the readability of text on a page or screen. If there&#8217;s not enough space between your lines of text, they become <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-design-for-scannability\/\" target=\"_blank\" rel=\"noreferrer noopener\">hard to read<\/a> and demand additional effort from the user.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-negative-space-creative-negative-spaces\"><strong>What is negative space: Creative negative spaces<\/strong><\/h2>\n\n\n\n<p>One example of a creative negative space is the image known as Rubin&#8217;s Vase. It was developed in the early 20th Century by the Danish psychologist Edgar Rubin and is a famous example of an optical illusion.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"480\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/negative-space-design.jpeg\" alt=\"negative space design\" class=\"wp-image-44922\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/negative-space-design.jpeg 630w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/negative-space-design-394x300.jpeg 394w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.mmgart.com\/post\/2168-art-term-of-the-month-negative-space---rubins-vase\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>In the image on the left, the yellow vase is the subject, and the white background is the negative space. But if you look at the black and white image on the right, you might instead see the profiles of two male faces. Now look back at the picture on the left. The negative space in the original image also contains the same two male faces. The yellow vase is still the subject, but the negative space conveys additional information to the viewer.<\/p>\n\n\n\n<p>You don&#8217;t think optical illusions are relevant to corporate designs? Well, think again. Take a look at the FedEx logo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"376\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/logo-negative-space-1024x376.png\" alt=\"logo negative space\" class=\"wp-image-44926\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/logo-negative-space-1024x376.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/logo-negative-space-700x257.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/logo-negative-space-768x282.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/logo-negative-space-1536x563.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/logo-negative-space.png 1592w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/companieslogo.com\/fedex\/logo\/#google_vignette\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Look between the E and the X. Notice anything? It&#8217;s an arrow. A subliminal reinforcement of the kind of business FedEx is known for. Another example of the creative use of negative space.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-uxpin-can-help-you-improve-your-use-of-negative-space\"><strong>How UXPin can help you improve your use of negative space<\/strong><\/h2>\n\n\n\n<p>The next time you begin a new design, remember to consider the impact of negative space on your design and user experience. With UXPin, you can create designs and prototypes and preview your work <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/adaptive-versions\/\" target=\"_blank\" rel=\"noreferrer noopener\">across multiple devices<\/a>. Collaborate with your team members or business partners to get feedback on your use of negative space. Get started on your next negative-spaced design project <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">with UXPin today- on free 14-day trial<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever viewed an image or photograph that you really like and wondered why it looks so interesting and engaging? Or maybe you&#8217;ve wondered why a scene in a movie or TV show triggers a strong emotional response. Is it the subject matter or the artist&#8217;s use of perspective? Perhaps. But then think about<\/p>\n","protected":false},"author":3,"featured_media":31216,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-31214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Negative Space \u2013 How Best to Use It in Website and App Design | UXPin<\/title>\n<meta name=\"description\" content=\"In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Negative Space \u2013 How Best to Use It in Website and App Design\" \/>\n<meta property=\"og:description\" content=\"In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-06T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-11T04:12:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Negative Space \u2013 How Best to Use It in Website and App Design\",\"datePublished\":\"2021-08-06T12:00:00+00:00\",\"dateModified\":\"2024-06-11T04:12:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/\"},\"wordCount\":1054,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Negative-space.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/\",\"name\":\"Negative Space \u2013 How Best to Use It in Website and App Design | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Negative-space.png\",\"datePublished\":\"2021-08-06T12:00:00+00:00\",\"dateModified\":\"2024-06-11T04:12:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Negative-space.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Negative-space.png\",\"width\":1200,\"height\":600,\"caption\":\"Negative space\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-negative-space-in-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Negative Space \u2013 How Best to Use It in Website and App Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Negative Space \u2013 How Best to Use It in Website and App Design | UXPin","description":"In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/","og_locale":"en_US","og_type":"article","og_title":"Negative Space \u2013 How Best to Use It in Website and App Design","og_description":"In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/","og_site_name":"Studio by UXPin","article_published_time":"2021-08-06T12:00:00+00:00","article_modified_time":"2024-06-11T04:12:38+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Negative Space \u2013 How Best to Use It in Website and App Design","datePublished":"2021-08-06T12:00:00+00:00","dateModified":"2024-06-11T04:12:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/"},"wordCount":1054,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/","name":"Negative Space \u2013 How Best to Use It in Website and App Design | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space.png","datePublished":"2021-08-06T12:00:00+00:00","dateModified":"2024-06-11T04:12:38+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Negative-space.png","width":1200,"height":600,"caption":"Negative space"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Negative Space \u2013 How Best to Use It in Website and App Design"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=31214"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31214\/revisions"}],"predecessor-version":[{"id":53432,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31214\/revisions\/53432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/31216"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=31214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=31214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=31214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}