Webflow 101

Front-end development. Three words that unsettle any designer. Have no fear though, as there is a design software that finally makes learning web development easily digestible and will have you developing full scale websites in no time. 

Launched in 2013, Webflow is one of the most innovative user interface design softwares offered. Powered via SaaS, Webflow is a design software that allows designers to develop the visual elements of the website that are coded simultaneously. This design process allows designers to work more efficiently as the website is ready to launch once they have completed the design. While Webflow does require some knowledge of front-end development, the program’s intuitive interface and countless online tutorials help to make the learning curve feasible and achievable. Webflow is also a fantastic option for designers looking to enhance their abilities and understanding of front end development and how it relates to UX and UI design. This knowledge is extremely valuable as it will help designers to better understand the limitations of front-end development which in turn will make for more efficient and effective iterating in the future design projects.

‍

‍

The benefits of Webflow simultaneously coding as the designer creates are enormous and if learned correctly, can help take a designers ability to the next level. The most significant benefit is that designers get to see how their designs look in HTML, CSS and Javascript in real time. This feature is extremely useful as it allows designers to create within the constraints of how the website will be displayed in code. While this may also seem limiting, it can be extremely beneficial as it will help designers to create a more efficient and effective design process. By creating more interfaces in Webflow, designers will have a better understanding of user flows and designs from a front-end perspective. This is largely due to how the design process works in Webflow. 

When designing in Webflow, designers must nest and contain all elements within a series of sections. From there, designers must contain their elements within a div block which can be formatted in a number of ways (column, grid, etc.). Once these elements are applied, designers can tweak the layouts of their designs by modifying the spacing and padding between elements.

While this design process may seem overwhelming or daunting at first, learning how to design in Webflow will help designers to better understand what is feasible within the constraints of code. This in turn can help designers to communicate more effectively with front-end developers in the future when working on projects outside of Webflow. Most importantly, this knowledge helps to create a well rounded skill set that can lead to more fulfilling and valuable opportunities within the design world.

Webflow also hosts several other valuable features. A great example of one of these features is Webflow’s ability to automatically generate designs and their content for other breakpoints. This is a feature that is extremely helpful when it comes to creating a more efficient and effective design process. For example, if a designer creates a homepage with a desktop breakpoint, that design will then be automatically applied to tablet, mobile landscape and mobile portrait breakpoints. From there, the designer can adjust the spacing, padding and margins at each breakpoint to ensure that they all scale accordingly. 

Another fantastic feature is Webflow’s CMS. CMS (Content Management System) is an application that organizes and stores content, allowing anyone with access to manage, edit and publish the given content. This is a great feature when working with stakeholders as it gives them the ability to easily access and update content once the design process is completed. 

CMS also helps to streamline pages across the web design as designers can easily enable the stored content across varying sections on different pages. For example, if a designer were to create a CMS for employees within an organization, they may add an employee picture, their name, title and a short bio. When they go to apply this content to the design, they may only want to display their name, title and picture nested within a section on the homepage. However, they may also want to display all of these elements plus the bio in another section on the About Page. Utilizing the power of Webflow’s CMS, designers can modify the content that appears from the CMS from page to page while still maintaining a cohesive and symmetrical flow for the overall CMS content. 

In comparison to other design softwares, Webflow certainly has more constraints in terms of rapid iteration and design freedom. However, as discussed above, these constraints are also very valuable as they help designers to become more efficient and effective in their design process as they will have a better understanding of the limitations of code. 

Overall, Webflow is an enormously valuable tool for designers to learn if they want to enhance their design skill set and understanding of front-end development.