There are so many areas to work through when it comes to website design. Some of those are the following: the overall design, user experience, copy, mobile layout, etc. Let’s not forget all of the various tools, plugins, and software options out there to choose from to build websites. Fortunately, there is a great tool out there that helps you quickly design impressive, responsive websites, even if you do not know how to code: Webflow.
At first glance, Webflow seemed just as intimidating as learning CSS, HTML, or Javascript. But after spending some time with it, you get familiar with it. The more you use it, the easier it becomes to build a website, despite your background in coding. Webflow truly stands out from other site builders, and in this blog, we will explain how it does it.
It is important to note that Webflow does not work like Squarespace or Wix, but that is what makes it different and simpler. Website builders like Squarespace and Wix follow a template-based approach that makes it easy to quickly pick a template, drop some content, and publish a website. Yet, customizing these templates can be very difficult if you do not have extensive coding knowledge. Webflow, on the other hand, allows you to start with a blank canvas and truly embrace creative freedom. You can also start with a template and fully customize it to your liking without having to write a single line of code.
4 Best Practices for Webflow
In this section, we will cover some of the best practices for Webflow design.
1. Understanding HTML + CSS will make everything more effortless
Although you never have to write any code at all when working with Webflow, understanding HTML and CSS will greatly lower the learning curve. Webflow sites are built by using basic HTML building blocks like sections, divs, and headings. These are styled using a visual editor that mimics the way CSS works. To properly layout your design, you need to understand how each of these HTML building blocks behaves. These are some examples of important principles to understand.
First of all, a div is a block-level element which means that it always starts on a new line and takes up the full width available. A Margin is a space around an element while padding is the space between an element and the content inside it.
These are just two examples from a list of principles that you need to understand when using Webflow. Without this basic understanding, you might become frustrated when you drop a div into your canvas and it does not sit side-by-side with another element. Thus, it is highly recommendable to take a basic introductory course in HTML and CSS before diving into this platform.
2. Custom Content Types Made Straightforward
Webflow has a Content Management System (CMS) that enables you to make custom content types painlessly. To style the item page, we work with what Webflow calls Collection Pages. Think of them as templates for recurring pieces of content. So in this case, all the situations would share a similar page layout.
Once the page has the look and it feels it is what you wanted it to be, you can hit publish and add the rest of the content in the backend. With Webflow’s CMS, you can create a new page for your products without ever having to change the page design settings.
3. Hack Page Layouts with Symbols
In most cases with page builders, you have to build each page individually, creating some pretty tedious work. Where page builders fall short, Webflow nails it. The site embraces CSS classes so you can create symbols to be used repeatedly throughout your website. You can save your symbols in your preferred menu, and carry all edits throughout all of your symbols instantly.
Here is a useful thing that you should listen to. As you reuse pieces and parts of the site grid pretty often, instead of copying and pasting the elements, you can save them as symbols. It automatically saves each piece in your menu, and it is ready to be dragged into the artboard. Then, you can disassociate it from the symbol since each piece would have its content.
4. Interactions and Animations
Webflow has a visual interface to help you create very awesome interactions, again, without ever having to write a single line of code. You can create interactions that are based on scroll, click, hover, and page load. The possibilities are endless. With just a few clicks, you can very effortlessly add a parallax effect to your website.
Nowadays, anyone can create animations inside Adobe After Effects and easily add them to their website by using Lottie. You do not need to write any complex javascript code, you simply use the body moving plugin to export your AE animation as a JSON file.
Once you are in Webflow, you just need to add a Lottie element and upload your JSON file. Upon adding it to your website, you can either just let it loop or you can control these using the site's interactions to have them animate on scroll, or click, for instance.
If you are not familiar with Adobe After Effects, Lottie provides a bunch of free animations that you can just download and use. You are even able to edit any of the layer colors right within their website.
Final Thoughts
Now that you know how to use Webflow in a way that gives you an advantage over your competitors in the market, it is only a matter of you applying it and seeing what happens with your designs. Chances are that Webflow will help you build a better and more successful career in design.
