Upgrade My Blog From Plain HTML to "Well-Designed" In 2 Weeks. I Suck.

About 3 weeks ago, I started my blog in plain HTML, then gradually tried to make it look better and more modern-ish. It has been 2 weeks so far and I've never liked how my website looked only until today.

Checkout my website if you want to see how it looks first.

2 weeks was too long...

2 weeks ago, if anyone said to me that it's going to take 2 weeks to make a blog look good, I'd definitely say back "It's way too long man, it shouldn't take that long!". And yeah, it took me 2 weeks and I've been saying that to myself every single day in the last 2 weeks. It didn't feel good at all, it felt like years.

So what's wrong?

It always "looks" better in my imagination

When I first talked to myself that I'm going to make my website look better, I could immediately have an imagination inside my head about how it were going to look amazing and how easy it were to implement it - just put some CSS and that's it.

The problem with my imagination was that things looked good because I believed they were gonna look good, not because every single detail in it actually looked good. There were no detail in my imagination, literally zero detail.

(Try this yourself, remember the last time that you imagined you were going to make something beautiful, try to go into details of that "beautiful" thingy and see if you know what every single detail really looked like)

When I started to sit down and write some code, I had to face the details that never existed in my mind. There was no surprise, I had no idea how each element should look, especially when sitting next to each other. I ended up just trying lots of different combinations and they all just looked bad!

Looking for inspiration

Being stuck and feeling like I'm the worst developer in the world, I decided to look for some inspiration and then maybe just copy-paste to save my life.

Then, I realized that my imagination was really just the style of how I want my website to look. I ended up with the following list:

• Vercel
• Next.js
• Tanica Rascia
• Lee Robinson

These websites roughly describe my imagination.

The trap of inspiration

Having an inspiration helped to sharpen the details of my imagination, like a button, a paragraph, a title, or a form.

I thought that I were going to make it this time but I fell into another trap:

I don't want my website to look exactly the same as any of these websites, but it should look similar.

So, I put pieces from this and pieces from that into my website, and guess what, my website became a mess.

F*ck! It was all because of these websites, I shouldn't use in the first place, I should have come up with my design system.

(LoL, I'm laughing at myself writing this now, my thinking process was just so weird)

A way out

You may have thought that I was just kidding about dropping the inspiration sites, but I actually did it. However, I didn't start any design system, it was just an overkill doing so, and you've probably realized that there's no way I could build a design system myself now.

What I did was just to think about my website's design systematically. What it means is to start with the layout first, what sections my site should have, then
what content each section should display, and why. Then for each section, I implement it separately, if a section is too big, I break it down into multiple elements again and repeat the same process. The key point of this method is to not allow you to overthink about the details, just imagine the site as a set of black boxes and your design job is to put these black boxes together, you'll go into each box later. Once you've done, you don't go back.

Alright, that's it, there are more specific knowledge into building the actual site, but it was late now and I wanted to focus on the design part in this article. Hope you enjoy the story and learn something from it!