Strategy and ideation

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

‍

Inspiration, style guide

Every new Webflow project starts in Figma first. After I have established the desired design direction, I proceed to creating a style guide containing all the colors I will be using, as well as the typography. Later, I also add some UI components like Navigation, CTAs etc.

‍

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.

‍

Designing custom textures

I designed special custom textures- I called them ‘waves’ to add that modern and unique look to the template.Combined with the dark background and the pink buttons, I think they contribute to the overall ‘pop of color’ that I was trying to achieve.

‍

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 Components-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.

‍

Making it all responsive

‍

When making the website responsive in Webflow, I usually work page by page. Once the desktop breakpoint is done (1100 px), I start adjusting the smaller as well as bigger screen sizes and make sure the page looks great on all breakpoints. As more and more consumers are using their smartphones to make purchases, it is essential that a website looks just as good on a mobile device as it does on a laptop

‍

The Backend - class naming and interactions

‍

While creating the website in Webflow,  I stick to Finsweet’s class-naming convention called Client first. It just helps me have a clean structure and clear rules regarding naming elements and interactions. Here’s a sneak peek of how the backend of the template looks like.

‍

Last but not least, what is a nice design if there are no nice interactions and animations? 😃 I added some nice scrolling effects which gave the website its modern look.

‍