‍First, what is Webflow?

If you’re not familiar — Webflow is a no-code, visual website builder. That means you can design, build and bring your websites to life — without needing to learn or write code.

Who’s Webflow for?

It’s built for designers and developers. But also used by marketers, product managers, startup founders and more. More established tech companies are adopting Webflow too, like Lattice, Zendesk and Upwork.

Webflow is way beyond a template-based, drag-and-drop site builder. It gives you complete freedom to build pages and layouts exactly as you envisage. In Webflow’s words: “If you can design it, you can build it in Webflow”.

My journey with Webflow

About 2 years ago I decided to dive into the world of Webflow. At the time I was using Semplice for my design portfolio — but felt restricted with what it could do. So my first project was to move my portfolio from Semplice to Webflow. Where I learned a lot of what I now know.

Becoming a better designer

Learning Webflow was one of the best decisions I made. It’s already opened up many opportunities for me as a designer. Whilst helping to widen and deepen my skillset.

It’s so empowering being able to build your ideas and side projects. Not just putting together a clickable prototype that feels real. But building a real thing on the internet.

1. It’s not like Squarespace or Wix

Yeah, Webflow is a WYSIWYG (what you see is what you get) editor — but it’s not a drag and drop type interface like Squarespace or Wix. In Squarespace you start with a template, drag in some blocks, change the content and you’re good to go.

Blank canvas freedom

In Webflow you start with a blank canvas. Building out the styles, and reusable components you need from there. Like you would in your favourite design tool. Some will see this as a negative — but really, it’s where Webflow comes into its own. So much power and flexibility.

Though to set expectations — for designers, Webflow can be pretty technical. But so is the web.

2. Start with Webflow University

Webflow’s education content is top-tier. Some of the best I’ve seen from any company.

They have a load of video courses to get you up to speed with their product. And fast.

Spending an hour or two going through their videos will pay generous dividends. It will save you a lot of time down the line — and help you avoid the challenges I faced learning Webflow. The Webflow 101 crash course is a perfect place for beginners to start.

3. Get your head around default styles

Most elements in Webflow come with default-set styles baked in. Things like heading tags, paragraphs, blockquotes, and ordered/unordered lists. Default styles have pink tags in the style panel — and classes have blue tags.

Helping you to manage default styles

The best way to manage these styles is to create a separate style guide page. There you can cover all default styles and the custom styles you’ve created. Your colours, typography, buttons, and any global classes you might have defined.

This makes global style changes super speedy. Change a heading style property or a colour value once, will flow through to each element with that class.

4. Keep your classes nice and tidy

Classes in HTML let you reuse styles across different elements. Classes are fundamental to styling in Webflow. Just like classes are fundamental to styling in web development.

In Webflow they’re super easy to set up. So easy, that any time you style any element, there’ll be a class added. That’s the word of warning.

Conclusion

Webflow is a powerful tool. But it can take a little while to get to grips with. Hopefully the tips I’ve covered make your journey a little bit more straightforward.