{"id":952,"date":"2021-10-26T08:35:39","date_gmt":"2021-10-26T08:35:39","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=952"},"modified":"2021-10-26T08:35:41","modified_gmt":"2021-10-26T08:35:41","slug":"denoise-our-designs","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/denoise-our-designs\/","title":{"rendered":"Denoise Our\u00a0Designs"},"content":{"rendered":"\n<p>Here\u2019s the design I created recently. It was a big card containing some smaller cards inside.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*O8_sC3Ik2eIrT_Z-re-1tg.png\" alt=\"\"\/><figcaption>Cards inside a another card creates gaps and gutters, which are non-communicating elements that add noises to our&nbsp;design.<\/figcaption><\/figure>\n\n\n\n<p>I knew it wasn\u2019t the ideal design, but I couldn\u2019t pinpoint exactly where the problem was.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>When I rewatched John McWades\u2019s&nbsp;<a href=\"https:\/\/www.linkedin.com\/learning\/graphic-design-tips-tricks\/paper-flyer-redesign?autoAdvance=true&amp;autoSkip=false&amp;autoplay=true&amp;resume=false&amp;u=3322\" rel=\"noreferrer noopener\" target=\"_blank\">graphic design video<\/a>&nbsp;in which he emphasizes the importance of getting rid of the noises\u200a\u2014\u200athe non-communicating elements in our designs, I realized that by putting cards inside another card, I created a lot of gaps and gutters, which were exactly the noises that made my design complex. I fell into the trap I could\u2019ve avoided.<\/p>\n\n\n\n<p>In UI\/graphic design, shadows, borders, gaps are often times unnecessary. They were added purely for decorating purposes and without a clear intention. Without communicating anything solid, they generate noises and dead spaces. That\u2019s why they are distracting. If we get rid of them, our designs will be much more clean and visually comfortable.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*xNskt3i4g-RsGaQOv-9Nfg.png\" alt=\"\"\/><figcaption>Removing the nesting of elements gets rid of the gaps and gutter and makes our design more clean and pleasant to look&nbsp;at.<\/figcaption><\/figure>\n\n\n\n<p>Here\u2019s a checklist we can use to denoise our design.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Check and remove unnecessary shadows and borders.<\/li><li>Check if there are any gaps created by nested shapes. Remove them by removing the nesting of elements.<\/li><li>Check if there are any irregular, awkward dead spaces that become unusable? Rearrange elements based on a more simple layout to create a simpler hierarchy.<\/li><\/ul>\n\n\n\n<p>When all elements are communicating, when there are fewer things that distract our eyes and brains, the signal, which is our message, will become clear, which is reflected visually. Our design will be easy to look at, and pleasant to look at.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here\u2019s the design I created recently. It was a big card containing some smaller cards inside. I knew it wasn\u2019t the ideal design, but I couldn\u2019t pinpoint exactly where the problem was.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[],"class_list":["post-952","post","type-post","status-publish","format-standard","hentry","category-visual-design"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=952"}],"version-history":[{"count":1,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/952\/revisions"}],"predecessor-version":[{"id":953,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/952\/revisions\/953"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=952"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}