You made it to the footer 👋
To get new article update & cool design tingz I find, subscribe by taking 4 seconds to type down your email:
Experienced bloggers often tell beginners to not spend hours on their blog design. And for good reasons: Content is more important.
Yet, as a designer, I struggled with this. I dislike templates, and I want full control over my site. I want to know every single detail of it.
The margin, max-width, hover state, grid system, typography. Everything.
So, after long hours of grinding, I have created a blog design that, for now, I’m satisfied with. It’s not perfect, but I’m improving it.
In this post, I want to share how I built this blog, what tools I use to pull it together, and the problems I had to solve to get everything working.
This site is not some development masterpiece. Compared to Brian Lovin’s website, the development of this blog is nowhere near that.
I simply want to document the blog’s current version.
This was the first version of my blog.
As you can tell, I used a template. And yes, it did look clean and minimalistic. But, I didn’t like it. It lacked a personality, so I decided to revamp the site.
I delved into Figma to experiment with different blog designs. In the end, I settled on a few design principles and elements.
I wanted the site to be modern with a techie touch. Hence the font Sora and the white background.
There’s something beautiful about filled buttons as hover state and Notion tags. I wanted to add those to my blog.
If I were to use image thumbnails, I need to make sure they all look cohesive and nice together.
I used Webflow to create the blog. It’s my go-to development tool as a designer. It gives me full design customization and a powerful CMS system to organize my blog posts and categories.
I will share the specifics of each page on this blog.
At this point, I can’t count how many iterations I’ve made on Webflow. But the biggest design change I made was on the home page.
At first, I designed a home page that displays the “text” of each blog post: Title, publish date, categories, and a description.
But, after discovering Hashnode’s Web3 blog, Maray.ai, and Peter Tarka’s work, I decided to change the home page by:
A good visual can be a game-changer. It increases the odds of a visitor clicking on a post. I intend to use single block color as the background and a 3D element on top for cohesiveness.
I structured the blog posts using a two-column grid system instead of three to make it easy on the eye.
I figured that a good title should be enough to grab a visitor’s attention. Also adding a description means the visitor will have to scroll more to see the next posts.
In the end, I’m satisfied with the design changes as it makes the site more lively. Here are some specific design elements:
I set the width to 80% to have two posts in one row.
I set the tag’s padding to 4px 12px to create a Notion-like tag. Each will link to its category page.
I changed the footer on the home page to two columns because the container’s wide length makes the text hard to read.
I followed this tutorial on how to create this effect.
This was the least changed page on the site. Here are some design elements:
I went with 55% for all the other pages to improve readability. According to research, the optimal line length is considered to be 50-60 characters per line. So I aimed for that.
This is my default highlight styling for all links. I bolded and underlined the text to provide enough contrast.
I wanted to create a space for visitors to see all the categories. I stored the categories in a CMS database. I can be select them when writing a blog post.
This is a CMS Collection page that displays all posts with a specific tag. This helps the visitor easily find articles they’re interested in.
I found this on David Perell’s blog and love the idea. It’s a great way to share and organize what I consume online.
I store all my blog posts in a CMS database.
Here are some other design elements:
I use this to display my article content. A hidden style guide page sets the style for the rich text field. For instance, I changed the H4 styling to the “Read Next” header you see below.
I followed this post on Webflow's forum to create the fixed sidebar nav.
Located at the bottom of the article, “Read Next” shows three relevant articles. Any of the three articles will have the same category as the current blog post.
I embedded a ShareThis button into my blog post.
This was a hard choice as I was debating between Mailchimp, Substack, and MailerLite.
In the end, I went with Substack for a few reasons:
This was the main reason. Substack is completely free regardless of the number of subscribers. If you add paid subscriptions, it’ll charge 10% on top of a credit card fee charged by Stripe. But that’s acceptable compared to Mailchimp and MailerLite’s pricing plan.
I’ve always been a fan of Substack’s innate newsletter style, so this was a no-brainer.
Though Mailchimp’s free plan allows users to have up to 2,000 contacts, I can’t automate welcome emails. In Substack, this is simple. Check a checkbox, edit the welcome email, and Substack will send it for you automatically.
MailerLite currently does not have an integration system with Webflow. And both Substack and Mailchimp have one.
I use Google Analytics to track my blog’s performance. I’m new to GA so will need some time to get used to it.
Webflow Hosting - $19/yr - I’m on the CMS plan. And because I’m a college student, I applied for the student discount and got a 90% discount (192/yr to 19/year). Huge steal.
Domain - $18.54/yr - For letsguo.com I paid $8.99 for the .com register and 8.99 more for domain privacy + protection. With sales tax, it adds up to $18.54.
Total: $37.54/yr.
This is the first time I put these numbers together. Honestly, I’m very happy with this cost. The Webflow student discount helped out a lot.
Here are a few things I’d like to work on next:
For some reason, the sidebar nav in an individual blog post doesn’t always work well. Might have to look into it in the future.
I’ll only do this when I have lots of time. But it’ll be nice to create my 3D assets to use for post thumbnails.
To be honest, I’ve poured a considerable amount of time into the blog design. So, as I complete the designs soon, I’ll start pushing out content consistently on this blog and Substack. Also, I will start distribution to gain traction (LinkedIn posts, Reddit, Medium publication, and more).
Anyways, this will be a long journey. There’s a lot to learn, but I’m excited about how this blog will grow.
Thank you for being awesome and reading this far! :)If you have any questions, feel free to reach out on LinkedIn or by email. Will love to set up a casual call and chat!