{"id":14675,"date":"2018-03-29T11:56:06","date_gmt":"2018-03-29T10:56:06","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14675"},"modified":"2020-09-03T12:56:22","modified_gmt":"2020-09-03T11:56:22","slug":"defense-minimal-digital-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/","title":{"rendered":"In Defense of Minimal (Digital) Design"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Overcomplicating things is not doing you any favors.<\/strong> Particularly with digital design, there are countless examples that are a loud and complex mess of elements that seem to evade, at all costs, the primary goal of the design itself \u2014 to clearly communicate something.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">On the flip side, there\u2019s a major trend nowadays with minimal design. Loads of whitespace, small font-sizes, limited color palettes, and generally as few design elements as possible.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To a degree, the style can be polarizing. It\u2019s somewhat easy to get started with, since a designer doesn\u2019t need to create a whole set of complex elements to have a finished product. Due to that, there\u2019s a lower barrier of entry, so the prevalence is high. You can certainly half-ass a design and say that it\u2019s \u201cminimal\u201d. No one will stop you. The result is that you have a lot of poorly thought-out examples, and a lot of excellent examples of this style.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1281px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1q4ghVV-AX9oCv9oFxl_ABw.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1q4ghVV-AX9oCv9oFxl_ABw.png\" alt=\"\" width=\"1271\" height=\"715\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Google\u2019s homepage famously (and effectively) embodies the idea of \u201cKeep It Simple,\u00a0Stupid\u201d<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A finished result can often evoke a question of \u201cwell, what took you so long?\u201d I think that\u2019s the wrong way to think \u2014 on the contrary, minimal designs can be more difficult and time consuming as it forces you to really prioritize what is most necessary, and you must undergo the difficult process of \u201ctrimming the fat\u201d, so to speak.<\/p>\n<div id=\"attachment_6580\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1jHpEBML506s9IbnNCwjqdA.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1jHpEBML506s9IbnNCwjqdA.jpeg\" alt=\"\" width=\"570\" height=\"280\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Taking it too\u00a0far.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Don\u2019t add extras for no\u00a0reason<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cPerfection is achieved not when there is nothing more to add, but when there is nothing left to take away.\u201d \u2014 Antoine de Saint-Exupery<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Not to argue that minimal designs are perfect just because they are minimal, or to even touch on the topic of perfection, but when you boil a design down to one of its fundamental qualities \u2014 to communicate \u2014 and you\u2019re able to achieve that with less, then that\u2019s an achievement.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cLess is more.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When working on a design, I\u2019ve often seen (and myself have been in) the position that a design feels incomplete, or needs something else. Typically, it\u2019s very difficult to determine what exactly that is. I think that this isn\u2019t the right way to look at things. As mentioned above, you shouldn\u2019t be looking for what to add \u2014 but rather seeing what else could be taken away without dismantling the entire design.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Clarity is\u00a0king<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A minimal design also has benefits in terms of messaging. User attention span is known to be very low. You\u2019re just one speck in an endless sea of online visual stimulation to them. You\u2019ll need to see how to take an idea and convert it to the easiest possible message to understand \u2014 whether it be through wording, visuals, or both. Taking the less-is-more approach here tends to make the communication more straightforward. Clarity is really your ultimate goal, as you\u2019re trying to communicate to users a certain idea, or getting them to buy something.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Don\u2019t forget the technical benefits<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you have less nonsense on your page, it will load faster. If it loads faster, users are happier and they will buy more. It\u2019s a simple correlation that has been proven time and time again. Particularly when considering a mobile-first approach, you need to keep page size down. Some websites nowadays become a monstrosity of effects and dubiously necessary functionality when in reality it adds very little (if anything) to the overall experience of the site. <\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Keep it simple, stupid.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Summing it\u00a0up<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Ultimately, there\u2019s never a magic pill for how you should go about creating a digital design. There are stunning examples of every kind of design style that there is. There are also terrible examples. I think minimal designs can get a bad rap sometimes because they\u2019re just easier to get started with. When done correctly, they can be brilliant in their simplicity. When done poorly, they perpetuate the stereotype. Consider them an elegant solution, used only when appropriate, rather than something that enables laziness.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/@andreikorchagin\">Andrei's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overcomplicating things is not doing you any favors. Particularly with digital design, there are countless examples that are a loud and complex mess of elements that seem to evade, at all costs, the primary goal of the design itself \u2014 to clearly communicate something. On the flip side, there\u2019s a major trend nowadays with minimal design. Loads of whitespace, small&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":217,"featured_media":14681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-14675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"In Defense of Minimal (Digital) Design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Overcomplicating things is not doing you any favors. Particularly with digital design, there are countless examples that are a loud and complex mess of elements that seem to evade, at all costs, the primary goal of the design itself \u2014 to clearly communicate something. On the flip side, there\u2019s a major trend nowadays with minimal design. Loads of whitespace, small... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-29T10:56:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T11:56:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/03\/minimal.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1300\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/03\/minimal.png\",\"width\":1300,\"height\":600},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/\",\"name\":\"In Defense of Minimal (Digital) Design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#primaryimage\"},\"datePublished\":\"2018-03-29T10:56:06+00:00\",\"dateModified\":\"2020-09-03T11:56:22+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/73bb1af8744402bad84c48f099c69388\"},\"headline\":\"In Defense of Minimal (Digital) Design\",\"datePublished\":\"2018-03-29T10:56:06+00:00\",\"dateModified\":\"2020-09-03T11:56:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/defense-minimal-digital-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/73bb1af8744402bad84c48f099c69388\",\"name\":\"Andrei Korchagin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d1dae0e03fbca72fc7975d6762878ff1d4ca48ae8df40cfe154b12795786586?s=96&d=mm&r=g\",\"caption\":\"Andrei Korchagin\"},\"description\":\"NYC. Looking for what happens at the intersection of digital strategy and beautiful design. Visit me at https:\/\/andreikorchagin.com\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/217"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=14675"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14675\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/14681"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=14675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=14675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=14675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}