Streaming live at 10am (PST)

14 mistakes Webflow beginners make

In the last 5 years, I’ve helped hundreds of designers improve their Webflow websites. And I keep seeing the same mistakes over and over again. So here are the 14 most frequent Webflow mistakes I see and how to fix them.

Using Webflow columns
You might think Webflow columns are a great thing. They’re not. They’re terrible. Making them responsive is really painful. So instead, just use a flexbox, and make your life easier.

Not compressing images
Most beginners forget to compress and resize their images. As a rule of thumb, you should aim to have images that are not heavier than 200 kilobytes. Use free online tools like tinyjpg to reduce the weight of your assets. This will help your website load faster and therefore rank higher on search engines.

Using classes in different contexts
Beginners often forget that one class can be used in multiple places. So they make changes here and it messes up the design there. The best way to fix this is to design a style guide at the beginning of a project and stick to it. That’s it.

Texts that are too large
Try to never have more than 12 words per line, just like in books. Don’t put text in containers that are too wide, people won’t read it. Put a max width of, say, 700 pixels and increase line spacing. THEN, your visitors will actually read what you write.


Starting the web design process straight in Webflow
Too many designers jump straight into Webflow when they start a new website. Big mistake! Webflow is not made to design websites, it’s made to implement them . Start by thinking about your content first. Add steps to your process to actually save time along the way.

Not enough margins between sections
To avoid overwhelming your visitor with too much information at once, add plenty of margins between each section. Your design will look immediately better. Start with too much margins, say 200px and then remove some if needed. The best websites leave plenty of space to make their content stand out more. Read more about cognitive overload to understand why our brains love spacing.

Having too many classes unorganized
If you have thousands of classes for the same type of element, making changes afterward will be hell. Instead of treating every element as unique, try to style items with parent elements instead. Learn more about combo classes and spend extra time thinking about how you name and re-use your classes. It will be worth it in the long run.

Not styling icons
Adding icons is great to help your visitor navigate your website and find relevant information. But these icons have to be on-brand, and they shouldn’t divert the attention away from the content. The image tracer plugin in Figma lets you convert an icon from raster to vector, which you can then edit easily. You should design your own icons so they fit your overall brand.

Positioning child instead of parent elements
When designers come from other design tools, they’re used to position things by just dragging elements around. That doesn’t work on Webflow. Instead of positioning all elements one by one, with padding and margins and relative and absolute changes, just use CSS grids and flexboxes. Put everything in flexbox and position elements that way. Go learn more about the box model. And do the Flexbox game!

Duplicating pages instead of using the CMS
If you’re duplicating a page more than two times, you’d benefit from setting up a CMS collection instead. And beginners tend to avoid using the CMS, but it’s super simple to set up. It will be more effort upfront, but it will clearly pay off afterward: you won’t have to duplicate and design everything again.

Not customizing the default form states
Not designing success, empty or error states is a missed opportunity to delight and help your visitors. We tend to forget them, but these states are crucial in your user experience. They have to be on brand. So go on and add nice and helpful messages in them! They’ll help your website stand out.

Designing the mobile view first
Don’t start your project in the mobile view - otherwise you’ll have to style those elements again from mobile to desktop. When you’re going downstream from desktop TO mobile -and you’re using flexboxes and grids, making your website responsive is actually a very fast process. Just start designing on desktop THEN move to tablet THEN move to horizontal THEN move to vertical mobile.

Sharing Webflow account access
Don’t give access of your Webflow account to your clients or collaborators. If they want to make changes or give feedback, they should have done that on the mockup, not in Webflow. So use the editor and collaborators feature instead. It’s just better if there is only one person allowed to make structural changes - a project leader - to avoid having a frankestein project.

Not using the backup feature
Beginners and pros make mistakes in Webflow all the time. It happens to everyone. But pros use the backup feature to rewind and work in short iterations. So use the backup feature and stop being afraid of breaking everything every time you make a change.

‍Of course, these are more “areas of improvement” than real mistakes! I talk about other ones in a Youtube video. Looking forward hear what other mistakes you see too!

9 Likes

Why not have the full transcript here? Isn’t the point of this post to help new designers?

You’re right, just added everything :white_check_mark:

You can still have a video that goes into further detail in each point, but there’s a lot of users that prefer reading rather than sitting through a video.

Cheers

Great read!

As a designer new to webflow - I think the hardest part is understanding the best strategy for layout. Am trying to figure out how to layout things like for example having a background rectangle onto which an image is placed (offset from rectangle) and then laying out CMS information in quadrants over that image. It’s almost like I’m playing around with strategy - size parent? size kid? if size kid, then where do I put maximum size of kid? do I use relative on text? are quadrants best modelled with 4 divs? or a grid?

If you have tips or a video on what will help me figure this out (practical experience) it would be great!

1 Like

Definitely check out the webflow university, they cover all of this in simple little videos. They recently released a series on creating a portfolio site starting from scratch, I find it’s pretty helpful for those starting out.

Very useful!, Thank you. About shrinking jpegs, wouldn’t it would be genius to have such a compression tool built-in! I have used them for ad requirements with a lot of success. Any thoughts about retroactively shrinking images? I have so many that it is daunting. Thanks!

Take a look at this if you need to compress https://www.optily.co/

Note, backups don’t work well in free mode. You can only restore a small window of changes.
Before going mad maybe duplicate your site.