You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
8.0 KiB
HTML
74 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>(POST) Minimal Design</title>
|
|
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
|
|
<link rel='stylesheet' type='text/css' href="../style.css"> <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<body>
|
|
<a style="text-decoration: none;" href="../">
|
|
<pre class="main-header">
|
|
_______ _ _ _______ __ __ _______ _______ __ _
|
|
|______ | | |______ \_/ |_____| |_____| | \ |
|
|
______| |_____| | | | | | | | \_|
|
|
</pre>
|
|
</a>
|
|
<hr/><p><a href="../">sf.cu</a> > <a style="color:#bd93f9" href="../blog/">Blog</a> > <a style="color:#bd93f9" href=".">Minimal Design</a></p>
|
|
<h1><i class="fa fa-circle-thin" aria-hidden="true"></i>Minimal Design</h1>
|
|
<p style="font-size:110%"><strong><svg class="postinfo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1m-1 11h-5v5h5v-5Z"/></svg>28 July 2023</strong></p><p style="font-size:110%"><svg class="postinfo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12zm11-5a1 1 0 1 0-2 0v3.764a3 3 0 0 0 1.658 2.683l2.895 1.447a1 1 0 1 0 .894-1.788l-2.894-1.448a1 1 0 0 1-.553-.894V7z" clip-rule="evenodd"/></svg><strong>5 min</strong><p style="font-size:110%"><svg class="postinfo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 0h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM10 13H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm7 0a4 4 0 1 1-3.995 4.2L13 17l.005-.2A4 4 0 0 1 17 13z"/></g></svg></strong><a style="color:#ff79c6" href="../blog/design/"><i class="fa fa-pencil" aria-hidden="true"></i>Design</a></p>
|
|
<h3><i class="fa fa-list" aria-hidden="true"></i>Table Of Contents</h3>
|
|
|
|
<ol>
|
|
<li><a href="#intro" style="color:#ff79c6">Introduction</a></li>
|
|
<li><a href="#requirements" style="color:#ff79c6">Focusing On The Requirements</a></li>
|
|
<li><a href="#timelessness" style="color:#ff79c6">Timelessness</a></li>
|
|
<li><a href="#elegance" style="color:#ff79c6">Elegance</a></li>
|
|
<li><a href="#consistency" style="color:#ff79c6">Consistency</a></li>
|
|
<li><a href="#breathing-space" style="color:#ff79c6">Breathing Space</a></li>
|
|
<li><a href="#harmony" style="color:#ff79c6">Harmony</a></li>
|
|
<li><a href="#maintainence" style="color:#ff79c6">Maintainence</a></li>
|
|
<li><a href="#conclusion" style="color:#ff79c6">Conclusion</a></li>
|
|
</ol>
|
|
|
|
<h2 id="intro"><i class="fa fa-info" aria-hidden="true"></i>Introduction</h2>
|
|
<p>People often ask me why I choose minimal design for brands. This is because it has numerous practical advantages that provide ease and consistency in a brand.</p>
|
|
<h2 id="requirements"><i class="fa fa-minus-circle" aria-hidden="true"></i>Focusing On The Requirements</h2>
|
|
<p>One of the main aspects of minimal design is that it focuses on only the required elements of a specific brand. As a result, design becomes distractionless. This is especially easy nowadays since almost no one cares about the meaning behind a logo except in rare cases.</p>
|
|
<p>Another advantage of this type of design is that it focuses on the core message, or in this case, brand type. Too much designing can confuse viewers on whether a brand is a playful brand or a luxury brand, for example.</p>
|
|
<h2 id="timelessness"><svg class="postinfo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12zm11-5a1 1 0 1 0-2 0v3.764a3 3 0 0 0 1.658 2.683l2.895 1.447a1 1 0 1 0 .894-1.788l-2.894-1.448a1 1 0 0 1-.553-.894V7z" clip-rule="evenodd"/></svg>Timelessness</h2>
|
|
<p>Minimal design, especially in the realm of branding, makes a brand feel timeless. You could take almost any minimal design from 200 years ago and use it for your brand today if there were no limits on copying. On the other hand, a sophisticated design from even 50 years ago will look dated most of the time.</p>
|
|
<p>This works because the elements that cause a brand to look dated are reduced to an absolute minimum. With minimal design, you have as little correlation with time as possible in your brands.</p>
|
|
<h2 id="elegance"><i class="fa fa-money" aria-hidden="true"></i>Elegance</h2>
|
|
<p>Minimal design when performed properly can make any brand look elegant. This is due to their simple nature. Look at most luxury brands, and you will notice that their designs are all simple.</p>
|
|
<h2 id="consistency"><i class="fa fa-th-large" aria-hidden="true"></i>Consistency</h2>
|
|
<p>Minimal designs are also consistent. This makes it easy to make a strong and impactful brand that reminds viewers of you. This can also be achieved through other types of design, but it is more powerful on average with minimal design.</p>
|
|
<p>Such types of consistency also provide versatility. You can place your brand design in any context, screen size, device and media type while also maintaining a strong brand presence.</p>
|
|
<h2 id="breathing-space"><i class="fa fa-eye" aria-hidden="true"></i>Breathing Space</h2>
|
|
<p>Many designs nowadays are complicated and provide barely any breathing space for your eyes. With minimal designs, however, you can rest easy. Your eyes will not be overwhelmed by minimal design as much as complicated designs.</p>
|
|
<p>This is useful on informational posts or flyers. It allows your users to process information clearly without any clutter.</p>
|
|
<h2 id="harmony"><i class="fa fa-plus" aria-hidden="true"></i>Harmony</h2>
|
|
<p>Minimal designs often make use of negative space or whitespace to make a design look appealing. This can look spectacular if executed correctly. Below is an example:</p>
|
|
<div style="text-align:center;"><img src="spade.webp" alt="A Spade Logo using whitespace properly"><figcaption>A Spade Logo</figcaption></div>
|
|
<h2 id="maintainence"><svg class="postinfo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1m-1 11h-5v5h5v-5Z"/></svg>Maintainence</h2>
|
|
<p>Minimal brand designs can be easily maintained and modified. This makes them versatile in terms of rebranding.</p>
|
|
<h2 id="conclusion"><i class="fa fa-book" aria-hidden="true"></i>Conclusion</h2>
|
|
<p>Minimal designs are preferred because:</p>
|
|
<ol>
|
|
<li>They focus on the requirements</li>
|
|
<li>They are timeless and elegant</li>
|
|
<li>They stay consistent</li>
|
|
<li>They give your eyes breathing space</li>
|
|
<li>They use harmony in a positive way</li>
|
|
<li>They are easier to maintain</li>
|
|
</ol>
|
|
<p>These are the main reasons I do minimal design.</p>
|
|
<p><a href="mailto:sufyaan@counterhawks.com?subject=Minimal%20Design">>>> Reply To Me</a></p>
|
|
<p style="text-align:center;"><a href="../backups/" style="color:#bd93f9"><i class="fa fa-angle-left" aria-hidden="true"></i>Previous Post</a> - <a style="color:#bd93f9" href="../fp/">Next Post</a> <i style="color:#bd93f9" class="fa fa-angle-right" aria-hidden="true"></i></p>
|
|
<hr/>
|
|
<footer>
|
|
<p class="footer-text"><a style="color:#bd93f9" href="../blog">blog</a> - <a style="color:#ffb86c" href="../about">about</a> - <a style="color:#f1fa8c" href="../portfolio">portfolio</a> - <a style="color:#ff5555" href="../links">links</a></p>
|
|
<p class="footer-text" style="font-size:80%"><a href="../">sufyaan.cyou</a></p><p class="footer-text" style="font-size:65%"><a style="color:#aaaaaa" href="../sitemap">Site Map</a></p>
|
|
</footer>
|