Webflow is a brilliant no code development tool for creating amazing responsive websites. It has become increasingly popular over the last few years as an alternative to online web development services and tools like Wordpress or Wix.
However, working solely in Webflow can lead to some problems for web designers who are looking to develop an effective and efficient workflow for their projects. As a Webflow Professional Partner, Growfox relies on having a strong workflow for building website and providing amazing designs for our clients.
Our web design team use a number of key tools throughout the different stages of the design process, which help us get our designs into Webflow, iterate and review our sites, and integrate additional functionality to improve experience for our clients and their users.
In this short blog post, we’re going to let you in on some of the tools of the trade we use in our design process, and that we recommend for anyone looking to take their Webflow showcase to the next level.
The Design Phase
Despite its visual editor and easy to use design tools, it is important to remember that Webflow is first and foremost a web development tool. If your first step in the design phase of your website is to jump straight into a Webflow project, then these next tools could help you streamline your design phase, and save having to iterate multiple design ideas in Webflow, which can reduce time efficiency and lead to messy code in your final product.
Octopus.do
First up in our design phase tools is Octopus.do. Octopus is a site map building tool that presents your website as a flow chart or mind map. This allows you to work out all the pages that your site is going to need before you start working on the site itself.
You can visualize the flow of users through your site, and work out the logic of your site map, understanding which pages should be nested together in folders, and giving your URLs a clear internal logic.
Additionally, Octopus allows you to set out a very basic map of the content that each page includes. You can drag and drop different blocks into each page’s section on the chart, add titles, notes and descriptions, allowing you to prepare for wireframing and designing once your sitemap is finished.
Octopus is a great tool for getting your ideas together and allows for collaborative designing in the browser with your web design team.
The final octopus chart can be exported and used as an early deliverable for your clients, allowing you to ensure that your site map meets all of their expectations for the finished product. We highly recommend using octopus as an early design and project scoping tool!
Figma
Once you have a sitemap prepared, you might feel ready to dive straight into webflow, but there are still a couple of steps in the design phase that can be improved using a design tool such as Figma. Figma is an in-browser web design tool, that supports collaborative team working, and focuses on creating high quality UX and UI designs.
Figma can be used for creating wireframes and preparing full design prototypes. Wireframing is an important step for deciding how your web content will be set out on the page, but why is it important to prototype your designs in Figma rather than moving straight into Webflow?
It’s all about iterating your designs, if you want to experiment with different colour schemes, changing your ‘Navbar’ layouts, using different image content, or choosing which font family to use, Figma is the place to do it. When you work in Webflow, you are designing visually, but interacting with CSS code properties, meaning small changes like restructuring a ‘Navbar’ require a lot of work changing multiple nested elements.
However, in Figma you are purely working with a visual design tool, allowing you to make design changes quickly, without worrying about code structure in the background. Using Figma you can easily make multiple designs changing each variable, like colour schemes or fonts, in a much quicker time than you could working directly in Webflow.
The Build Phase
The build phase is where Webflow’s no code editor really shines. The way that webflows tools allow you to control HTML and CSS through its editor toolset means that it is easy to take your designs and realise them online. However, Webflows tools are not exhaustive, and for some more complex website builds, you may want to incorporate additional functionality.
Using Webflow’s code editing options, it is possible to incorporate additional elements and functions from external Javascript libraries. Bellow we highlight two great resources specifically designed to bring more functionality to your Webflow projects.
Finsweet
Finsweet are a Webflow agency who create free solutions to add additional functionality to your website. They have recently announced their new “Attributes” system. This tool allows you to use the custom attributes tab in your Webflow editor to add a huge amount of flexibility and functionality to your site.
With only a few lines of code added to your site, you can create live CMS filters, dynamically generate sliders from CMS lists, set custom favicons across different pages of your site, and create custom rich text using inline HTML.
The “Attributes” system is entirely modular, meaning you can select the individual functions or attributes that you want to use, without having to load a huge library of unnecessary code. Alongside their “Attributes” offerings, Finsweet have a long list of ‘Webflow hacks’ which are agreat resource for building extra functions into your site. Finsweet make some incredibly exciting and inspiring work and are a great resource for any Webflow designer.
Weblocks
Weblocks is another tool for adding functionality and custom JavaScript to your Webflow projects. Using the weblocks editor tool is a simple, no-code way to create custom JavaScript animations and logic. Weblocks uses an in-browser editor, that allows you to build JavaScript functions through a library of editable Blocks, this can then be exported directly to your Webflow project in real time.
Weblocks’ YouTube channel presents a number of tutorials demonstrating how their products can be used to create custom interactions in your Webflow projects and is a great resource for finding solutions to complicated Webflow tasks.
Some of their case studies are accompanied by cloneable Webflow projects, allowing you to see how their JavaScript functions in context, and to clone entire projects which you can use as assets during your Webflow build phase.
The review stage
The review stage is one of the final steps in the web development process and is key to the success of any web project. Whether this is internal review amongst a team of developers and designers, or and sending a project out for client review. There are a number of tools that can assist you in this final stage to ensure that your Webflow project is ready to be published.
Responsively
Responsively is a free to download app that does what it says on the tin – it allows you to ensure that your website works responsively across all different devices and screen sizes. Webflow has tools for designing responsively, using breakpoints to go from desktop right down to mobile, however it doesn’t give a perfect idea of how your site will work across the wide variety of devices available.
Responsively allows you to load multiple instances of your site in different device sizes at the same time on a single screen. This means you can contrast and compare directly between screens without having to tab between screen resolutions. Additionally, it allows you to turn on touch screen mode, allowing you to use your mouse to simulate touch screen interactions on a mobile or tablet.
Responsively also allows you to screenshot images of your site on different devices. This is a great tool for advertising a new site or creating a presentation of the site for a client. Using device mock-ups and these screenshots, you can show team-members, customer, and clients, how your Webflow project will appear in situ on any given device, an important tool for the review stage of a design.
Markup
Markup is a tool for creating notes and receiving feedback on a webpage. Using Markup is easy, simply add the URL of your site to the in-browser programme, and you can start adding notes, highlighting sections, and leaving comments for the rest of your team. Markups tools are reminiscent of adding comments in a Google doc, or word file, and can be resolved by a user as they implement changes to the design in Webflow.
Markup is a great tool for internal reviews of projects, allowing your work to be assessed by a wide team of people quickly and easily, and leaving you with an actionable list of changes and comments to work through to create a perfect final product. It can also be used to gather feedback from clients, allowing a clear and open communication channel betweena client and a designer.
Top comments (1)
I want to express my sincere gratitude to the author for the stunning article "Tools to Help You Build Amazing Sites in Webflow". This material has become a real source of inspiration for those who seek to create amazing websites using Webflow. Thank you very much for the share of creativity and knowledge that you shared with us!
Which tools from the article have become particularly useful to you? By the way, read more of this article from Gapsy Studio