Webflow: Making things a ‘piece of cake’

Working on the next generation of Wazimap using Webflow.

By including Webflow into our work plan, we have managed to reduce the number of steps and obstacles from idea to implementation

In early to mid-2019, our in-house designer Matthew Stark discovered a programme that would change the way we work forever. Webflow offers 100% customisable content management systems (CMS) and allows you to design something in a “what you see is what you get” manner. As a designer, Stark found the visual side of Webflow compelling and after (quickly) making his way through their training videos, saw a lot of opportunities to address some of the things that frustrated him while working with Wordpress. None of the other alternatives he’d been offered were as fully fleshed out or complete of a product. Webflow seemed to make the most sense.

Wading into relatively uncharted territory, one of the first things that OpenUp built using this new and exciting tool was the Eviction Guide. The first thing you notice is how easy it is to navigate and how intuitive it feels, but also that it just looks really good. Of course, this is a nod to Matt’s design skills, but also to the programme he used to put it all together.

Our most significant use of Webflow to date is the soon-to-be-released new-and-improved Wazimap website. Using elections and census data, Wazimap allows you to find out more about where you live, and to visualise this information. With this project, the team has adopted a more hands-on collaborative approach. Suddenly, the need for a front-end developer had been (mostly) removed, and the designer and back-end developers had to communicate a lot more. Gaps have been filled and the risk of ideas and obstacles getting lost in translation was reduced, by a significant amount.

Despite using Webflow on a handful of projects and for more than a year, there are still lessons to be learnt. There are a lot of opinions on the right way to build a website, resource or a tool and the same problems with structuring code and keeping the workflow sustainable still apply — even more so now — because when something doesn’t work you can literally see that it doesn’t work, there and then. We are constantly having to find better ways of doing things through research and by simply trying things out. It is also a challenge to ensure that as a designer, you’re structuring the CSS (that’s short for Cascading Style Sheets, which is used to format the look and feel of a web page) in such a way that it is understood by outside developers. Developers may not be used to a Webflow workflow, so you need to keep good notes and create a smart, sustainable structure.

We are trying to push Webflow quite far, probably beyond what it was made to do and there isn’t really a rulebook on how to do things. This makes using it a gripping new experience, but also means that we get to create a lot of the rules ourselves. From a learning and resource point of view, this is powerful. We can create, innovate and achieve a lot with a little.

“If we can use Webflow to pull off something as complex as Wazimap, it shows that less complex projects are a piece of cake.”

By introducing the use of Webflow into our organisation, we’ve been able to take on a bunch of projects that we wouldn’t have considered before. This is good for revenue, but also means that we’re able to create long-term partnerships with organisations who might start out wanting a small showcase website, and end up assisting us in realising our core goal: opening up data and educating. Webflow has broadened our horizons in ways we didn’t ever imagine, and we can’t wait to show you how we plan on using it in the future!


OTHER PROJECTS BUILT USING WEBFLOW:

  • Creative Storytelling showcases the work of six storytelling projects, which set out to explore new ways of talking about corruption and bring to life some of the stories told by South African journalists.
  • Vulekamali’s guide to procurement answers some of the most frequently asked questions about the process of government buying goods and services using public money, and details each step of the process.
  • Vulekamali’s basic guide to government planning and performance management assists in determining how well a department is performing and where to obtain performance-related information.

You might also like