Minimal Design post + new category + updated new post script
TitanElectrons
1 year ago
parent
c1daf22d9d
commit
52ffc35126
@ -0,0 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><title>(DESIGN) Sufyaan's Webpage</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 href="../../"><div style="text-align:center"><img src="../../images/sufyaan.webp"></div></a><hr/><p><a href="../../">sf.cu</a> > <a style="color:#bd93f9" href="../../../">Blog</a> > <a style="color:#ff79c6" href="."><i class="fa fa-terminal" aria-hidden="true"></i>Linux</a></p>
|
||||
<h1 class="homepage-heading"><i class="fa fa-pencil" aria-hidden="true"></i></a>Design</h1><p class="homepage-body">This category is reserved for posts related to design.</p><ul class="posts">
|
||||
<li><code class="code-posts">28/07/23</code> - <a style="color:#bd93f9" href="../../minimal-design/"><i class="fa fa-circle-thin" aria-hidden="true"></i>Minimal Design</a></li>
|
||||
<p class="homepage-body">You are at the bottom of the image!</p><hr/><footer><p class="footer-text"><a style="color:#bd93f9" href="../../../">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>
|
||||
@ -0,0 +1,66 @@
|
||||
<!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 href="../"><div style="text-align:center"><img src="../images/sufyaan.webp"></div></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><i class="fa fa-calendar" aria-hidden="true"></i>28 July 2023</strong></p><p style="font-size:110%"><i class="fa fa-clock-o" aria-hidden="true"></i><strong>5 min</strong><p style="font-size:110%"><i class="fa fa-arrow-right" aria-hidden="true"></i></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"><i class="fa fa-clock-o" aria-hidden="true"></i>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.</p>
|
||||
<h2 id="maintainence"><i class="fa fa-calendar" aria-hidden="true"></i>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-double-left" aria-hidden="true"></i>Previous Post</a></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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,35 @@
|
||||
# VimWiki Is Terrific
|
||||
|
||||
I have recently been using [VimWiki](https://github.com/vimwiki/vimwiki) to take all of my notes instead of Joplin, and it has been working really well. It has its own [Markdown (.md)](../definitions/markdown) format, but I use regular [Markdown (.md)](../definitions/markdown) with it. I use Syncthing to sync all my notes to all of my devices. There is barely any delay, so there are never any conflict issues.
|
||||
|
||||
## What Is VimWiki?
|
||||
|
||||
VimWiki is a plugin for Vim or Neovim that allows you to create a personal wiki. On this wiki, you can add anything you want. It is essentially Obsidian but more minimal and scriptable.
|
||||
|
||||
Since it runs in Vim or Neovim, it is extremely fast, lightweight and has barely any bloat. It runs blazingly fast even on old devices. The capability is also extremely high, since you can edit files at light speed when you learn Vim or Neovim properly.
|
||||
|
||||
## How Is It Useful?
|
||||
|
||||
Using VimWiki, it is trivial to organise notes, ideas, diaries, to-do lists or even future plans. It supports tables, links and much more. There is even an option to export your [Markdown (.md)](../definitions/markdown) files to HTML, which allows you to create webpages quickly.
|
||||
|
||||
It allows you to do everything regular [Markdown (.md)](../definitions/markdown) can do and more. For example, you can have checklists with progress on them, like this;
|
||||
|
||||
|
||||
[ ] --> 0% complete
|
||||
[.] --> 1% - 33% complete
|
||||
[o] --> 33% - 66% complete
|
||||
[0] --> 66% - 99% complete
|
||||
[X] --> 100% complete
|
||||
|
||||
|
||||
You can even have pre-formatted text. This makes it useful to add and explain code.
|
||||
|
||||
## How Do You Use It?
|
||||
|
||||
On my computers, I use Neovim to use VimWiki. When it comes to my phone, I use the Markor app, which is a [Markdown (.md)](../definitions/markdown) viewer. It is not the best experience on mobile, but I am willing to give that up for an amazing experience on my computers, since I use and note down things on my computer more.
|
||||
|
||||
The reason I am using VimWiki now is mainly to stay in line with me preferring plaintext to proprietary note apps or formats. As I mentioned in my last post, I try to use as much plaintext as possible to prevent distractions and have easy access to my notes wherever and whenever I want to.
|
||||
|
||||
## Conclusion
|
||||
|
||||
To conclude, I switched to VimWiki because I find it faster and easier to use Neovim directly on my computer. I love using [Markdown (.md)](../definitions/markdown), so I feel at home when using VimWiki. It is also because I prefer to use plaintext as much as possible.
|
||||
@ -1,7 +1,8 @@
|
||||
nvim -c '39' -c 'norm yypk14w' ../sitemap/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' index.html
|
||||
nvim -c '3' -c 'norm yypk10w' linux/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' software/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' technology/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' guides/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' other/index.html
|
||||
nvim -c '39' -c 'norm yypk14w' sitemap/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' blog/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' blog/linux/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' blog/software/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' blog/technology/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' blog/design/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' blog/guides/index.html
|
||||
nvim -c '3' -c 'norm yypk10w' blog/other/index.html
|
||||
|
||||
Loading…
Reference in New Issue