I used to dread the question: “Can you show me the website you’re most proud of?” There was always this gap between my designs and the final websites.
I tried working with developers – but they never really got it, and hated implementing the final touches and pixel perfect corrections. I tried every website builder – Muse, Wix, Squarespace and WP templates but was frustrated working within templates without my total creative freedom.
Then a few years ago, I discovered Webflow. After my first run with it my actual reaction was: OMG. Here’s finally the tool to really empower designers to create amazing websites without writing code (but also without being depended on templates or simplified components). Fast forward 4 years later – I’m building websites start to finish in a matter of hours, having happy clients pay 4-5 figures for a Website, and teaching other designers how to quickly master Webflow as well.
In this article I want to cover:
- What’s the difference between Webflow and other website builders.
- Why understanding code makes you a powerful designer (even if you don’t know how to write it).
- How using Webflow makes you 10x faster than even a great developer (tested!).
- How to learn and master Webflow fast and efficiently.
What’s the difference between Webflow and other website builders
Most website builder were built for “dummies” – meaning people who don’t know or understand web code, and just want to drag and drop elements on to a canvas.
Everybody loves simple stuff right? YES! but..
The tradeoff of simplicity is power & control. When website builders like Wix / Squarespace allow you to modify pre-built elements you can only do it in the simple way they configured it for you. The end result is that 90% of websites all look the same, since they are all using the same templated elements.
As times goes by, these types of templated websites have become a commodity – why would a client pay you for a simple website he can actually built himself?
The future of quality web design is in custom design.
And how’s Webflow different?
Webflow is NOT a simple drag and drop designer. Webflow is a visual way to code. What that means is you are building using web elements like DIV / Link blocks or H1 (it’s ok if that means nothing to you at all right now), but instead of writing lines of code – you actually use a UI pretty similar to your design software to generate clean semantic code.
Here’s another metaphor for you: instead of writing your book using an old typewriter, you just use a text-to-speech on your phone and ba-bam! you don’t have to learn how to type, but you get your book written + automatic spellcheck!
The end result is this – you get to control every aspect of your design, interactions and animations yourself, with total creative freedom, do it fast and efficiently, and without being depended on a super expensive developer (better design + extra profit anyone?)
Why understanding code makes you a powerful designer
I know I must have lost quite a few of you when I mentioned stuff like DIV or H1.
But let me ask you this – Would you be able to be a good book designer without knowing how your book is going printed? without understanding the different between digital print and offset print? how the pages are going to be cropped (and that you need to add bleed), without knowing how the book is going to be binded?
My belief is that a good designer understand the format they’re designing for.
If you want to design for the web, you must understand how the web works, how the web is built, what is HTML or CSS. You must know your limitation so that you can be creative within them.
Note that I didn’t say you must know how to actually write CSS or bind books yourself. But understanding the frameworks you’re working around is important.
True, to make the best of Webflow you need to stop being a “dummy” and start understanding how the web works. I claim this will make you a better designer.
How using Webflow makes you 10x faster than even a great developer
I have lots of developer friends. I love them. I don’t think that coding is going away in time soon, on the contrary.
That being said – some tools makes some process obsolete and unnecessary.
When I started as a designer 20 years ago, I used to use Photoshop’s “Calculations” function to separate elements from a photo’s background (especially hair). It used to be a slow and painstaking process, but there was actually an art to it. I used to enjoy making a perfect cut, even if it would take me an hour.
Today Photoshop’s quick selection tool got so good at selecting hair, that there’s just no use for me to waste an hour going through my old-school artistic process. It’s just a waste of time.
Same is true for about 90-95% of web design. Yes, a developer can write 5,000 likes of code to build it, but I can use Webflow and using a modern UI, write the same lines of code 10x faster, and trust me, I tested this with many unconvinced developers. Some turned Webflow believers, some not, but that’s honestly beyond me.
How to learn and master Webflow fast and efficiently
I have spend the last 4 years working almost daily with Webflow, and I have to admit, it took me a bit of time to understand how to use it efficiently.
As I’m a big believer and would love for you to give it a try, I’ve create a free web class where I’m sharing how I’m using Webflow and my 3 biggest tips for making the best out of it, you’re welcome to register here – Register For A Free Web Class.
Full Disclosure: This article is sponsored by Ran Segall.