‘Seventeen’- a SaaS Webflow template

Process and Solution

I start each web design process with the end in mind. Each time I ask myself the following questions:

What’s the purpose that this website will fulfil
How will success be measured

In this case, the goal of the website is clear- give more information about a given SaaS product (in this example- a bookkeeping service) and guide the user through the website so that they sign up for a demo or purchase the product.

Potentially, success could be measured by tracking the demo inquiries and sales for companies that use it.

‍

Wireframing, website structure

I never skip the wireframing process because it is crucial to know how all the information will be presented on the website. At this point, we are not interested so much about the visuals but the functionality.

Crafting the web design in Figma

After creating the style guide and the wireframes, it’s time to finally concentrate on the visuals. One by one, I transformed the black and white wireframes into beautiful pages using the color palette of my choice. As I am deigning, I also start creating all of the reusable components, which will become Symbols in Webflow. Usually, these include all navigation, footers, CTAs, blogs, or any sort of an item that can be used again when designing a new page in Webflow.

Webflow development

‍

My approach to building websites is similar to structuring my design files in Figma. Things should be modular. For example, I always set site-wide colors, styles and of course the typography.

Then, after I build a few pages, I start creating the symbols-usually the navigation and some reusable sections-like CTA, Features or Pricing. This way, I ensure that if my website build lands into the hands of a non-technical person, they would be able to create new pages without much effort.