how webflow and figma simplify our web design process

Web design has come a long way. A while ago, it felt like you had to scratch CSS into paper with a dried-out pen.

Back in the days you designed your websites with software that wasn't even intended for web development. After that, you had to try to get part of that design to work. You opened a code editor to learn how to write HTML & CSS properly. A long and difficult path filled with confusion and frustration followed (with many visits to stackoverflow.com) before you saw any results.

For those of us who don't like coding, it was tiring.

As a designer, I think in images, not code. Fortunately, I'm not alone, because many designers share this feeling. Too often, an end product just doesn't match the original design.

These are classic problems that are piling up: the logo needs to be larger, the shadow less noticeable and a drop-down menu has a gray border instead of a black border. And even worse: it limits your thinking as a designer, because you're already making an assumption that something isn't feasible in development.

Fortunately, this is changing, thanks to tools like Webflow and Figma.

Webflow has completely transformed the way I personally design and build websites.

With Webflow, you can design and code websites visually almost at the same time. You no longer have to figure out how to get your design to the web. And it generates high-quality HTML and CSS layouts with complete design freedom.

This means that you design with web techniques from the start, without ever wondering if your design is feasible. That is why it is a true liberation for me. I'm not limited to just thinking “this would be nice” anymore. I can really make it now and think “this is nice”.

On the other hand, Figma has changed my design process. Especially in the concept phase.

Sometimes we still draw a quick sketch because it's faster than desktop. But instead of relying entirely on my sketchbook, I sketch the wireframes in Figma 99% of the time. This allows me to iterate and make changes quickly. These early wireframes are usually already interactive, giving me a clear picture of the user experience (UX) in the conceptual phase. TLDR: Figma helps you check if a website is going to work as it should before you make it beautiful.

the 8 steps of our web design process

1. Set goals: here I work with the customer to determine what goals the new website should fulfill. That is to say, what its purpose is. Why should this website exist? What should this website achieve? How does this website achieve its goals?
2. Define scope: once we know the goals of the site, we define the scope of the project. This means, which pages and functions the site needs to fulfill the purpose and the timeline for expanding them.
3. Designing a brand identity: this can already be designed, but you can also define the visual style from the ground up. We often use style tiles and mood boards to help us at this point in the process.
4. Sitemap creation and wireframing: with a well-defined scope, we can begin to deepen the sitemap, defining how the content and features that we defined in the scope definition will be interrelated. There are many methodologies, models and rules that we take into account. In this process, insights from keyword research help to organize the structure of the website based on data. We use Figma, because it allows us to share files and get real-time customer feedback (and collaborate).
5. Content creation: now that the website is well visible, let's start creating content for individual pages.
6. Prototyping & collecting feedback: you don't want the first time someone sees your website when it's launch day. We always prototype our design and test the user experience.
7. Build & tests: By now, you'll have all your pages and it's time to make sure everything works. Combine manual site browsing across devices with automated site crawlers to identify everything from user experience issues to broken URLs. We use it ourselves Screaming Frog's SEO Spider. It enables us to perform many of the standard audit tasks. And a little bonus: free for up to 500 URLs.
8. Launch: Once everything works, it's time to plan and execute your site launch! This should include launch time planning as well as communication strategies — that is, when are you going to launch and how are you going to let the world know? Then it's time to bring out the bubbles!

Designing a website doesn't happen overnight. It's essential to go through every step of the web design process to make sure you achieve your goals and connect with your target audience. That goes far beyond making something visually appealing: it's about moving the people you want to reach.