{"id":1193,"date":"2018-11-08T15:32:13","date_gmt":"2018-11-08T15:32:13","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=1193"},"modified":"2023-08-03T14:34:07","modified_gmt":"2023-08-03T13:34:07","slug":"how-to-use-dark-backgrounds-in-web-design","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/","title":{"rendered":"How to use dark backgrounds in web design"},"content":{"rendered":"<p>Effective <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-consistency-in-web-design\/\">web design<\/a> is all about <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/elements-of-effective-web-design-for-positive-user-experience\/\">user experience<\/a>, usability, and style. Balancing these elements will inevitably lead to stunning <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/advantages-of-using-more-whitespace-in-web-design\/\">web design<\/a> solutions that can really draw in your users, and make a statement about your company. But styles are constantly changing. Especially online, where what was popular three months ago, could have completely changed from what we see now. And that is something we have seen with the rise in dark background colours. Once shunned by the industry, an increasing number of designers and companies are opting for bold and dark backgrounds. Here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester<\/a>, we are Manchester&#8217;s leading web design experts. And we work with companies and businesses across Manchester, and the surrounding region, including <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-southport\/\">Southport<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-wigan\/\">Wigan<\/a>, to produce high quality, effective, web design solutions. As a result, we have produced this guide to how to use dark backgrounds in web design.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-916 aligncenter\" src=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/08\/web-design-and-seo-for-light-design-ltd-300x242.png\" alt=\"web design and seo for light design ltd\" width=\"300\" height=\"242\" srcset=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/08\/web-design-and-seo-for-light-design-ltd-300x242.png 300w, https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/08\/web-design-and-seo-for-light-design-ltd-600x483.png 600w, https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/08\/web-design-and-seo-for-light-design-ltd-768x619.png 768w, https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/08\/web-design-and-seo-for-light-design-ltd.png 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<h2>Dark backgrounds in web design<\/h2>\n<p>Dark colours have been avoided in web design for a number of years. Instead designers have favoured pale, light colours, or even just simple white. This is because the light colours symbolize a blank canvas. Or a story that&#8217;s yet to unfold. And this allows users to feel in control of their online experience, creating their own story. In fact, users now almost expect to find a white background when they open a new website. And this leads to a feeling of familiarity.<\/p>\n<p>Dark colours on the other hand can be more emotive, intriguing and interesting. Which means that a dark background can draw a user into the web page, without this feeling of familiarity. And this can actually increase sales and sign ups, as users are less likely to over analyse on a website that takes them slightly out of their subliminal comfort zone.<\/p>\n<h3>How to use dark backgrounds in web design<\/h3>\n<p>So do dark backgrounds work well on any website? With any design choices? Or should you choose carefully when using a dark green, blue, purple or even black background. Well, simply put, dark backgrounds are not as pliable and easy to mould as white backgrounds. You will need to pay close attention to:<\/p>\n<ul>\n<li><strong><em>the text-<\/em><\/strong> one of the biggest disadvantages of a dark background is the readability of the text. So you will need to make sure your text stands out, and contrasts with the background, to make it easier to read. You might also want to make it twice as big as it would be on a white background, to really help with the readability of the content<\/li>\n<li><em><strong>whitespace-<\/strong> <\/em>by this we mean the negative space on the page. The space that isn&#8217;t being actively used. On a black background, the space on the screen feels much smaller. And this means that you will need to increase the amount of negative space around elements, to really draw attention to them. Focusing on one element at a time is also a good idea, with no columns of blocks to confuse the layout.<\/li>\n<\/ul>\n<p>For more information or professional web design support, get in touch with the team today, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Effective web design is all about user experience, usability, and style. Balancing these elements will inevitably lead to stunning web design solutions that can really draw in your users, and make a statement about your company. But styles are constantly changing. Especially online, where what was popular three months ago, could have completely changed from [&#8230;]\n","protected":false},"author":2,"featured_media":993,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use dark backgrounds in web design - Pumpkin Web Design Manchester<\/title>\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.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use dark backgrounds in web design - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"Effective web design is all about user experience, usability, and style. Balancing these elements will inevitably lead to stunning web design solutions that can really draw in your users, and make a statement about your company. But styles are constantly changing. Especially online, where what was popular three months ago, could have completely changed from [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-08T15:32:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-03T13:34:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/09\/responsive-1156474_1280.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"838\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pumpkin Web Design Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/\",\"name\":\"How to use dark backgrounds in web design - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2018-11-08T15:32:13+00:00\",\"dateModified\":\"2023-08-03T13:34:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use dark backgrounds in web design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Full service digital agency\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Providing top notch web design, across Manchester, since 2009\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use dark backgrounds in web design - Pumpkin Web Design Manchester","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.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/","og_locale":"en_GB","og_type":"article","og_title":"How to use dark backgrounds in web design - Pumpkin Web Design Manchester","og_description":"Effective web design is all about user experience, usability, and style. Balancing these elements will inevitably lead to stunning web design solutions that can really draw in your users, and make a statement about your company. But styles are constantly changing. Especially online, where what was popular three months ago, could have completely changed from [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2018-11-08T15:32:13+00:00","article_modified_time":"2023-08-03T13:34:07+00:00","og_image":[{"width":1280,"height":838,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/09\/responsive-1156474_1280.png","type":"image\/png"}],"author":"Pumpkin Web Design Manchester","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pumpkin Web Design Manchester","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/","name":"How to use dark backgrounds in web design - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2018-11-08T15:32:13+00:00","dateModified":"2023-08-03T13:34:07+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/how-to-use-dark-backgrounds-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"How to use dark backgrounds in web design"}]},{"@type":"WebSite","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/","name":"Pumpkin Web Design Manchester","description":"Full service digital agency","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28","name":"Pumpkin Web Design Manchester","description":"Providing top notch web design, across Manchester, since 2009","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1193"}],"collection":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/comments?post=1193"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1193\/revisions"}],"predecessor-version":[{"id":12771,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1193\/revisions\/12771"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/993"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=1193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=1193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=1193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}