September 6, 2017 The Power of Webflow for Designers

Webflow is a new design and development tool that gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you. It allows you to design and develop at the same time, with minimal effort. But the true power of Webflow lies in its ability to go beyond the basics and create complex interactions, unique layouts, and populate sites with dynamic content — all visually and quickly.

Assisting in your journey to full stack designer

Here are just four ways Webflow can help you on your way to becoming a full stack designer:

• It can help a designer learn how front-end code is built in a visual way.
• It can transform flat design files into fully functional websites.
• While using Webflow, designers can start to understand the development process and overall structure of HTML/CSS. This allows them to start to design with development and the end result in mind at the beginning of the process, rather than the developer having to making compromises or edits during the development phase based on what is and isn’t possible.
• It provides the ability to create quick prototypes to explore functionality and/or layouts for specific pages or specific features.

How do I get started with Webflow?

If you want to get started using Webflow, which you should, there are a few things to help with the process. You should already have a basic understanding of how HTML is structured. This doesn’t mean that you need to be able to write HTML from scratch, but rather that you need to understand how HTML pages are coded.
Webflow has great resources to get you started quickly; see their Webflow 101 courses. They walk you through the basics of HTML/CSS — all the way through building a custom content management system (CMS). The entire course takes less than 2 hours!
The biggest part of Webflow — and of learning any new tool — is to actually use it. The more you use Webflow, the easier it becomes. Knowing how a page should be built and best practices will become second nature, and you will be left with total creative freedom to explore building your designs in code. The greatest learning opportunity I’ve found when starting out with Webflow is this: try converting your static designs into working sites with Webflow. It is great hands-on practice.

Will Webflow be a part of Topcoder challenges?

The big question you are probably wondering is: will Webflow become a part of Topcoder challenges? The answer is: maybe, and probably only in unique cases. Webflow will not replace our current UI prototype challenges and more technical code challenges. However, Webflow could be used as a means to develop quick visual prototypes for demos, presentations, and to further client engagements and discussions. The speed at which something can go from design to a working website with Webflow is a true selling point — something we are hoping to leverage in the future for those unique cases.
The biggest benefit of using Webflow in the meantime is becoming a better designer, and part of that is understanding what happens to your designs once it moves into code. If there is a deeper understanding of the entire process when we start the design part of it, it can streamline the process and make things easier down the road.