I taught myself web design and designed my dream website using Webflow. Here was my process...
Jan Demiralp
25 replies
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-design-070d2f.webflow.io/
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
Replies
André J@sentry_co
Its nice. But still hard to figure out what the USP is. Most users use a website to figure out if it's for them or not. I would focus more on how the products works for me as a user rather than how wonderful my life will be if I get this. I will decide the last part my self, and I think a lot of other users will too. I think the third iteration of this will be amazing :D The pressure is on!
Share
The Life Compass
@eonpilot Thanks for the feedback and I get where you're coming from. I feel my website is stuck in-between two worlds which I'm trying to bridge. I have a product I'm offering - the Life Compass - and I also run a community focused on self-development + life design. The challenge has been to communicate the philosophy and soul of what I'm doing without sounding cliché or preachy
@jandemiralp I agree with that. Websites are between two poles. why and how. I think the most powerful website tell the why through the how. Weaker websites try to tell the why. And hide the how. It's a very interesting problem to solve. And I think it's mostly down to pure hardcore thinking. superhuman(dot)com for instance was a why website in the beginning. But very well done. The founder thought about that website for months before knowing exactly how it would look to tell people about his very opinionated product that wasn't for everyone. Anyho. You did a pretty gd job. Definitely feel it has soul! One day I will make the leap to web flow my self. But as a dev im still in love with the purity of baritone css and html 😬
Thanks for sharing the process. Weblow's learning curve was a bit steep for me too.
The Life Compass
@abhilash_chowdhary I feel you. The beginning was tough for me as well. My advice would be to buy a Webflow template and then proceed to deconstruct it to figure out how it works and then rebuild it in your own style. That's what I did and it really sped things up for me
Looks very confident and stylish, great job. Now site builders really simplify the creation of a site, but more often than not, this also requires a lot of knowledge and skills, especially the basics of design. For businesses, it is often easier to hire an agency like https://crearesiteromania.ro/ to get a good result like yours
Thx for the advise. I'll do my best to get good at Webflow
I like your product 👌
The Life Compass
@your_price_booking Thanks! I'm in the process of creating YouTube videos to explain how to use it. Here's the first one in case you're interested: https://youtu.be/wcCFKsRLXb0
@your_price_booking I liked your products. http://zeenee.co.uk/
@noah_willliam High Quality Aluminium & UPVC Solution For Your Homes - Is it your bussines?
Care to collaborate
The Life Compass
@k_deboskie What are you currently working on?
That sounds great. You did a great job. After reading this, I'm also thinking to design my website https://apkcalm.com/ using Webflow. Thank you so much for all the guidance on the process. I was looking for a post like this.
The Life Compass
@aima56 I'm so glad it inspired you! I'm sure you could do some really cool things with your site using Webflow. Here's a website of a game development studio which has a really cool design which may inspire you: https://freelives.net/games/
The focus is a little different from your website but I believe there's some overlap. Let me know what you think :)
Very cool idea! The final website was a huge improvement from the first, awesome job. I'm currently building an app around mindfulness and habit formation, so it's nice seeing other products around self-care and life purpose.
Just to let you know, it says "video unavailable" when I clicked on the first video under the 'Courses' page.
Beautiful site, Jan!
That's fantastic! Congratulations on teaching yourself web design and designing your dream website using Webflow. Webflow is a powerful tool that allows you to create professional-looking websites without needing to write code. It offers a visual interface that simplifies the design and development process.
Designing your own website can be a rewarding experience. It gives you the opportunity to express your creativity and showcase your skills. Whether it's for personal use, a portfolio, or a business website, having a well-designed online presence can make a significant impact.
Can you suggest me how can i improve this site https://nationalday.blog/
I like the result of the work you did. After all, web design is of enormous importance these days. It often happens that a visitor closes the tab and returns to the search again without even reading the content, because its design made a negative impression on him, which is why he decided not to even waste time on further viewing the resource. You can find more information about responsive design examples here.
Crafting a launch strategy for Product Hunt requires a blend of preparation, timing, and engagement to maximize reach and impact. Here's a breakdown of a launch schedule strategy that could have the best reach on Product Hunt:
Pre-launch Preparation (1-2 Weeks Before):
Identify your target audience on Product Hunt. Understand what types of products they resonate with and what features they value.
Build anticipation by teasing your product on social media, your website, or your email list. Offer exclusive sneak peeks or early access to generate excitement.
Prepare your Product Hunt submission carefully. Craft a compelling title, a clear description, and select captivating images or videos that showcase your product's key features and benefits. You may check at https://schoolcalendarsinfo.com/
Crafting a launch strategy for Product Hunt requires a blend of preparation, timing, and engagement to maximize reach and impact. Here's a breakdown of a launch schedule strategy that could have the best reach on Product Hunt:
Pre-launch Preparation (1-2 Weeks Before):
Identify your target audience on Product Hunt. Understand what types of products they resonate with and what features they value.
Build anticipation by teasing your product on social media, your website, or your email list. Offer exclusive sneak peeks or early access to generate excitement.
Prepare your Product Hunt submission carefully. Craft a compelling title, a clear description, and select captivating images or videos that showcase your product's key features and benefits.
Source: https://shorturl.at/gGT26