I never wanted a boring template-based website. I looked online at the sea of Squarespace-inspired websites with similar layouts, colour palettes, and predictable designs. So, I took it upon myself to build something better.

This was rather ambitious seeing as I had very basic web design skills. I had only really played around in Wix and basic HTML up until this point. But, I was hearing good things about drag-and-drop web design tools like Webflow and Elementor.

So, I signed up for Webflow and fumbled my way through the process of creating my website.

STEP 1: Figure out what I am going to build.

At this point, I went into Figma and began outlining the website using wireframes. I didn't really know what I was doing so I watched some YouTube videos of other people using Figma to design websites. Through trial and error, I drafted the website outline for the home page, and now it was time to build!

STEP 2: Build the home page

Now, a big challenge I came up against here was translating the design I had in Figma into a responsive website. I spent hours trying to figure out the various elements and how to make the site responsive for mobile. I eventually built something I was happy with and I was feeling good about myself.

STEP 3: Build the rest of the site

Once the home page was done I gradually started building the other pages. This took an inordinate amount of time because I ended up constantly revisiting my old designs and changing them. My process looked somewhat like this:

Design in Figma > Start building in Webflow > Deviate from the design > Go freestyle > Get in trouble > Scrap most of what I had built > Go back to designing in Figma [REPEAT]

STEP 4: Marvel at the finished website

After a LOT of time and MANY iterations, I finally got to the point where I was happy with the website. I had chosen the perfect font, the colour scheme was on point and the design was looking great. After months of developing, I stepped away feeling a sense of pride.

STEP 5: Scrap the whole thing and start again

Upon looking back at my website I realised that I had overlooked one thing. The core content. I had designed a beautiful art project with nice animations and cool interactions, but I realised that the story I was trying to tell was getting lost. So, with a heavy heart, I decided to pull the plug on the site and start again. Except, this time I was bringing all the lessons I had learned from my previous project into this one!

CONCLUSION: No regrets

In the end, some may say that my first website was a failure. But I would say it was a stepping stone. It was thanks to my first website that I was able to up-skill so rapidly in web design. No way on earth would I have gained the same skills by watching videos of other people building websites. It was thanks to this period of experimentation that I was able to bring these skills into developing my new website.

And now... Time for the grand reveal!

The original website: https://inner-compass-life-desig... The final website: https://www.innercompass.academy/

Let me know what you think and feel free to ask any questions, or share your own stories.

Jan