{"id":510,"date":"2022-02-02T12:06:28","date_gmt":"2022-02-02T05:06:28","guid":{"rendered":"https:\/\/bnsd.binus.ac.id\/graphic-design\/?p=510"},"modified":"2022-02-02T12:06:28","modified_gmt":"2022-02-02T05:06:28","slug":"best-practices-for-minimalist-design","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2022\/02\/02\/best-practices-for-minimalist-design\/","title":{"rendered":"Best Practices for Minimalist Design"},"content":{"rendered":"<p id=\"ac8d\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\">With the growing use of mobile devices, minimalism is on the rise. Minimalism brings additional benefits to apps and websites, in the shape of faster loading times and better compatibility between screen sizes. Beautiful minimalist apps\u00a0<em class=\"jo\">combined with great usability<\/em>\u00a0are really impressive: an easily navigated, simple app is a very powerful form of communication.<\/p>\n<blockquote class=\"jp\">\n<p id=\"4565\" class=\"jq jr er es b js jt ju jv jw jx jn co\" data-selectable-paragraph=\"\">Designers want to say more by showing less<\/p>\n<\/blockquote>\n<p id=\"e67d\" class=\"pw-post-body-paragraph is it er iu b fp jy iw ix fs jz iz ja jb ka jd je jf kb jh ji jj kc jl jm jn dv bx\" data-selectable-paragraph=\"\">But at the same time minimalism is tricky to get right because it forces designers to\u00a0<em class=\"jo\">say more with less<\/em>. For those who want to give minimalism a try, make sure that you know some of the basic rules of thumb before starting your design. Here are some tips to making minimalism work for you:<\/p>\n<h1 id=\"922d\" class=\"kd ke er bl bm kf kg iw kh ki kj iz kk kl km kn ko kp kq kr ks kt ku kv kw kx bx\" data-selectable-paragraph=\"\">Remove All Unnecessary Elements<\/h1>\n<p id=\"3ecc\" class=\"pw-post-body-paragraph is it er iu b fp ky iw ix fs kz iz ja jb la jd je jf lb jh ji jj lc jl jm jn dv bx\" data-selectable-paragraph=\"\"><em class=\"jo\">Every item within your design should have a purpose<\/em><\/p>\n<p id=\"e959\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\">With a minimalist design, every element on the page\u00a0<em class=\"jo\">serves a purpose<\/em>. The design is stripped of everything except for those elements that are absolutely essential. As Antoine De Saint-Exupery said:<\/p>\n<blockquote class=\"jp\">\n<p id=\"199c\" class=\"jq jr er es b js jt ju jv jw jx jn co\" data-selectable-paragraph=\"\">\u201c<mark class=\"yi yj pa\"><em class=\"ld\">Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away<\/em><\/mark><mark class=\"yi yj pa\">.<\/mark>\u201d<\/p>\n<\/blockquote>\n<figure class=\"lf lg lh li lj eh dh di paragraph-image\">\n<div class=\"lk ll gk lm aj ln\" role=\"button\">\n<div class=\"dh di le\">\n<div class=\"lt s gk lu\">\n<div class=\"lv lw s\">\n<div class=\"lo lp t u v lq aj bj lr ls\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pp us t u v lq aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*Z5hZVylYF3Kn2BBMultY7A.png\" alt=\"\" width=\"700\" height=\"324\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ek el dj dh di em en bl b eo cn co\" data-selectable-paragraph=\"\">The message is clearly spelled out and the screen is void of unnecessary clutter<\/figcaption><\/figure>\n<p id=\"0be8\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\"><strong class=\"iu ma\">Tips:\u00a0<\/strong>Be severe when deciding what stays and what goes.<\/p>\n<ul class=\"\">\n<li id=\"a4ec\" class=\"is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn mb mc md bx\" data-selectable-paragraph=\"\">Forget about purely decorative photos. Images should not be included unless they\u2019re necessary for making your message clear.<\/li>\n<li id=\"6da6\" class=\"is it er iu b fp me iw ix fs mf iz ja jb mg jd je jf mh jh ji jj mi jl jm jn mb mc md bx\" data-selectable-paragraph=\"\">Get rid of all unnecessary words and\u00a0<a class=\"cr ep\" href=\"https:\/\/uxplanet.org\/effective-writing-for-your-ui-things-to-avoid-f6084e94e009\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">communicate as succinctly as you can<\/a>. Text copy should include only the bare minimum information needed to thoroughly explain your message. At the same time, text copy should contain all meaningful information, because the reduction of meaningful information leads to confusion, and bad user experience.<\/li>\n<\/ul>\n<h1 id=\"84b5\" class=\"kd ke er bl bm kf kg iw kh ki kj iz kk kl km kn ko kp kq kr ks kt ku kv kw kx bx\" data-selectable-paragraph=\"\">Create a Single Focal Point per Screen<\/h1>\n<p id=\"0b53\" class=\"pw-post-body-paragraph is it er iu b fp ky iw ix fs kz iz ja jb la jd je jf lb jh ji jj lc jl jm jn dv bx\" data-selectable-paragraph=\"\"><em class=\"jo\">The less elements on the screen, the more potent the remaining ones are.<\/em><\/p>\n<p id=\"e8b3\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\">The minimalist philosophy centers on the idea that you must design around the content:\u00a0<em class=\"jo\">content is king, and visual layout supports to the king<\/em>. But the idea is to make the message more clear not just by stripping away distractions, but by keeping focus on content. Thus, a minimalist design should highlight key content and functional elements.<\/p>\n<figure class=\"mk ml mm mn mo eh dh di paragraph-image\">\n<div class=\"lk ll gk lm aj ln\" role=\"button\">\n<div class=\"dh di mj\">\n<div class=\"lt s gk lu\">\n<div class=\"mp lw s\">\n<div class=\"lo lp t u v lq aj bj lr ls\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pp us t u v lq aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*YRGgyvYcxKMelebKlY3xWQ.jpeg\" alt=\"\" width=\"700\" height=\"297\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ek el dj dh di em en bl b eo cn co\" data-selectable-paragraph=\"\">Hierarchy is what makes content easier to understand<\/figcaption><\/figure>\n<h1 id=\"5180\" class=\"kd ke er bl bm kf kg iw kh ki kj iz kk kl km kn ko kp kq kr ks kt ku kv kw kx bx\" data-selectable-paragraph=\"\">Simplify Color Scheme<\/h1>\n<p id=\"b142\" class=\"pw-post-body-paragraph is it er iu b fp ky iw ix fs kz iz ja jb la jd je jf lb jh ji jj lc jl jm jn dv bx\" data-selectable-paragraph=\"\"><em class=\"jo\">Limiting the number of used colors<\/em><\/p>\n<p id=\"a3e2\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\">Simplifying the\u00a0<a class=\"cr ep\" href=\"https:\/\/uxplanet.org\/a-guide-to-color-and-conversion-rates-f3a28e8e32bb#.yb5qv6tx4\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">color scheme<\/a>\u00a0improves the user experience while having too many colors can have a negative impact on it. However, limiting a color scheme doesn\u2019t mean that you need to design in black and white. The idea with a minimalist design is to use only the colors necessary to create the right visual hierarchy and convey the right mood.<\/p>\n<figure class=\"mk ml mm mn mo eh dh di paragraph-image\">\n<div class=\"dh di mq\">\n<div class=\"lt s gk lu\">\n<div class=\"mr lw s\">\n<div class=\"lo lp t u v lq aj bj lr ls\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pp us t u v lq aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/564\/1*Dg26HJflHWo2OBx7NlcZeg.jpeg\" alt=\"\" width=\"564\" height=\"540\" \/><\/div>\n<\/div>\n<\/div><figcaption class=\"ek el dj dh di em en bl b eo cn co\" data-selectable-paragraph=\"\">Clear app for iOS use analogous color scheme to visually prioritize tasks.<\/figcaption><\/figure>\n<p id=\"e9a0\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\"><strong class=\"iu ma\">Tip:\u00a0<\/strong>Consider using\u00a0<a class=\"cr ep\" href=\"https:\/\/uxplanet.org\/vibrant-colors-for-apps-and-sites-ee488953de55\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">bold colors<\/a>\u00a0for your design. Increased font size and an accent color draws the users\u2019 attention to a particular area of the screen without additional visual hints.<\/p>\n<figure class=\"mk ml mm mn mo eh dh di paragraph-image\">\n<div class=\"lk ll gk lm aj ln\" role=\"button\">\n<div class=\"dh di ms\">\n<div class=\"lt s gk lu\">\n<div class=\"mt lw s\">\n<div class=\"lo lp t u v lq aj bj lr ls\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pp us t u v lq aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*FFGVC9Yzeq-MtBfUBWfKuA.gif\" alt=\"\" width=\"700\" height=\"525\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ek el dj dh di em en bl b eo cn co\" data-selectable-paragraph=\"\">A pop of color draws the users\u2019 attention to a particular area of the screen. Image credit:\u00a0<a class=\"cr ep\" href=\"https:\/\/dribbble.com\/shots\/2278322-Adding-a-new-goal-animation\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Dribbble<\/a><\/figcaption><\/figure>\n<h1 id=\"9fe2\" class=\"kd ke er bl bm kf kg iw kh ki kj iz kk kl km kn ko kp kq kr ks kt ku kv kw kx bx\" data-selectable-paragraph=\"\">Use Generous Whitespace<\/h1>\n<p id=\"1b26\" class=\"pw-post-body-paragraph is it er iu b fp ky iw ix fs kz iz ja jb la jd je jf lb jh ji jj lc jl jm jn dv bx\" data-selectable-paragraph=\"\"><em class=\"jo\">Breathing space helps avoid a cluttered look<\/em><\/p>\n<p id=\"7c83\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\"><a class=\"cr ep\" href=\"https:\/\/uxplanet.org\/visual-dividers-in-mobile-ui-design-53208de5426f#.uo75lbdyl\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Whitespace<\/a>\u00a0is the blank space between content. It\u2019s an essential ingredient of minimalism \u2014 it\u2019s what makes the layout easy to scan. Rather than thinking of whitespace as empty space that needs to be filled with content or functional elements, think of whitespace as frames for your content.<\/p>\n<figure class=\"mk ml mm mn mo eh dh di paragraph-image\">\n<div class=\"dh di mu\">\n<div class=\"lt s gk lu\">\n<div class=\"mv lw s\">\n<div class=\"lo lp t u v lq aj bj lr ls\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pp us t u v lq aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/629\/1*QahuHY_rWsn2P3NUnk0sbg.png\" alt=\"\" width=\"629\" height=\"600\" \/><\/div>\n<\/div>\n<\/div><figcaption class=\"ek el dj dh di em en bl b eo cn co\" data-selectable-paragraph=\"\">Medium app for iO demonstrates how to create excellent visual hierarchy with good typography and generous whitespace.<\/figcaption><\/figure>\n<p id=\"e8a7\" class=\"pw-post-body-paragraph is it er iu b fp iv iw ix fs iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn dv bx\" data-selectable-paragraph=\"\"><strong class=\"iu ma\">Tip:<\/strong>\u00a0<em class=\"jo\">Larger distance forces attention.<\/em>\u00a0You can make elements more noticeable by increasing the negative space around them.<\/p>\n<figure class=\"mk ml mm mn mo eh dh di paragraph-image\">\n<div class=\"dh di mw\">\n<div class=\"lt s gk lu\">\n<div class=\"mx lw s\">\n<div class=\"lo lp t u v lq aj bj lr ls\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pp us t u v lq aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/574\/1*AOQsleeWgMiXcf3TtIcddw.jpeg\" alt=\"\" width=\"574\" height=\"547\" \/><\/div>\n<\/div>\n<\/div><figcaption class=\"ek el dj dh di em en bl b eo cn co\" data-selectable-paragraph=\"\">Sky app for iOS uses whitespace to create a hierarchy and make content easier to understand<\/figcaption><\/figure>\n<h1 id=\"ee23\" class=\"kd ke er bl bm kf kg iw kh ki kj iz kk kl km kn ko kp kq kr ks kt ku kv kw kx bx\" data-selectable-paragraph=\"\">Conclusion<\/h1>\n<p id=\"501e\" class=\"pw-post-body-paragraph is it er iu b fp ky iw ix fs kz iz ja jb la jd je jf lb jh ji jj lc jl jm jn dv bx\" data-selectable-paragraph=\"\">The goal of minimalist design is not in removing as many objects as possible. The ultimate goal is to achieve the simplicity of interaction by creating a frictionless design. And this happens only when a designer combines usability with excellent visual aesthetics.<\/p>\n<p data-selectable-paragraph=\"\">\n<p data-selectable-paragraph=\"\">\n<p data-selectable-paragraph=\"\">Sources: <a href=\"https:\/\/uxplanet.org\/best-practices-for-minimalist-design-7af4a9b61ad7\">Best Practices for Minimalist Design | by Nick Babich | UX Planet<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With the growing use of mobile devices, minimalism is on the rise. Minimalism brings additional benefits to apps and websites, in the shape of faster loading times and better compatibility between screen sizes. Beautiful minimalist apps\u00a0combined with great usability\u00a0are really impressive: an easily navigated, simple app is a very powerful form of communication. Designers want [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":511,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/510"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=510"}],"version-history":[{"count":0,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/511"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}