From Squarespace to Webflow in 3 weeks

A short breakdown of how I went about moving my personal website from Squarespace to Webflow.

You can see my personal website here.

Why leave Squarespace?

• Very little customization is possible from a design perspective
• Adjusting spacing between elements is difficult because of lack of control (I had to use "spacers" which were so hard to replicate for every blog post)
• Their support is pretty bad
  -I wasn't inspired to blog a lot because I didn't feel that my website was unique and represented my personal brand

Why Webflow?

I had played around with Webflow earlier this year for a landing page and gave up after getting overwhelmed. I switched to Carrd for landing pages because it was easier.

But when it came to my personal website, I couldn't use Carrd because I needed a blog. I wanted to challenge myself so I decided to give Webflow another shot, after hearing so many good things about it. Plus, I just joined Launch MBA and needed a good first project to start with.

A large reason why I picked Webflow was the fact that Webflow itself has a lot of detailed tutorials on YouTube, as well as a lot of other people doing tutorials for it on YouTube. I knew I had resources if I got stuck.

A Phased Approach

I took a phased approach to re-designing my personal website in Webflow. The first cut of my personal website includes:

• Home page w/ intro
  -Blog
  -Projects page
  -Newsletter sign-up page
  -Social links

Now that the first cut is done, I plan to add the following to my website over time:

• References to podcasts I've been on
• My work history
• My personal history (I'm originally Croatian but grew up in Japan/Hong Kong before moving to Canada)
• My philosophy (around life, around work, combo of curated articles and some of my thoughts and mental models)
• Cool animations or design pieces to make my website even more unique (this is really where Webflow comes in)

Project Duration

It took me about 3 weeks to redesign my website in Webflow, while working on a few other things.

Choosing A Template

I thought about paying for a nice template but instead, I ended up using their "Portfolio" preset template. I wanted to build out my blog from scratch to learn Webflow and create a lot of my other pages from scratch to challenge myself.

Pricing

I got a site plan with hosting and paid USD$192 for it for the year. Squarespace w/ hosting was USD$144 per year so paying a little more for Webflow was worth it in my opinion.

Learning Curve

I started watching the Webflow 101 Crash Course but didn't end up finishing it. Instead, I watched tutorials based on what I was trying to do. This worked out really well for me. E.g. if I wanted to add a form, I watched a tutorial on forms.

Look & Feel

I initially started creating a fancy color-themed website using a deep red color. But as I look at other personal websites for inspiration, I noticed a lot of them were very simple (black & white with very minimal color for some headings or subheadings) - e.g. tr.af, janlosert.com, preetamnath.com. So I decided to make mine very minimalistic too.

Projects Page

I initially wanted to include images of the landing pages of all my projects, but it didn't end up looking really nice because each landing page was very different. Instead, I decided to represent each project with an illustration. I liked the idea of keeping the projects a little bit abstract too:

My Projects Page

Font selection

I wanted to use different fonts for the headings and the body text, but I'm not a designer and have no clue how to combine different fonts. I also read somewhere that using multiple fonts slows down a website so I used that as an excuse just to import a new Google font into Webflow called Krub.

The process to import a new Google font was SO EASY. Literally took 2 minutes using this tutorial.

Graphics

I used Canva for all my graphics, specifically the SVG format because it makes the image a lot clearer than a .png file. However, note that for Open Graph Settings (includes the share image), you can't use an .svg format, only .png.

Transferring Custom Domain From Squarespace to GoDaddy

The transfer of my custom domain from Squarespace to GoDaddy was quite painless (I followed these instructions). It took about 5 business days for the domain to transfer and there was no way to speed that up with Squarespace.

The Hardest Part

The hardest part of this whole process was designing the website. Deciding on a minimalist design honestly saved me. Had I incorporated more colors, it would have taken me forever to make everything work. Even without a lot of color, deciding how to align the elements and then making them responsive across all the different device sizes was a lot of work.

That's about it! My new website is now live and I'm super excited to start blogging on it more and building it up over time.

I hope this is helpful for others who are either also moving their website from Squarespace to Webflow, or just generally designing a new website in Webflow.