My blog-creating journey has been really long. I created my first blog with WordPress, but I don’t like it. I don’t like the design and I don’t like coding WordPress, so I have never really stuck with it. After writing a few blog posts I quit and the website is also permanently lost. (The essence of blogging should be creating content I know).
However, recently I discovered a Github project (link here) that uses Notion as the CMS and hosts the blog on Vercel for free. I immediately gave it a try and fell in love with it immediately. I love writing on Notion! But still, I am not happy with the design. Here is my old blog. It has nice animation, UI design and the website is fast as well, but not really what I want.
So I decided to design my own blog.
UI design is by no means easy, even for a front-end developer. Learning every new skill is to learn its principle first. Then try to apply it to a real project. So what is the essential element of UI design? As a beginner, I think the basic is to create a consistent layout, typography and colour scheme. To learn that I went to Youtube and walked through this crash course, which was created by DesignCourse and also these videos, by Mizko, to learn how to create a typography system. Also, I found that skillshare is a particularly good resource if you are a person like me who loves learning lots of new skills because it is subscription-based and within the subscription, you can watch as many courses as you want.
Apart from learning from the above videos, I also find some references. Initially, I chose two websites — the blog of Ali Abdaal and Blogging Tips. I chose these two websites based on the following requirements:
- layouts should work well without photos for the posts
- clean, neat and without many extra elements
- compatible with a blog with more than one theme
To document every thing, I use the canvas function in Obsidian, which is a free great note taking apps, especially if you endorse the Zettelkasten methodology.
This is my first Figma design.
It takes me 5 days to complete the whole website, from learning design principles, Next13, to researching and creating the design, to coding. But still, I don’t like it. The actual website doesn’t feel like what is on the Figma design. And even in the Figma design, the look is still very boring and has too many colours.
I am done with it, but I am not satisfied. So I did it all over again, starting with research. This time I found my perfect reference James Clear’s blog. This is clean, with no photos on the blog and not too much usage of colour that overpowers the content.
This is my new Figma design. I am not gonna hide anything. It is very similar to James’ blog. But so far this is what I like the most. At least it represents the kind of person I am. So I am happy about it for now. There will be more sections coming, for example, a book review section, which is similar to this blog. But before I got enough content, I will leave it for now and focus on my writing first. One thing I have learnt is to do the essence, do the minimal and do it great. You don’t cover all the future use cases at once.
No I am happily writing with this blog.