This review will answer the following questions:

1. How good is it at designing websites?

2. How creative is it, i.e., how creatively different are outputs from one project to another?

3. Can you use it for client projects?

4. How will this impact Webflow’s ecosystem? Who should be worried, and who should be excited?

How good is the new AI Site Builder at designing websites?

Webflow’s AI building experience starts by inputting a prompt – you first tell it what your business or personal project is about. Next, you can choose from various themes, colors, fonts, etc., to define your website’s style. You get a live preview, and you can tune the layout of each generated section by selecting from a range of predefined components. This last bit is very similar to using Relume.

Once you’re set, it will generate a Webflow project, create a style guide, and link it to Variables. All designs are responsive, and some sections will even have animations.

I’ve created three projects so far, and the results are definitely on the upper end of quality compared to other AI-based site builders. Webflow has put a lot of thought into the design aesthetic of the predefined components and themes.

Where this tool stands out is the ease of fine-tuning results. Each section can be regenerated, so if you’re unhappy with the initial result, you can swap it for another. You can also use a chat-like feature to tell it what adjustments you’d like to make, such as changing the size, color, etc.

Here are a few examples of what I could get with quick fine-tuning.

There are, of course, limitations to what you can design.

Webflow’s AI builder is a pick-and-choose way to build a website, with AI stitching it together.

As best I can tell, the tool relies on the predefined section layouts and bases all its designs on them. So, if you’d like to create something that's not in the catalogue of layouts, you’re out of luck.

Of course, this will get better as more layouts become available in the catalogue.

It’s competent at building presentational websites – homepage, product features, blog, team, careers, etc. Once you step out of this comfort zone, at least for now, it’s out of its wits.

How creative is it, i.e., how creatively different are outputs from one project to another?

One criticism of AI site builders is that their outputs all look the same. I wanted to test how creative Webflow’s solution is. Do results differ? Let’s say there are two designers, each building a website for a real estate agency. Will the websites look similar, or will they be significantly different?

To find out, I did a simple experiment and launched two AI projects, giving the builder two different prompts. Both were for a Berlin-based real estate agency specializing in commercial real estate.

Prompt 1: Berlin Best Realtors is a specialized real estate agency based in Berlin, focusing exclusively on commercial real estate. We connect businesses, entrepreneurs, and investors with ideal commercial properties across the city. Our expertise helps clients navigate Berlin's competitive commercial property market, from retail spaces and office buildings to industrial facilities and mixed-use developments.

Prompt 2: BCRE (Berlin Commercial Real Estate) is a premier real estate consultancy dedicated exclusively to Berlin's dynamic commercial property market. We serve as strategic partners for businesses, investors, and property owners navigating the complexities of commercial real estate in Germany's capital.

On the surface, the two results I received were different in structure, color, fonts, and layouts:

I then tried to regenerate a design for Prompt 2. Look what happened:

Webflow allows you to regenerate individual sections. So I tried to do that with the hero section of Prompt 2. After a few clicks, I got very close to Prompt 1. The only difference was that the background image was vertical rather than horizontal.

To be fair to Webflow, I could quickly get a different hero layout. In fact, here’s one that looks very different:

But after a bit of playing around, you soon realize you know all the hero section layouts available.

The selection is the same across projects if you look at other attributes, like buttons and forms:

This selection still creates a ton of room for variation. I don’t expect the designs to look identical. However, the tool has a vibe and a style that it brings in terms of both layouts and themes.

In this regard, it’s very similar to other component-based design systems. The other day, I saw a design with a card section that would fly out as you scrolled. I could tell this was a Relume component, but the site still had an original design.

This originality is less evident with the AI builder, at least in the current iteration. This will depend, to an extent, on how people use this tool. You still get the full power of Webflow, and you can change all layouts once you are in the designer. But if you use it at face value, we’ll start seeing sites with a similar look and feel everywhere.

Can you use it for client projects?

This brings me to the next question: Can you use it in a commercial project? Again, this will depend on how you use it. While this can be a good starting point, creating unique designs requires tweaking.

It also bypasses creating designs in Figma. This is fine as long as you can stick to making changes using the tool. But once you move into manually designing custom sections, I can see how this might slow you down. In my experience, hashing out designs with a client in Figma first is far more efficient than changing it in Webflow.

As I wrote, I’m sure Webflow will invest in expanding the catalogue of components and themes, making the results more diverse and saving you from building custom sections.

Until then, I think this will be best used on projects that don’t require unique layouts and designs and where speed of delivery is more critical.

How will this impact Webflow’s ecosystem? Who should be worried, and who should be excited?

Whenever a new AI system is introduced, it creates a wave of excitement and pronounces some professions dead. While I don’t think Webflow developers will be out of a job anytime soon, introducing AI tools into Webflow signals changes ahead.

How we do our jobs will change. Eventually, most of the designing will likely happen inside Webflow, where it will be very easy to create new designs.

I also suspect that companies like Relume might lose some of their business. I know these tools have a big following, but why pay extra if a library of components exists inside Webflow with AI tuning it to your designs? The current iteration is not there, so don’t ditch your Reulme subscription just yet.

Template designers might be worried as well. Part of the reason I wanted to look into this new tool is that I’m currently building my first template. I was afraid it would make templates obsolete. The good news is that it hasn't. The bad news is that it might soon. We’ll see more specialized templates, and the AI builder will serve your run-of-the-mill corporate websites well.

This tool is still in beta. We’re at the beginning, and no one knows how useful it will be for Webflow professionals. It’s possible that people will not embrace it and will be axed, just like Webflow Memberships. Or it can become an indispensable tool in our toolbox.

A lot will depend on how much Webflow invests in developing this feature going forward. Profesionally I’m excited about these changes. The result will be some significant simplification of our jobs.

Personally, I’m sad to see the old way of designing websites slowly disappear. This is not the fault of AI tools. This is a trend that’s been happening for a long time. Websites are commodities at this point. They all look the same, and more creative ideas don’t have a lot of room. I know – it’s all about the conversion, but still, it’s nice to stumble on some out-of-the-ordinary designs occasionally. But that’s a rant for another day.

Thanks for reading all the way. See you in the next post!

If you enjoy the content I create and want to get new articles in your inbox, subscribe.

Subscribe now

I’ve wondered what Webflow planned to do with all that real estate in variables – now I know. I’m a big fan of organized stuff, so this update made me very happy.

As soon as I had some spare time, I updated VBDS (Variables Based Design System) to support variable modes.

Working with modes and collections

The best way to make modes work is to group your variables into collections. Timothy Ricks’s video on modes is an excellent introduction, and I recommend watching it before you start.

When I created the first version of my design system, collections didn’t exist yet. But today, they help me achieve two things:

1. Keep my variables organized. Before, all my variables were in one collection, which ended up being a very long list that was hard to navigate. Now, I’ve got thematic collections that make it easy to find and change values. It’s also easier for anyone else to understand the basic structure of my design system.

2. Grouping based on mode types. Collections allow you to group variables based on the modes you plan to apply to them. It’s best to group automatic and manual mode variables separately. This is to avoid creating unused variable values and bloating your code.

Here’s the grouping I ended up with for my design system.

Brand Colors

The first is the brand color collection. Here, I group all the colors used in a project.

Color Themes

Color themes are the first place I use modes. In this case, manual modes allow me to create a theme I can apply to elements or entire sections. For example, if I have a section with a dark background, I can easily use the White theme, and all my text and links will change to white. I might expand this to include buttons, but I want to try this with an actual project to see if I need it.

Typography Globals

Global font settings like font family, weight, and spacing are grouped here.

Typography Scale

The first collection using automatic modes is the Typography Scale. I can set text size for headings and main font across all breakpoints.

Sections

Setting top and bottom paddings for sections across breakpoints.

Containers

Container max width and left/right paddings across breakpoints. I’ve kept container max-width as an automatic mode in case I deal with larger breakpoints.

Spacing

This collection groups spacer elements and grid spacing and allows me to define different sizes across breakpoints.

Buttons

This collection has no modes, just a list of variables related to buttons.

Forms

Style variables related to forms, like border color and radius.

Icons

Another automatic mode for scaling icons across breakpoints.

Border radius

Just one setting for global border radius.

Text Transform

Since Webflow does not support variable types related to text transform values, I had to create a list of text-transform values I can reference. This works thanks to a bit of custom code.

Thanks for reading through this update. Head over to the Webflow to clone the Variables Based Design System. I’d love to hear your thoughts on how I can improve it.

If you enjoy the content I create, and want to get new articles in your inbox, subscribe.

Subscribe now

If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:

1. Finding opportunities in the Webflow Template Marketplace

2. I built my own Webflow design system

3. How to boost Webflow SEO

4. The failures that got us to where we are: my personal Webflow journey

5. 12 Webflow typography tips

When I first started using Webflow, one of the most useful things I learned was the importance of proper website structure.

A proper structure will save you a lot of headaches, fixing responsiveness and consistency issues across your sites.

I'll walk you through the essential components of a well-structured Webflow site, from basic setup to advanced implementation.

Common mistakes

Many new Webflow developers (me included) begin their page construction by placing layout elements—such as grids, flexboxes, or columns—directly inside the body tag. While this might seem logical at first, it creates significant problems down the line. This approach makes mobile responsiveness much harder to manage and leads to inconsistencies when building multiple pages.

Think of your website structure like building a house. You wouldn't start by placing furniture directly on the foundation - you need walls and rooms first. The same principle applies to web development. Without proper containment and sectioning, your layout elements lack the structural support they need to maintain consistency across different screen sizes and page types.

Let me show you my approach to structuring your Webflow website. The hierarchy consists of five key layers, each serving a specific purpose:

1. BODY - The body tag serves as your foundation

2. SECTION - Sections divide your content into meaningful blocks

3. CONTAINER - Containers control content width and centering

4. LAYOUT - Layout elements (like grids) organize your content

5. CONTENT - Actual content (text, images, buttons) fills these layouts

This structured approach might seem like extra work initially, but it's an investment that pays off tremendously as your website grows.

Sections

When implementing sections, I set them to full width by default. This gives me complete control over important visual elements:

• Background colors or images that extend edge-to-edge

• Consistent height management across different types of content

• Clear visual separation between different content areas

• Proper spacing between major page elements

One crucial aspect of sections that often gets overlooked is proper naming. I use combo classes for sections. I start by creating a default Section class, which has top and bottom padding. From there, I can create a combo class to change the background, remove the padding, etc. I also make sure to assign the correct HTML tag to my section, which helps with SEO (you do this in the Settings of your section element in the right-hand pane).

Here’s my default section setup:

• Top and bottom padding: 4rem on desktop, 3rem on tablet, 2rem on mobile

You’ll notice I use REM units instead of pixels. UX Planet has a good explanation of why REMs are better than PXs.

Containers

Now, let's talk about containers - the elements that go inside these sections. Rather than using Webflow's default container width of 940px, I prefer creating a custom container class set to 75rem maximum width. This wider container works better for modern screens while maintaining good readability. The container ensures that your content stays centered and readable, even on large displays.

I always add left and right padding to my containers to prevent content from touching the screen edges - an issue that becomes particularly noticeable on mobile devices.

Here's my standard container setup:

• Maximum width: 75rem

• Center alignment

• Auto margins on left and right

• Left and right padding: 4rem on desktop, 3rem on tablet and 1.5rem on mobile

• Width set to 100% to ensure proper scaling

Layouts

When creating layouts in Webflow, I rely on a universal grid system that maintains consistency across the entire website while providing flexibility for various layouts. I've found that having a set of predefined grid layouts saves significant development time and ensures visual harmony throughout the site.

Here are the core grid layouts I implement in every project:

The 1:1 grid is my most commonly used layout, featuring two equal columns. I set it up with:

• Two columns at 1fr each

• 2rem gap between columns

• Equal height columns for content alignment

• Vertical stack on mobile (below 767px)

Subscribe now

For asymmetrical layouts, I use either 2:1 or 1:2 grids. The 2:1 grid allocates:

• First column at 2fr

• Second column at 1fr

• Same 2rem gap

The 1:2 grid reverses this ratio:

• First column at 1fr

• Second column at 2fr

For content-rich sections, I implement 3-column and 4-column grids:

• Three equal columns (1fr each) for feature lists or brief content blocks

• Four equal columns for card layouts, team members, or logo showcases

• Both convert to 2 columns on tablet (below 991px)

• Single column on mobile (below 767px)

Adding HTML tags – header, navigation, footer, and <main> tag

To optimize my page for accessibility and SEO, I add layout-oriented HTML tags to my structure. Most of my pages have standard components, like a navigation, a footer, etc. To properly organize this content, it’s useful to understand HTML tags (quick video intro from Kevin Powell).

In Webflow, you set the HTML tag in the right panel under Settings.

Here’s how I organize my layout:

1. BODY

   1. HEADER - holds the logo and navigation that’s repeated on every page.

      1. NAVIGATION - I place the navigation in a List element for better accessibility.

   2. MAIN - holds my main content (there should be only one per page). Here, I can also nest an ARTICLE tag if I’m working with a blog post.

      1. SECTION - holds individual sections of the page

         1. CONTAINER

   3. FOOTER - holds the footer information

Bonus: Create a static template Starter Page

Here’s a tip that will save you time building new pages. Using Webflow’s Static Template Page, you can create a blank page that includes this structure and use it when you create new pages.

Next steps

The approach I've outlined - from nested sections to page wrapper components - will give you a solid foundation for any web project.

To take your Webflow development even further, I've created a Variables Based Design System that combines this structural framework with a powerful variables-based approach. This system allows you to make global design adjustments with just a few clicks using Webflow Variables.

Are you a Webflow freelancer? Subscribe if you haven’t already. I send new posts about growing a Webflow freelance business, tips and tricks for building in Webflow, and useful tools every week.

If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:

1. Finding opportunities in the Webflow Template Marketplace

2. I built my own Webflow design system

3. How to boost Webflow SEO

4. The failures that got us to where we are: my personal Webflow journey

5. 12 Webflow typography tips

Here are ten things I wish someone told me when I started with Webflow.

None of these mistakes will break your website, but avoiding them will make your life as a developer easier. Many are also good practices if you consider joining the Webflow Expert program and its requirements list.

1. Not using a style guide

Working without a style guide often leads to inconsistencies in your design. You might end up with mismatched fonts, colors, and inconsistent spacing. A well-defined style guide ensures consistency across your project and makes updates and maintenance easier. Here are a few of my favorite style guides you can start with:

1. Nikolai Bain’s Simple Style Guide

2. Finsweet’s Client-First system

3. Timothy Ricks’ Lumos

4. My Variables-Based Design System

2. Using Webflow columns

In my first project, I used Columns to achieve a side-by-side layout. However, Columns as an element are not very responsive, so I use Flexbox or Grid for my layouts.

3. Not giving images height and width

When you don't specify image dimensions, content can shift as the page loads, especially on slower connections. This creates a poor user experience and lowers your Lighthouse score. Always set your image dimensions to prevent this issue and improve your site's performance.

4. Not optimizing images for web

Large, unoptimized images significantly slow down your site. Webflow has built-in tools to compress images in the Assets library and Collections (something I learned just recently).

But I like to use Squoosh because I can tweak how much the image will be compressed and resize images that don’t need to be that big. It exports AVIF and Webp and is easy to use.

5. Creating custom classes for everything

While it might seem like a good idea for granular control, creating custom classes for every element makes your project challenging to manage and update, use Webflow's class system effectively, leveraging combo classes for minor variations. This approach makes your project more maintainable in the long run.

6. Overusing combo-classes

Another class-related issue is overusing combo classes to customize a global class. Webflow doesn’t recommend going below three levels of combo classes. If you find yourself this deep, it’s likely time to create a dedicated class for your element.

While combo classes are helpful, overusing them can lead to overly complex styling that's hard to maintain. Use combo classes for minor adjustments, not significant changes. It might be time to reassess your base styles if you rely heavily on combo classes.

6. Not using Flexbox to position elements

Flexbox is a powerful tool for creating flexible, responsive layouts. If you're still relying solely on absolute positioning or floats, you're missing out on Flexbox's benefits. It simplifies creating layouts that adapt well to different screen sizes.

7. Not having a proper page structure

A good page structure (Section > Container > content div) isn't just about organization. It makes your project easier to style consistently and simplifies the process of making global changes when needed. A logical structure improves your workflow and makes your project more manageable.

I use the following structure:

1. Sections: used to set top and bottom padding

2. Container: used to set left and right padding

3. Actual content

This allows me to have consistent padding and customize it when needed. For instance, I can have a full-screen section with no top and bottom padding and a full-width container with no padding.

8. Not cleaning up unused styles and interactions

Unused styles and interactions bloat your project, potentially slowing load times and making maintenance more difficult. Regularly removing unused elements keeps your project lean and efficient, and it's a good practice that improves overall site performance.

10. Not assigning tags (Header, Footer, Section, etc) to their content

This is one that I discovered much later in my Webflow journey. Proper semantic structure improves your site's accessibility and helps search engines better understand your content.

Using the correct tags for different parts of your site (like headers, footers, and sections) creates a clear, logical structure for your content. This benefits both users and search engines.

You can set them by selecting a section, container, or div and heading to Settings > Tag.

Your turn!

What about you? What are some mistakes you’ve made in the past?

Are you a Webflow freelancer? Subscribe if you haven’t already. I send new posts about growing a Webflow freelance business, tips and tricks for building in Webflow, and useful tools every week.

If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:

1. I built my own Webflow design system

2. How to boost Webflow SEO

3. The failures that got us to where we are: my personal Webflow journey

4. 12 Webflow typography tips

I plan to build and submit a template to Webflow’s marketplace to diversify my income streams. But with so many templates already on the market, what are the best opportunities for someone just getting started?

To answer this, I scraped Webflow’s template marketplace to identify tags with a low template count and high search volume.

Here’s what I found.

The data

I collected the data on September 4, 2024. Although Webflow offers two methods for categorizing templates (Tags and Categories), this report uses Tags.

Tags are shown under each template, and as best I can tell, there seems to be a primary tag assigned to each template.

Tags are also closer to what a person would be searching for - you’re more likely to search for real estate templates vs business templates.

You can get the raw data behind this report here.

General Stats

The Webflow marketplace contains 4,226 templates across 100 tags.

Tags with the most templates are:

1. Agency (500 templates)

2. Portfolio (500 templates)

3. SaaS (500 templates)

Seven tags have over 100 templates each:

1. App (146)

2. Real Estate (146)

3. Photography (134)

4. Architecture (132)

5. Consulting (122)

6. Finance (106)

7. Blog (103)

Tags with the least templates include:

• Newspaper, Film, Donation, College, Band (1 template each)

• Movie, Homeware, Admin (2 templates each)

Prices

The marketplace has 12 price points, ranging from Free to $149. The two most common price points are $49 (1517) and $79 (1707), with $129 (393) in a distant third place.

Identifying opportunities

Now, onto opportunities.

I looked at search volume data for every tag to identify the most promising tags. The searched term was “Webflow [TAG] template.” I used data from Keywords Everywhere (which uses Google Search Volume). While not perfect, it’s a good proxy for identifying demand.

Once I had all this data in a spreadsheet, I calculated a score for every tag using the following formula: Score = (Search Volume / Templates) * 100.

Here are the top 10 tags based on my scoring:

1. Newspaper - 1 template, 50 monthly searches, score: 5000

2. Marketplace - 4 templates, 110 monthly searches, score: 2750

3. Dashboard - 14 templates, 140 monthly searches, score: 1000

4. Landing page - 45 templates, 390 monthly searches, score: 866.67

5. Newsletter - 6 templates, 50 monthly searches, score: 833.33

6. Blog - 103 templates, 720 monthly searches, score: 699.03

7. Coming Soon - 10 templates, 50 monthly searches, score: 500

8. Help center - 4 templates, 20 monthly searches, score: 500

9. Admin - 2 templates, 10 monthly searches, score: 500

10. Resume - 9 templates, 40 monthly searches, score: 444.44

Newspaper is the apparent winner. The only template under this tag doesn’t fit the description very well—it’s more of a membership template. On the other hand, a few Newspaper templates are tagged under Blog (like this one and this one), and there’s a sister tag, News, with 19 templates and 50 monthly searches. Still, creating a dedicated Newspaper template and tagging it as such is an opportunity.

Blog has the highest monthly search volume by far and the number of templates is still relatively low. Let’s compare that to the most popular tags by template count. SaaS only has 480 monthly searches but boasts 500 templates. Similarly, Agency, with only 590 monthly searches, has 500 templates. This signals that there's still room for more templates in the Blog category.

The next opportunity is the Landing page tag. Here, the monthly search volume is 390, with only 45 templates. Looking at templates under this tag, I see some crypto/NFT stuff and many general-purpose landing page templates with many page variations (webinars, eBooks, waitlists, etc.).

Marketplace and Dashboard tags have a good search volume and a low template count, especially Marketplace templates. The challenge here will be identifying what kind of marketplace to build - one-sided, two-sided, universal design, or focused on a niche. These are all questions I need to answer.

Even tags with lower scores may offer opportunities for niche designs that address specific user needs not met by existing templates.

What to build?

While it may be tempting to build a Newspaper template just because it got the highest score, I think it’s worth considering a few things.

First, search traffic matters - 390 monthly searches are more than 50.

Second, complexity matters - this will be my first template. Building a marketplace is more challenging than building a Newsletter template.

Third, ideas matter - what can I offer that differs from the existing stuff? What experience do I have that might make the template stand out from the competition?

So, what am I going to build?

I’m split between building a landing page template or a blog template.

A landing page template is a good compromise between search volume and complexity, and I’ve also got some experience building conversion-focused pages. I still have to figure out my edge here; I’d like to focus on a specific niche. I like what Anastasiia did with her landOS template, which is focused on digital courses.

Blog’s search volume is super attractive, and the complexity of building a blog isn’t very high. Again, I’ll need to consider an edge to stand out.

What would you build if you were me? Let me know in the comments.

Follow along

If you want to follow my journey of building and submitting this template, subscribe below. I’ll be posting updates here.

I’ll also publish a template marketplace report regularly, so you’ll see how template counts for each tag change over time and the newest template opportunities.

If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:

1. I built my own Webflow design system

2. Now is a great time to build Webflow apps: an interview with Tom Elliot from fluidSEO

3. The failures that got us to where we are: my personal Webflow journey

4. 12 Webflow typography tips

Expanding my no-code toolbox with new tools has allowed me to unlock new types of projects that I couldn’t previously take on due to Webflow’s limitations. With these tools, I can build advanced web projects and get paid more than basic marketing websites.

In today’s post, I’ll cover the tools that have made this possible and show you the projects I built with them.

Make.com

One of the first tools I learned in my no-code journey was Make.com, or, as it was known back then, Integromat. Think of Make.com as a glue that connects different tools and platforms and allows you to build robust integrations.

I use Make.com for many client projects. For instance, it allows me to integrate one of my favorite email marketing platforms, Mailerlite, with Webflow’s forms since there isn’t a direct integration.

But it’s far more powerful. A while back, I built a personal project that took my most popular tweets of the week and automatically sent them to an email list. This was an integration of three services: X (back then, Twitter), Airtable (to calculate tweet popularity based on a combination of likes and replies), and Mailgun (to send the tweets to my email list).

Being able to build an app that has actual backend logic was an incredibly empowering feeling. It’s not quite coding, but you can imagine the opportunities this opens up.

Memberstack

About a year ago, I was approached by a client who wanted to build an e-learning platform. They wanted customers to be able to assemble courses by picking from a list of available lessons. Customers could choose 5, 10, and 30 lessons and would be charged based on the number of lessons.

To build this, I turned to Memberstack and its powerful MemberScripts. Memberstack allows you to save a JSON file for every user who signs up. This allowed me to store users’ custom lesson lists inside their respective JSON files. Using MemberScripts, I manipulated Webflow’s Collections to display only the lessons a user selected at checkout.

Finsweet Attributes

Attributes are a very popular collection of Webflow custom scripts that give your websites extra power. For instance, you can build a CMS filter, a table of contents for your blog post, or the ever-more-popular CMS slider.

I use these in most projects, and getting familiar with them made me more confident when taking on new client projects. I could make sure more complex things were possible with Webflow.

Jetboost

A while back, I built a reference website for a personal project. Using Jetboost, I built powerful filters, search, and a favorites feature.

Next: Wized & Xano

I’m always trying to expand my no-code toolbox. I’m currently learning two tools: Wized and Xano.

Wized is another project from the fantastic Finsweet team. It’s a robust platform that lets you build full-blown web apps without code. It connects to data sources — everything from Airtable to more advanced solutions like Firebase. It also serves as an API connector, allowing you to interact with other apps and platforms.

Xano is a backend builder that lets you create a database and build API endpoints to interact with your data.

The Webflow-Wized-Xano combo has grown in popularity in the past year, and I want to explore it over the next few months.

Are you a Webflow freelancer? Subscribe if you haven’t already. I send new posts about growing a Webflow freelance business, tips and tricks for building in Webflow, and useful tools every week.

If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:

1. I built my own Webflow design system

2. Now is a great time to build Webflow apps: an interview with Tom Elliot from fluidSEO

3. The failures that got us to where we are: my personal Webflow journey

4. 12 Webflow typography tips

I’ve been exploring new ways of making my designs stand out. After covering typography, I spent some time exploring colors. Like with most things, there’s a science behind the art.

In this two-part series, I’ll explore 6 ways you can approach colors when designing a website. We’ll start with monochromatic, analogous, and triadic color palettes in part one and follow up with complementary, tetradic, and split-complementary in part two.

1. Monochromatic color palette: the power of a single hue

Let's start with the simplest of the color schemes - monochromatic. While simple, a well-executed monochromatic palette can give your designs a very sophisticated look.

What is it?

A monochromatic color scheme uses variations in lightness and saturation of a single hue. Think different shades, tones, and tints of one color.

Monochromatic color schemes are all around us. A stormy sky or the forest floor—all examples of a single hue and it’s lighter and darker tones. Famous artists have made entire careers using monochromatic colors.

How to create it

1. Choose your base hue (let's say green)

2. Create lighter tints by adding white

3. Create darker shades by adding black

4. Create tones by adding gray

You can use a monochromatic color palette generator. My favorite is ColorKit, because it includes a color contrast checker.

Pros:

• Creates a cohesive, harmonious look

• Easy to create and manage

• Great for establishing a strong brand identity

• Works well for minimalist designs

Cons:

• Can lack contrast if not done carefully

• Might feel boring or bland if overused

Examples

Wayside is the transdisciplinary design and research practice of Curry J. Hackett. His website was a Webflow awards finalist.

Ollivere, a Webflow developer, built his portfolio with a super simple monochromatic color scheme that relies on beautiful illustrations.

Pro tips

1. The key to a successful monochromatic scheme is contrast. Make sure you have enough variation between your lightest and darkest shades to create visual interest and hierarchy in your design. It’s a good idea to create variations of the chosen hue from very light to very dark.

2. If you're worried about your monochromatic design feeling flat, try adding texture or subtle patterns to create depth. In Webflow, you can easily achieve this with background images or SVG patterns.

2. Analogous Color Palette: Harmony Through Neighbors

If monochromatic feels too limiting, but you still want a harmonious look, analogous color schemes might be the way to go.

What is it?

An analogous color scheme uses colors that are adjacent to each other on the color wheel. Typically, it involves a dominant color, a supporting color, and a third color that's a mix of the two. Think sunset vibes: red, orange, and yellow.

How to create it

1. Choose your primary color

2. Select the colors directly next to it on the color wheel

3. Decide on your dominant color and use the others as accents

I like Canva’s color wheel for generating analogous colors.

Pros:

• Creates a serene, harmonious look

• Feels natural and pleasing to the eye

• Offers more variety than monochromatic schemes

• Great for creating depth and dimension

Cons:

• Can lack contrast if not balanced properly

• Might feel too "safe" for brands wanting to make a bold statement

Examples

Uji Matcha uses an analogous color scheme in their product imagery and I think it looks awesome.

An example of a blue analogous color scheme on Visium’s website.

Pro tips

1. The key to a successful analogous scheme is balance. A good rule of thumb is to use the 60-30-10 rule: 60% dominant color, 30% secondary color, and 10% accent color.

2. If you're worried that your analogous scheme lacks contrast, try varying the saturation and lightness of your colors. Pairing a highly saturated dominant color with more muted supporting colors can create striking designs.

3. Triadic Color Palette: Balanced and Vibrant

The last color scheme we’ll cover today is called Triadic and it’s the most vibrant so far.

What is it?

A triadic color scheme uses three colors evenly spaced around the color wheel. Think red, yellow, and blue—the classic primary colors. But don't worry—you're not limited to just those.

How to create it

1. Pick any color on the color wheel

2. Find the two colors that form an equilateral triangle with your first choice

3. Decide which color will be dominant and which will be accents

Here, I like using ColorKit’s palette generator; it comes up with creative triad combinations.

Pros

• Creates a vibrant, energetic look

• Offers good contrast while maintaining balance

• Provides a wider range of color options

• Great for designs that need to pop

Cons

• Can be overwhelming if not used carefully

• Might be too bold for more conservative brands

Example

Alex Chen uses a bold red, green, and blue triadic color scheme in their portfolio design.

Pro tips

1. Create a set of tints and shades for each of your three main colors. This gives you more flexibility in your design while maintaining the triadic relationship.

2. The key to a successful triadic scheme is balance. It's usually best to let one color dominate and use the other two as accents. This prevents your design from looking like a rainbow explosion (unless that's what you're going for, of course!).

3. If you find your triadic scheme too intense, try muting two of the colors and using the third as a bold accent. This can create a more sophisticated look while still leveraging the energy of the triadic relationship.

Are you a Webflow freelancer? Subscribe, if you haven’t already. I send new posts about growing a Webflow freelance business, tips, and tricks for building in Webflow, and useful tools every week.

–Ondrej

If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:

1. Now is a great time to build Webflow apps: an interview with Tom Elliot from fluidSEO

2. The failures that got us to where we are: my personal Webflow journey

3. 12 Webflow typography tips

I recently concluded that while immensely flexible and powerful, the Client-First system is overkill for simple projects—at least for me.

I’ve been using Client-First for over a year now in all my projects - big and small. One big reason for this is Relume’s component library, which is written using the Client-First design system.

I’ve started to suspect that this Relume+Client-First setup is slowing me down.

Now, you might think this is crazy—after all, Relume gives you hundreds of components you can copy-paste straight into your design. And it syncs with your Client-First style guide. So where’s the slow-down?

Most designs we build for clients are simple variations of common web layouts. These standard layouts are easy to create in Webflow from scratch, and it’s usually easier than adapting one of Relume’s pre-built components, especially once you start messing around with custom section paddings or element spacing.

Then, there is the problem of class naming. I know Finsweet’s strategy of dedicated section and component names makes sense once you have a ton of these components, but in small projects, it’s just too much renaming, and I’ve often ended up with very long class names.

So, I decided that for simple projects, I’d use my own design system.

Setting some ground rules

Before starting, I put down four rules I wanted my system to follow:

• less is more – fewer preset classes, fewer padding options, less of everything

• rely on Webflow’s variables where it makes sense,

• naming should be as simple as possible and not rely too much on multi-level combo classes,

• out-of-the-box responsive fonts and components.

These helped me to stay within the confines of a simple design system and not go overboard.

I should also acknowledge that I’ve taken inspiration from Lumos and Timothy’s excellent video on working with variables in Webflow. Lumos is definitely the way to go if you ever need a very robust variables-based framework.

Secondly, I must mention Nikolai Bain’s simple style guide and his post on building a design system.

Less is more

Many popular design systems are robust. They are designed for flexibility, accounting for all possible scenarios. As a result, they grow in complexity. Instead of having 3 spacer types, they have 8. Instead of having 2 text sizes, they have 9; you get the idea.

Since I’ll be using this system for simple projects (brand websites with 4-10 pages, a blog, and a contact form), I don’t have to optimize for all eventualities, and I can keep it simple.

Using Webflow’s variables

I was stoked when Webflow introduced its new variables and variable manager. While imperfect (e.g., it still lacks reorder options), it seems ideal for storing my entire design system. It’s far easier to update because it's accessible right from the left menu, and if set up correctly, I can make sweeping changes with a few variable updates.

Simple naming convention and page structure

Another benefit of designing a system to be used in simple projects is that I can use a more straightforward naming convention. Here’s an example page structure:

All my content is wrapped in a Page Wrapper so I can copy and paste an entire page (since you can’t copy the Body tag).

Inside, I’ve got a Section → Container → Content structure. As you can see, I’m using Webflow’s native Section and Container components. I find their icons make it easier to navigate the page structure.

Custom content inside the container is named according to its purpose using plain English. In the above example, I have a DIV wrapping a header above client logos, so I named it Clients Header.

Responsive

I wanted my design system to be as responsive as possible out of the box. There are three areas I focused on:

1. Desktop/tablet/mobile font sizes

2. Responsive paddings and spacing

3. Responsive icons

Unfortunately, Webflow’s Variables don’t (yet) support breakpoint sizes. This means I had to create separate sizes for every breakpoint.

Still, I like that I can change all my font sizes just by opening Variables and don’t have to switch breakpoints.

Using the Variable-Based design system

I’ll walk you through the basics and how I work with it. The Webflow preview is here, in case you want to follow along. If you find this helpful, you can also clone it.

Color swatch

All colors are stored in the swatch folder in variables. I’ve got some primary colors pre-defined (Greys, Black and White).

Globals

I have a few globals that let me adjust the overall style quickly. The first are global colors for my text and links.

The second is global sizes for the border-radius used in buttons, images and forms and grid spacing, which I use in most of my layouts.

Fonts

Fonts are a good example of the power of variables. Let’s look at headings first. With just one click, I can change the font family, font weight, line height, and text transforms for all my headings, as well as font sizes for desktop, tablet, and mobile. In this example, I’m using the Major Third and Minor Third typography scale.

Besides styling the Heading HTML tags (pink classes in Webflow), I also have dedicated classes (e.g., [Heading] [H1]). This is useful when you want a heading to be H1 in your HTML structure but have a style of H3 in your CSS. The cool thing about variables is that changes apply to both HTML Tags and CSS classes. I found this really speeds up my setup and also brings greater consistency.

A similar story are the main font settings.

Buttons

Button colors and font-weight are also set in variables. I was debating this, as you don’t see the button live when making color changes. What convinced me are hover styles, as it’s much easier to set them here in one place instead of in the style selector.

Forms

Forms let you set the border color, radius, and font style.

Icons

I also wanted a consistent and responsive way to manage my icons. In the spirit of less is more, I created only three icon sizes—small, medium, and large—and a size for every breakpoint.

Section Paddings

My sections have four vertical padding styles: large, regular, small, and none (this is the padding that separates one section from another). Again, they are defined for each breakpoint.

Containers

The containers come in three sizes: small, regular, and large. I also applied responsive horizontal padding to them and have a padding none option.

Spacers

The last set of elements I use are spacers. I’ve discovered that this spacing strategy is the most flexible for me. I’ve made my spacers responsive, so they are different sizes for each breakpoint. This helps me create visually balanced layouts.

What I learned building a design system

Building a design system was a great learning experience. I understand the compromises you need to make between flexibility and complexity. The more flexible you want your system to be, the more complex it becomes. So, it makes sense to start by defining what you’ll use your system for.

I’ve also learned a lot about Webflow variables and the extent to which you can stretch them. For instance, using font-weights and text-transforms in variations requires a bit of custom code since this variable type is not supported. Similarly, variables do not support breakpoints, so you have to create a dedicated variable for each breakpoint.

What’s next

I’ll be using this design system in my projects and iterating on it as time goes on. I want to stick to the principles I outlined initially and don’t want it to get bloated.

If you’re interested, you can preview and clone this design system. I’d love to hear your thoughts on how I can improve it.

Are you a Webflow freelancer? Subscribe if you haven’t already. I send new posts about growing a Webflow freelance business, tips and tricks for building in Webflow, and valuable tools every week.

+ Tom shares a special offer for the Flowletter audience to get fluidSEO for 1 month free.

Today, we talk about:

• What’s new with fluidSEO,

• What’s coming down the pike,

• The most common SEO mistakes Webflow devs make,

• The state of SEO and where’s it’s headed,

• And building apps in the Webflow marketplace.

Some takeaways:

• fluidSEO can help you expand your freelance business by providing ongoing SEO services to clients and creating retainer opportunities.

• While fluidSEO uses AI, Tom emphasized they don't want to market it as an "AI company." The focus is on providing value to customers by helping them do their SEO work faster and offer more to their own clients.

• fluidSEO has been one of the top apps in the Webflow marketplace in terms of users and installations, showing strong adoption since the marketplace launched 8 months ago.

• Building apps for the Webflow marketplace had some early challenges as the platform matured, but Tom thinks now is a great time for developers to build Webflow apps as many of the initial kinks have been worked out.

• Despite statements that "SEO is dead," Tom believes SEO fundamentals remain important even as the landscape evolves. Developers should focus on established best practices over chasing the latest "hot take" from influencers.

• For learning SEO, Tom recommends trusted resources like SEMrush Academy, Ahrefs, and Neil Patel's content. And now Tom also plans to publish Webflow-specific SEO guides soon.

Are you a Webflow freelancer? Subscribe if you haven’t already. I send new posts about growing a Webflow freelance business, tips and tricks for building in Webflow, and useful tools every week.

If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:

1. 12 Webflow typography tips

2. Design basics for non-designers

3. How to stand out as a Webflow developer?

4. What to discuss on your first client call?

My wife Viktoria and I used to have regular 9-to-5 jobs. But after we got married, we started dreaming of a future where we could be our own bosses and have more control over our time.

We were both tired of our current jobs, which involved endless meetings, office politics, and long hours working on things we didn’t find fulfilling.

I’ve been thinking about going solo for a while but never got the courage to do it.

It took my wife to finally convince me the time was right.

For many years, I’ve been fascinated by the indie hacking community, people building small SaaS products solo or in small teams, and making a living from them.

In fact, that’s how I got into Webflow in the first place, building side projects.

Unfortunately, none of them took off, in part because I didn’t have time between my full-time job and them.

That’s when my wife sat me down and we had the talk.

The–what’s your goal talk. I realized my goal was to do something where I could be in control of my time. To have more time for my family and friends and to travel. To build something that was ours.

For a while, I thought the way to do that was to have one of my side projects start making some money. But after talking to my wife I realized I could do that sooner. I could do it tomorrow in fact, if I started freelancing.

Of course, I’m still selling my time as a freelancer. But I can regulate how many clients I take on, and I can spend more time doing things I enjoy, traveling or working on side projects, like this newsletter, for instance.

So that brings me to fail number 1.

Fail 1: Not taking Webflow seriously sooner

As I mentioned, I had played around with Webflow in the past for some side projects. The thought of making a living as a Webflow developer crossed my mind, but I thought it would be a step back in my career. I started as a web developer, went on to launch a few startups, and eventually settled as a product manager.

I can now say that thinking of Webflow as a step back was just my ego holding me back.

Fortunately, Viktoria kept encouraging me to take another look at Webflow. She started learning HTML and CSS with the idea of using Webflow to build websites. When she brought me on to help with a project for a friend, I realized how much I enjoyed the process of building something from scratch and seeing it come to life.

That's when I started to see Webflow's potential as a business. There was a whole ecosystem of agencies, tool builders, and an active community. I realized my initial hesitation was just my own pride getting in the way.

The lesson is to not worry about what others think of you. Do things that bring you joy, and the rest will follow.

Fail 2: Trying to skip a few steps ahead

We decided to go all-in on Webflow. Eager to grow, we invested in Google Ads and other paid channels, thinking we could quickly generate a steady stream of leads and convert them into paying customers. 

Turns out ads are expensive and a no-name agency is unlikely to convince strangers. 

We learned another lesson - don’t try to skip steps in your growth. There are no hacks or shortcuts, just hard work and perseverance. 

What got us our first clients was reaching out to our network.

I wrote to all my friends who ran a business or were part of one to let them know we could design and develop websites. I would post it on all my social media. I would talk about it any chance I got.

We got our first client as a referral from a friend, and things took off from there.  

Fail 3: Making a customer happy at any cost

Not everything was smooth sailing, though. We made some mistakes early on, like taking on a web application project that was beyond the client's budget. We reasoned that if we could pull it off, it would be a great addition to our portfolio and would broaden our capabilities as a Webflow agency. 

As you might have guessed, that wasn’t the case.

In an effort to please the client, we shot ourselves in the foot and ended up working nights and weekends to deliver. That’s not what we had in mind when we quit our 9-5. 

We did learn a ton of new Webflow skills, but as a freelancer, your most valuable resource is your time, and we failed to get compensated for it.

Lesson learned: being honest and firm in the scoping and price negotiations of a project is key to a healthy client relationship. 

What we did right

Picking a business model that suits us

One of the things we got right was our business model. I freelanced early in my career and made a beginner’s mistake with my payment conditions, asking for no money upfront. 

I knew that this time, I wanted to de-risk our ability to get paid. We’ve seen others use a subscription-based model, and we decided to give it a try. 

This model has a few advantages. We can start working almost instantly and don’t have to quote projects. We get paid upfront. Our clients are engaged and our projects move along fast. 

To be clear, this approach does have disadvantages. Not all clients are comfortable with paying upfront. It’s not typical recurring revenue, and we still need to find new clients, as most clients only spend a few months with us. But we do have a few clients that have been with us for over a year.

This model suits us well. We like how easy it is to start a new project, and we enjoy working with our long-term customers. It might not be for everyone, but it fits us well. 

Overdelivering

Another thing we really focused on getting right was delivering exceptional value for our clients. We treat every project, no matter the size, as an opportunity to go above and beyond.

Even for a relatively small $2,000 website build, we put in the same level of care and attention as we would for a $6,000 project. We listen closely to the client's needs, get to know their business inside and out, and brainstorm creative ways to make their website work harder for them.

It's all about empathy and putting ourselves in the client's shoes. We know their website is a crucial part of their business, so we approach each project with that level of importance.

Being active in the community

We're active participants on the Webflow Discourse forums, the Webflow subreddit, and various Webflow-focused Facebook groups. We don't just lurk and observe - we jump in, ask questions, and share our own insights and experiences.

This community engagement has been invaluable for our business. 

We've connected with other freelancers and agency owners who are willing to share their tips, tricks, and lessons learned. It's amazing how generous the Webflow community is with their knowledge.

Keep an open mind

It's been a rollercoaster journey, but building our Webflow agency has been incredibly rewarding. We're now making a little over $10k per month, and most importantly, we're in control of our time. 

If you're considering starting your own Webflow business, I'd say keep an open mind, learn from your mistakes, and stay true to your principles.

Are you a Webflow freelancer? Subscribe, if you haven’t already. I send new posts about growing a Webflow freelance business, tips, and tricks for building in Webflow, and useful tools every week.

–Ondrej

It’s a place for open conversation about being a Webflow freelancer, growing a business, and enjoying creativity.

If you’re not subscribed, here’s what you missed in the past weeks:

1. 12 Webflow typography tips

2. Design basics for non-designers

3. How to stand out as a Webflow developer?

4. What to discuss on your first client call?

This week, I talked to Tim Preut from Tickyboom Design about his creative journey, which took him from music to branding and eventually to discovering Webflow and running his own freelance practice.

Tim has been a Webflow freelancer for 3 years. He now runs a solo design agency and specializes in branding and adds Webflow as his main tool for web development and experience design.

Here are the highlights:

1. Purpose over profit: why Tim prioritizes purpose over profit when picking clients and what he gets out of it.

2. Setting boundaries: how to avoid scope creep by setting clear boundaries.

3. Framer vs. Webflow: when to use which and why.

4. Pricing project: how to use pricing calculators to streamline your pricing.

5. What he’d do differently: focus more on brand and business strategy.

6. YouTube tutorials: how to use this as a marketing channel and a way to meet new people.

For more from Tim, check out his portfolio, LinkedIn, Webflow profile, and YouTube channel.

On Getting Started with Webflow

Q: How did you first get interested in web design/development?

As a kid, I was always fascinated by the idea of building things from scratch, creating something entirely new. When I first discovered the web, it immediately piqued my interest.

I actually got started using a platform called Bandzoogle, which was specifically designed for musicians back in the day. They provided a bunch of templates, and since I was a musician when I first started doing art, I needed a way to post my music and share a bit of my story.

Using Bandzoogle, I found it really interesting that I could manipulate templates and play around with fonts. It was like building a digital house, and I was hooked! The whole process of creating something unique and putting it out there for the world to see was just so cool to me. That's how my journey into web design and development began, and I've been passionate about it ever since.

Q: What drew you specifically to Webflow?

When I first started taking building websites seriously and decided to go out on my own, WordPress was essentially the only game in town that I could utilize.

Part of my business was branding, and the other part was web design. While WordPress did provide some good income with clients initially, I found it frustrating that I couldn't truly bring my creations to life. Sometimes I could accomplish the basic design in WordPress, but I struggled with interactions and taking a web design to the next level.

I did a lot of searching and even tried add-ons like Oxygen as a page builder for WordPress. I liked Oxygen quite a bit, but there was always something missing. That's when I discovered Webflow. It was like a breath of fresh air! Webflow allowed me to create designs exactly as I envisioned them, without the limitations I faced with WordPress.

Q: Are you using other platforms? If so, why? How do you choose between them?

The only other platform I use besides Webflow is Framer. Framer is pretty wonderful because of the way they handle components. Components in Framer really kind of act like different frames within Figma, and I find that I can create really, really rich interactions with it. You can do the same with Webflow, but their component handling, to be quite honest, is not good at all. However, you can still create amazing interactions with Webflow; it just takes a lot more work.

Sometimes, if I'm trying to do a simple website, like a one-pager or something similar, I'll be tempted to use Framer. The drawbacks of Framer, though, are that it doesn't have fluid units for things like type and paddings. You can't do negative margins in Framer unless you resort to some wizardry, and it's pretty challenging to do things like overlapping elements.

So, Framer is really for kind of simple design flex websites that have relatively simple designs, but you can really flex on the interactions a lot. Webflow, on the other hand, is my primary workhorse. It's the platform I rely on for the vast majority of my projects, thanks to its versatility and robustness.

Running a freelance business

Q: What types of clients do you primarily work with (size, industries, niches, etc.)?

I usually gravitate towards what I like to call visionaries or do-gooders. These are essentially businesses or makers who are purpose-driven. They're not driven by the sole goal of making money; instead, they make money because they're driven to solve a particular problem. I know it sounds pretty general and broad, but you'd be surprised how many people don't fit this archetype.

I also tend to work with clients who definitely understand design and its true power. A lot of times, people don't fully grasp the importance of design, and they kind of dismiss it as the magic X factor that they actually need to succeed with their business. It's a shame, really, because design can make or break a product or service.

In terms of industries, I've been working a lot with startups lately, particularly in the realm of product design. I've been doing a ton of product and app design for tech startups, and it's been a blast! There's something about the fast-paced, innovative nature of the tech industry that really resonates with me. The people in this space seem to have a deep appreciation for the value of good design, and they're always pushing the boundaries of what's possible.

Q: What is your process like for onboarding new clients?

The onboarding process involves two steps. First, there is a 10-minute discovery call to determine if we are a good fit for each other. The client shares their story, the problems they face, and the solutions they need. After that, I explain my working process and discuss the budget to ensure the client has the resources for the project.

If they decide to move forward, we go through administrative tasks like signing agreements. Then the client is onboarded into a project management system, typically Asana, to track tasks and projects. However, I’m flexible to use the client's preferred system if I’m familiar with it.

Learnings and failures

Q: What was the biggest hurdle or challenge when you were first starting out as a Webflow freelancer?

I don't consider myself primarily a Webflow freelancer. Webflow is just one tool I use to solve problems like building websites and crafting digital experiences. The biggest hurdle when I started was learning Webflow itself. Learning a new tool takes time and practice to build proficiency.

The biggest challenge was taking the time to really learn Webflow and ensure my skills were strong enough to deliver quality work. As a freelancer, time is money, so it can be difficult to find time to learn something new, like Webflow when you're already juggling client projects. However, learning Webflow was worth the investment. With dedication and practice, it's doable to master the tool. Seeing the final product and satisfied clients after putting in the hard work makes the effort worthwhile.

Q: How do you handle scope creep or difficult clients who want extra unpaid work?

It's simple: they're not going to get it. If they want additional work, they have to pay for it.

From the very beginning, the client and I sit down and iron out every detail of the project scope until it's crystal clear. The client then approves the scope by signing the agreement, which spells out the scope in black and white. It's like a sacred contract between us.

If the client later comes to me with something outside of that scope, they need to be ready to pay for it. It will either be charged at an hourly rate or added to the project rate, depending on the size of the request. That extra work won't happen until the client agrees to pay for it.

Sometimes, I'll provide the terms in an invoice, and if they pay it, they're essentially agreeing to the terms. Other times, for more significant changes, we might need to create an addendum to the original agreement.

The bottom line is that there will be no scope creep and no unpaid extra work. I value my time and skills, and I expect my clients to do the same. It's about setting boundaries and protecting yourself as a freelancer. By being clear about the scope from the start and having a plan for handling additional requests, you set yourself up for success and ensure fair compensation for your hard work.

Q: What are your best practices for pricing your Webflow freelance services competitively?

I've tried numerous strategies. Here are some best practices I've learned:

1. First, keeping track of my hours is crucial. I need to know how long it takes me to build different types of sites, whether it's a large project or a simple one-page site. This helps me estimate my time accurately.

2. If I decide to use a retainer model, I make sure to inform the client upfront that there's a possibility of going over the allotted hours. I let them know the rate for those extra hours in advance to maintain transparency.

3. For project-based pricing, I use a tool called Instaprice by SuperCreative. It's like having a pricing wizard that uses recent data to provide pricing breakdowns for different parts of each project. If a client wants an itemized breakdown of the project cost, I can quickly generate one using Instaprice.

Pricing is both an art and a science. It's about finding the balance between valuing your time and expertise while remaining competitive in the market.

Q: For those thinking about going full-time freelance with Webflow, what should they really prepare themselves for?

1. Mystery

2. Being in an incredibly saturated market

3. Making connections and nurturing those connections by playing the long game

4. Doing personal projects to level up skills and build a portfolio

5. Learning, adapting

6. Adopting new technology or building in different ways

7. Be prepared to live off savings for a bit

Q: If you had to start from scratch, what would you do differently?

1. Do all of my strategy and written content first. Not touching design or anything visual until I fully had a strategy and content for my brand written.

2. Have my basic processes in place. What will I use for invoices, agreements, and proposals? What is my onboarding process?

Q: You’ve tried your hand at YouTube. What are your learnings?

I am learning that doing tutorials can be really helpful to your community and open up opportunities to meet new people. It also gives you a chance to get feedback from your community on what they would like to learn, or if you can do what you taught even better.

Another aspect that is important is for my business it is a channel for marketing, and a powerful one at that. Your potential audience will see you in action, see a bit of your personality, and see that you are an educator which is huge in establishing trust and being vetted.

Also, I love the idea of giving a lot of value for free, putting action to my words of wanting to make our world a better place, even if it is just a little better.

Thank you Tim for talking to me!

💬 If you have questions for Tim, drop them in the comments below 👇

If you’d like to be showcased in the next Member Spotlight, subscribe and drop me a line.

Are you a Webflow freelancer? Subscribe, if you haven’t already. I send new posts about growing a Webflow freelance business, tips, and tricks for building in Webflow, and useful tools every week.

–Ondrej

Here are 11 tips I use in my Webflow design and development to make sure my typography is always on point.

1. Use a typography scale to calculate your font sizes

There are a few popular typography scales (Minor Third, Major Third, Golden Ratio, etc.) that help you calculate your font sizes from paragraph to H1. I like to use them because it takes the guesswork out of picking the correct font size.

My favorite calculator is Typescale. It gives me a preview of the fonts on a dummy landing page and blog post on both desktop and mobile.

Here’s how I use it to pick my typography scale.

2. Try Fluid Responsive

Fluid responsive fonts scale with the size of the browser window. This allows you to create designs that look consistent across all window sizes. You’ll need to use a bit of custom code to do this, but the end result is well worth it.

If you’re using Finsweet’s client first, you can enable Fluid Responsive using the Finsweet browser extension.

If you want a generic solution, I recommend using También’s Fluid Setup, which generates responsive fonts for you.

Here’s a tutorial to set this up:

3. Set your default font on the body tag

Font settings are inherited from parent elements. This means you can set the default font size on the body tag, which will update all your fonts on your website (unless a specific font has been assigned to a class).

To do this, click on your Body element in the Navigator, go to the Style selector, and select Body (All Pages). Now, set your page's default font and font size.

4. Use CH units to make your paragraphs more readable

According to Smashing Magazine, the ideal line length for paragraph text is between 45 - 85 characters, with the optimum being 60 characters per line.

The cool thing is that you can set this in your CSS settings right in Webflow using CH (character) units.

5. Use text wrapping to better align your text

You can use a custom CSS property called text-wrap with the value balance to align your text in a more balanced way. Look at this example:

If you have a long string of characters (like a long URL), your text might start to overflow on mobile or in smaller containers. To fix this use Wrap: Anywhere

6. Set your line height to 150% of the font size

Again, referring to Smashing Magazine, the ideal line heigh for paragraphs is 150%. You can experiment with this based on your design. However it’s not recommended to go under 130%.

7. Use REMs for your typography

To improve accessibility of your website use REMs (Relative EMs). This unit is relative to the font size set in your user’s browser settings. The default is 16px. If the user has a reading impediment and sets a larger font size, your website fonts will automatically scale for them.

8. Don’t center-align long paragraphs

Center-aligned text makes it hard to read because there isn’t a clean line on the left for the eye to follow. Always left-align longer paragraphs (like 4 or more lines).

9. Check your color contrast

Poor color contrast makes your text hard to read and makes it impossible to read for people with visual disabilities. Webflow has a built-in contrast checker you can always reference when placing text over a colored background or using lighter text color.

If you’re designing in Figma, you can use the A11y plugin or check your color manually using an online contrast checker.

10. Take it easy with text-decoration

Two things to keep in mind here:

• Underlines should be reserved for links.

• All caps make text harder to read and screen readers read individual letters instead of words.

So make sure your underlines don’t confuse visitors and use all-caps sparingly.

11. Experiment with font pairings

Font pairings can add creativity to your design. If they work it’s like pairing the right wine with the right cheese. However, you can easily go wrong here, especially if you pick odd fonts.

A good place to start exploring font pairings is Fontpair, a collection of popular Google Font pairings.

You can also use Fontjoy to generate font pairings based on the contrast you want to achieve.

12. Self-host all your fonts

I previously ran a speed comparison between using Google Fonts directly in the Webflow font selector and self-hosting them. I was able to lower the First Contentful Paint from 4.1s to 3.8s and the Largest Contentful Paint from 5.7s to 5.1s.

This can improve your SEO.

To self host your fonts, upload them in the Font settings of your project. For Google Fonts, you can use the Google Webfonts Helper to download the font files.

If you want to learn more about other SEO improvements check out my guide on boosting Webflow SEO.

Thanks for reading and see you next week!

—Ondrej

Subscribe now

Thank you for subscribing and taking the time out of your busy days to skim or read what I write.

If you find Flowletter valuable, share it with a friend who is also into Webflow or web development in general.

Share Ondrej’s Flowletter

I’ve never had a formal design education.

The designs I create result from observing and copying patterns from websites I subjectively consider well-designed. Over the years, I’ve learned to differentiate between great and average design. However, I’ve never been able to define it.

I’ve recently found a 20-year-old book that gave me the vocabulary necessary to articulate what I like about a design.

I recommend reading Robin Williams's Non-Designer’s Design Book (Design and Typography Principles for the Visual Novices). This short book can be read in a couple of days.

I’ve distilled the core learnings and brought in examples from 2024; some of William’s examples are a trip down memory lane 🙂

Why bother?

In his opening, Willimas writes:

Once you can name something, you're conscious of it. You have power over it. You own it. You're in control.

Being consciously aware of the principles of great design will give you mastery over them. And, later, as Willimas writes, it will allow you to start breaking the rules and creating unique designs that will look great in your portfolio or, dare I say, on Awwwards.com (ok, ok, I’m getting cocky here).

What makes great visual design?

First, let’s get something out of the way: design ≠ art.

A common misconception that took me a while to understand. Great web designers are not artists. They are craftswomen and craftsmen who have mastered design principles and apply them to communicate a message in the clearest way possible.

Design is a means to an end, a utility. It can drive conversions, increase engagement, lower churn, rally people around an idea or a mission, etc.

Great design has clear rules, and if you apply them, you, too, will create great design.

Williams writes:

Good Design Is As Easy as 1-2-3

1. Learn the principles.
They're simpler than you might think.

2. Recognize when you're not using them.
Put it into words -- name the problem.

3. Apply the principles.
You'll be amazed.

Great design is CRAP

The four basic principles behind each great design are contrast, repetition, alignment, and proximity.

These principles are based on Gestalt psychology and the theory of perception.

Let’s explore them together.

Contrast

Williams explains the principle of contrast is to create visual interest and direct the viewer's attention within a design.

You do this by differentiating between two or more elements using form, color, size, or other visual properties.

Without some degree of contrast, a design will appear flat, dull, and monotonous. Strategically using contrasting elements can highlight the most important information, establish hierarchy and flow, and make the overall composition more dynamic and engaging.

But you can’t be a wimp, as Williams puts it:

Contrast is created when two elements are different. If the two elements are sort of different, but not really, then you don’t have contrast, you have conflict. That’s the key–the principle of contrast states that if two items are not exactly the same, then make them different. Really different….

But don’t be a wimp. You cannot contrast 12-point type with 14-point type. You cannot contrast a half-point rule with a one-point rule. You cannot contrast dark brown with black. Get serious.

Let’s take a look at this example:

The text on the left has no contrast. It’s flat. As a result, it’s hard for the reader to identify the title, the content, and the meta information. Compare this to the text on the right. The title is significantly larger than the text. The meta information uses a lighter color.

This contrast guides the human eye from title → text → meta information.

Now, let’s look at contrast in the real world. Here’s how Campfire masters contrast to elevate a simple design.

Notice a few things:

• The heading is large and stands out.

• The sub-heading is significantly smaller.

• The paragraph is smaller yet, plus it uses a very light blue color instead of the white used in the heading and sub-heading for even better contrast.

• Similarly, the navigation uses a light blue to the same effect.

• The image has a blue overlay, again bringing the contrast down and allowing the text to stand out.

• On the other hand, the call to action is in absolute contrast with the rest of the website since it’s the action we want our visitors to take.

Repetition

The repetition principle is about repeating some aspects of your design to create a visual language that conveys some information to the viewer.

Most likely, you already practice repetition in your designs. If all your H2s are the same size, you’ve got repetition.

But Willimas challenges us to take repetition to the next level. Create repetition in less obvious places and thus codify a visual language unique to your design.

Repetition can be thought of as “consitency.“ As you look through an eight page newsletter, it is the repetition of certain elements, their consitency, that makes each of those eight pages appear to belong to the same newsletter.

So, what does that look like in practice?

Look at how Atoms uses pattern and background repetition to tie the page together. The irregular squares are repeated in different page sections to emphasize the screenshots and icons. Similarly, the brown background is repeated in every other section to bring rhythm to the website.

Or take a look at Alejandro’s Mejias portfolio, where he uses the unique FK Raster Grotesk font to create visual repetition. He then designs the arrows to match the font, bringing it all home visually.

You can, of course, overdo it with repetition. If you do, it will contradict the previous principle of contrast, and your designs will be flat.

Alignment

Alignment means that nothing on the page is placed arbitrarily. Everything has a visual connection with something else. The easiest way to achieve alignment in web design is to use Grids.

Alignment is also about consistency in spacing. See how Welcomessage.io uses two padding sizes for most of the hero layout. You can have different spacings throughout your design, but keeping them consistent takes your design from arbitrary to thought out.

Proximity

The last principle of our CRAP rules is proximity. You can use proximity to communicate the relation between elements in your design.

If some elements are in close proximity, they become a visual unit. This means that elements that relate to each other should be grouped.

Let’s look at a few examples of proximity in action.

Here’s Screen.studio’s website. The title and the corresponding paragraph are visually closer and thus grouped. Individual groups are spaced out. It’s clear to differentiate one feature from the other.

Givingli’s website uses a bento grid design to showcase its features. This is a great layout that allows you to visually define the box for one feature and differentiate it from the other features. The proximity here is not only determined by physically being closer but also by having a colored background.

Breaking the rules

Now that you know the four basic principles of great design, you can start breaking them.

That’s the great thing about design. It’s not math. You can go outside of your grid. You can have different text sizes of your headings across your pages. You can disrupt repetition by introducing a completely new element. The options are limitless.

But, because you now know what levers you are pulling, you know what the effect of pulling them will be, and you can judge for yourself if it still works and achieves your design goals.

Final notes

Improve your taste.

I spend a lot of time observing the work of other (better) designers. Because I now know design principles, I look at them differently. I see what the designer’s intention was when they were creating it.

I also observe new layouts, color schemes, illustrations, etc., which broadens my palette and helps me stay relevant.

Here are some of my favorite websites to get inspiration from:

• One page love

• Bento grids

• Site Inspire

• Landingfolio

• Commerce Cream

• Best Website Gallery

Browse through them when you’re drinking coffee in the morning, and you’ll see your designs improve.

—Ondrej

💌 Forward this to a friend

Share this post on your social media or with a friend who could find this helpful. Thanks 🙏

Share

I wanted to take the time and welcome the 🎉 17 new subscribers that we’ve added over the past week. Having new people join motivates me to write my best.

If you’re not subscribed, here’s what you missed in the past weeks:

1. What to discuss on your first client call?

2. How I got my first Webflow client and how you can, too

3. How to boost Webflow SEO

   Subscribe now

This question popped up on r/Webflow a few weeks ago, and it made me think about how I’m positioning myself as a Webflow developer.

While I’m still very early in my journey, I’m starting to see patterns in the clients I can attract and, more importantly, in the projects I enjoy working on.

What do I mean by standing out?

As Webflow grows in popularity, so does the number of developers offering their services. It’s a trend that (hopefully) won’t stop anytime soon.

For a while now, I’ve asked myself how I will stand out in this crowd, differentiate my offer, and find a niche that I enjoy and that brings me a steady inflow of clients.

This post explores what I and other Webflowers are doing to stand out.

Learn to overcome common Webflow limitations

Even though Webflow is an advanced builder, it has limitations. Early in my journey, I built a resource website as a personal project. I wanted to let users filter resources by category. You need a third-party integration, like Finsweet’s Filter attribute or Jetboost.

The other day, I had to manipulate the slideshow element so that my slideshow would start in the middle rather than with the first slide. Again, this required custom code.

The good news is that Webflow has a fantastic community. Its official forum is packed with step-by-step guides and troubleshooting for almost anything.

So the lesson here is to learn how to do things that are not possible with Webflow out of the box. It’s your first step in setting yourself apart from the competition.

Productivity

Another thing I focus on is shipping high-quality projects relatively quickly. I’ve adopted Relume’s component library, and all my projects now use Webflow variables. I also use the Client-First class system.

I’ve previously written about Webflow productivity, so I won’t go into a lot of detail here. My point is that I’m adopting systems to match the best in the industry in delivery time and quality.

Industry specialization

I’m still a generalist, but I’ve been considering the benefits of targeting a specific industry (like SaaS startups, real estate agents, restaurant businesses, etc.).

Look at Amply, a Webflow agency specializing in high-growth B2B clients.

Here’s why I think this approach makes sense. When you address clients in your niche, you:

• know what their most common challenges are (i.e., for B2B clients, it could be generating and closing leads, retention, etc.),

• know how to address them, plus you’ll have a track record to back this up,

• speak the language of your clients, and you can use it to customize your marketing copy (i.e., operating with words like retention, LTV, CAC, etc., shows you know the B2B world and its challenges).

I’ve been a product manager in SaaS and B2B tech startups. I know what these clients want from a website, and I can run user research to validate messaging with their end customers.

I also know a few selling points that might convince them. For example, in the case of tech companies, an important selling point is that their engineering team doesn’t have to spend time building landing pages and can focus on the product.

I already have a few clients in this space, so I can see a future where my agency focuses only on this niche.

The Finsweet podcast has a great episode on this, and I want to highlight a few learnings here:

• Joe Krug from Finsweet says they’ve gone in and out of niches. They started as generalists, niched down, and then returned to no niche. So, this can be a fluid process, and you don’t have to feel like you’re committing yourself to life.

• Not everyone has to pick a niche to start. It’s an important point. You could argue that Webflow is a niche in its own right. It’s not the industry standard web builder and a fraction of the overall web development market. So, being a Webflow agency might be niche enough, especially in places where Webflow is not so popular.

• Make sure you can reach out to enough clients within a niche to sustain yourself. It takes energy to specialize all your messaging to a niche. If that niche is too small, you’ll have to redo it again when you saturate it. So, pick an area where you can grow.

• You need to have at least some experience in the niche.

Flavors of Webflow development

Another way to stand out is to focus on specific flavors of Webflow development, such as web apps, animation-heavy websites, content-heavy websites, etc.

Finsweet only does Webflow development; they don’t do any design. Or take Black Peak, a Webflow agency that only builds web apps using Wized and Xano.

Or Psychoactive Studios, which focuses on building interactive experiences using WebGL.

I’ve built web apps using Webflow, Memberstack, Make, and Airtable. It was a lot of fun to create something where you could input data and then store it in a database. I learned how to manipulate JSON files and save them into a user’s Memberstack profile, how to write a custom API call to Twitter, and more.

At the very least, this has enabled me to offer advanced integrations to my clients using Make or Zapier (like a marketing automation connecting their Webflow site to MailChimp).

While I don’t know if I’ll ever be exclusively focused on building web apps, exploring this avenue has given me many skills that set me apart when developing ‘standard‘ webpages with Webflow.

Complementary Skills

Another way to approach differentiation is to add complementary skills. For example, expertise in SEO, content strategy, digital marketing, 3D design, etc., can set you apart and save your client form having to hire another agency.

Over the years, I’ve acquired basic SEO knowledge. While I’m no expert, I’ve done keyword research, optimized Webflow websites for SEO, and written content that ranked.

I consult my clients on SEO and give them pointers on their content. They appreciate it and give me good references. To be clear, once we get to a more advanced level, I always direct them to an SEO expert.

Another thing you can do is add complementary platforms to your portfolio of services.

I’ve recently started offering Shopify store setups to some of my clients who want a basic design and a lot of e-commerce functionality. I don’t know yet where this will lead me, but I see the demand in our local market, and I’m exploring it.

Business model

I’ve got a subscription-based model, where I offer my services for a flat monthly fee. While I also offer more traditional hourly packages, subscriptions account for most of my clients. This model is different, and my clients appreciate a few things about it:

• I can get started right away; there’s no lengthy project scoping taking place.

• Some of my clients are marketing freelancers themselves, and this model allows them to add a new competency (web development) to their portfolio by forwarding the work to me. They are in charge of communicating with the end client, and I’m in charge of the build. I’ve got one long-term relationship here that’s now running for over a year.

• Clients have flexibility and can pause or cancel at any time. For instance, projects with an open scope can be paused if business priorities shift.

I’ve seen a lot of debate online on the pros and cons of this model. I’ll be the first to say that this model is not for everyone. I do have potential clients who don’t hire me because of it. But for now, I’ve got enough clients who see the benefits.

I’ll also say that I may be leaving money on the table by not scoping projects. For now, the ability to get going with projects and the safety of being paid upfront for my work outweigh the downsides.

Content Creation

It might be evident from the newsletter you’re subscribed to, or you’ll be subscribed to right after finishing this read, wink-wink 😉, but I’m investing time into building a community through content.

Subscribe now

I hope this content will show my competency in Webflow to my future clients and again set me apart from the competition.

A portfolio that stands out

I don’t remember where I heard this, but a design portfolio is not about being loud but about being specific.

Show your own strengths instead of building an interaction-heavy portfolio just like everyone else. Unless your specialty is interactions, in which case, go for it.

The point is that your portfolio should be a reflection of your specialization.

I’ll be the first to admit that my portfolio is not that. In fact, I don’t even have a proper portfolio; I have a few screenshots. So, this is something I’ll be working on in the future.

I haven’t moved on with this because I don’t know the answer to my specialization. I’m still exploring, and I think that’s okay. I’ve only been doing this professionally for the past year.

That’s it from me for this week. I hope you’ve learned something new. If you agree or disagree or are doing something else to specialize yourself, share it in the comments, and help us all grow together.

–Ondrej

💌 Forward this to a friend

Share this post on your social media or with a friend who could find this helpful. Thanks 🙏

Share

If you want to make my day, share this post on your social media or with a friend who could find this helpful. Thanks 🙏

If you’re not subscribed, here’s what you missed in the past weeks:

1. How to boost Webflow SEO

2. How I got my first Webflow client and how you can, too

3. How I’ve improved my Webflow productivity

Subscribe now

All my projects that went wrong had one thing in common—a poor understanding of client's needs.

For a while now, I’ve prioritized nailing the first client call. I use it to understand their business, website goals, and must-have requirements.

I thought it would be a good idea to dive into my approach to running introductory calls.

While researching this article, I collected some fantastic advice from other Webflowers. I’m sharing it here and will use it to improve my process.

Get to know the person

Your first call is a sales call. The client is vetting you both professionally and trying to understand who you are.

Can they trust you? Will they enjoy working with you?

That’s why I try to be myself on these calls. I might start by simply asking them about their day and being empathetic to what they share—in other words, to be human.

If we know people in common, I highlight that. If there are relevant stories from previous projects, I share them.

All this builds trust. Getting to know the person on the other end will set you up for success.

Understanding the client

Clients will come to you simply asking for a website or an online store. However, by digging deeper, you can uncover more about their business and what they truly need from a web project.

Rather than just taking their initial request at face value, I use this first conversation to understand their company, target customers, and business goals.

Here are questions that work for me:

Getting to know their business

• What industries do you operate in? What niche do you specialize in? How long have you been around?

• Can you walk me through a typical customer journey - how do people usually find and engage with your products/services?

• Who are your main competitors? How do you differ from them? Why do clients choose your services/products over your competition?

• What does your business look like in the near future? What does it look like in the next 5 years? Are you anticipating any significant shifts in your business?

Use what you learn to upsell

Look at how Alex Socoloff was able to upsell his client from $2000 to $7000 based on the information he gathered by asking the right questions.

Alex writes further down in his thread:

He uses the information he’s gathered about business needs to offer them other services they might not have realized they needed.

Often, clients come to me asking for a new website in hopes of driving more traffic. This is an excellent example of misaligned requirements.

A website redesign often has minimal impact on traffic. Improving SEO and setting up a content strategy can have a far bigger impact. If these services are in your purview, you can upsell them and generate more revenue from a single client.

Visual communication

Another thing I found helpful is creating a moodboard/inspiration board.

Clients often have difficulty describing their wants, and details can get ‘lost in translation‘.

That’s why I rely on the old show-and-tell.

I ask the client to show me what they mean by pointing me to another website, or I find websites that illustrate what they mean and have the client confirm if that’s the case. This approach allows me to uncover details and saves me a ton of back and forth.

Scoping the Project

Now, let’s look at how we can use the information you gathered in the first step to scope the project.

When I first started, I would scope projects simply by counting the number of pages needed for a website. However, I quickly realized that this approach was overly simplistic and didn't account for the full complexity of a build.

Over time, I've learned to dig deeper and consider other factors, such as integrations with external apps (MailChimp or Airtable, etc.), understanding the visual complexity and interactive elements (this is where a moodboard comes in handy), and whether the site will use CMS or not.

Here are questions that help me scope the project:

Understanding project goals

• What primary goals are you hoping to achieve with this new website/web project?

• How will you measure the success of this project - is it increased sales, lead generation, improved brand awareness, etc.?

• Who are the key target audiences you're trying to reach, and what are their main needs or pain points?

• Are there any specific features, functionality, or integrations that are must-haves for this project?

• What are your long-term plans for the website, and how should we design it to accommodate future growth?

Giving clients options

For clients whose budget does not match their requirements, I usually give them two options - a more basic, lower-cost version and a higher-value, comprehensive solution.

I communicate the benefits of the higher-tier offering and how it aligns with their key objectives. My experience is that 80% of clients will opt for the more robust solution when you demonstrate the value.

Be honest in your assessments

Riley Hennigh makes a great point: don’t sell things that won’t help your client because they might make you more money in the short term. This approach kills any trust in a long-term relationship.

Setting Expectations

During our first call, I thoroughly discuss the project timeline and critical deadlines with clients.

You don’t have to commit to deadlines right on the call, but it’s important to ask your clients the right questions to understand their expectations.

Setting expectations

• What is your ideal timeline for this project? Do you have any hard deadlines we need to work towards?

• Who else on your team will need to be involved? What is your availability like for providing feedback and approvals throughout the project? What is your preferred method (email, Slack, etc.)?

• Are there any blackout periods or times you'll be unavailable that we should plan around?

• What content and materials will you be responsible for providing? Do you have those ready, or will you need time to get them together?

• Are there any dependencies on your end, such as integrating with other systems or platforms, that could impact the timeline?

As I review these questions, I help the client understand how their answers influence the project timeline. It gives my clients clarity and can motivate them to adjust their workflow to speed things up.

Expectations around client delays

A pretty important aspect of setting expectations is discussing delays caused by the client.

As a freelancer, I can't put all my other work on hold if a client causes a project to exceed the original timeline.

I've found it important to explain this reality upfront. I let clients know that if they are responsible for delays, I must prioritize my other active projects before returning to theirs.

Contractual Agreements

Having what we agreed on in writing helps clarify things and benefits me in the long run.

It starts with a scope of work document that clearly outlines exactly what I will be delivering. Anything outside that agreed-upon scope would be considered additional work, subject to further discussion and fees.

Beyond the scope, the contract should cover key terms like payment schedules, milestones, and what happens if deadlines are missed.

Here’s what’s in my contracts

• Scope of work - Clearly outline exactly what is included in the project

• Timeline and deadlines - Specify the project start date, key milestones, and final delivery date

• Payment terms - Outline the schedule of payments, any deposits required, and late payment policies

• Revision policy - Define the number of revisions included and how additional changes will be handled

• Intellectual property rights - Clarify who owns the final work product and any source files

• Termination clause - Specify the conditions under which either party can terminate the contract

• Liability and warranties - Outline responsibilities and limits of liability for both parties

• Dispute resolution - Specify how disagreements will be handled, such as through mediation

• Force majeure - Describe how delays due to uncontrollable events will be addressed

• Handling delays - Explain how delays caused by the client will impact your availability

Bringing it home with a template

I got this idea from Darragh Lynch, who uses a workshop board with sections and questions to drive his intro call.

So, I decided to create a similar board using FigJam and share it with you.

Get the board, customize it to fit your needs, and have fun on your next intro client call.

Get the free Ace your Webflow Intro Call FigJam Board

Final notes

The intro call might be a series of calls for you, and that’s ok. Not all of this information needs to be discussed all at once.

You should adjust the process to fit your workflow. There’s no one-size-fits-all here. Treat this advice as a starting point.

I know it’s easier said than done, but hopefully, you’ll start enjoying these calls with time. What’s helped me is being curious. People love to discuss their challenges and will open up to you, leading to a lasting client relationship.

That’s it from me; I wish you good luck on your next client call!

–Ondrej

💌 Forward this to a friend

If you want to make my day, share this post on your social media or with a friend who could find this helpful. Thanks 🙏

Share

👋 Hi all! Ondrej here! Over the past week, we’ve added 🎉 17 new people to our little Webflow freelance community. I wanted to take the time to welcome you all here. Having new people join motivates me to bring you better content.

If you want to make my day, share this post on your social media or with a friend who could find this helpful. Thanks 🙏

If you’re not subscribed, here’s what you missed in the past weeks:

1. How to boost Webflow SEO

2. How I got my first Webflow client and how you can, too

3. How I’ve improved my Webflow productivity

Subscribe now

Have you adopted AI in your Webflow development process yet?

I’m actively playing with different AI tools in Webflow. While it’s all very new, and a lot of it is gimmicky, there are already places where it’s become an indispensable tool for me.

4 ways I use AI & Webflow today

1. Generating sitemaps and wireframes with AI

Relume’s AI website builder lets me input a prompt and generate a sitemap with an outline for each page. From there, it creates wireframes for each page, leveraging Relume’s vast component library.

This is the closest I’ve come to having AI build a website for me in Webflow.

To be clear, you still have to design the page, but thanks to Relume’s configurable style guide, getting an initial version up and running is effortless.

2. AI-powered SEO optimization

My new favorite Webflow app is FluidSEO. It does a few things:

Smart Alt Text

Smart Alt Text lets me set alt text for all images in my project from one place. It’s smart because you can use AI to generate the alt text.

It mostly gets the description right, but sometimes it generates hilarious things, like “A computer screen with a woman’s teeth on it. “ It still saves me a ton of time.

Smart SEO Boost

Smart SEO Boost uses AI to generate page titles and descriptions from a few keywords you input.

Another non-AI feature is Schema, which is an easy way to generate Schema custom scripts so your page shows up in Google’s rich snippets. If you don’t know about Schema, read my article on improving your Webflow SEO.

3. AI-generated custom code in Webflow

I’ve built Webflow sites that relied heavily on custom code, and I can’t imagine doing it without Slater.

Rather than hosting and managing custom code scattered across multiple pages in Webflow, Slater brings it all together into a scripting layer outside of Webflow.

I can write custom code with their built-in AI assistant and deploy it via a simple script you copy-paste into your project's footer code.

4. AI Translations

AI-enabled translation is the only Webflow native AI feature currently available. It’s part of their new Localization service.

While I’ve played around with this, the client opted for professional translators for the final copy.

What’s next for Webflow AI?

Webflow has big plans with AI, with three areas they want to focus on:

• Chatbot for Learning and Support – ask questions when you’re stuck.

• Design Co-Pilot – You tell the co-pilot what you need, and it does the thing right in the Designer for you.

• AI Template Customization – customize a template based on a prompt.

The last idea is interesting and could mean a boom for Template designers.

What else I’d like to see?

AI class naming

Consistency in class naming has always been a challenge for me.

I want a context-aware class naming assistant to analyze my class naming convention and HTML structure and suggest the correct class name.

AI style guide generator

Creating and updating a style guide in Webflow is tedious.

I want a solution that analyzes my Figma file and automatically generates a style guide. Bonus: let me choose from popular design systems (Client-First, Flowbase, etc.).

Update: Relume is working on a feature called UI Styleguide–you drop links to your design inspiration, and it generates designs for you. I’ve played with other AI web design generators, and they all generate pretty unoriginal stuff. So, we’ll have to see about the quality of the outputs.

AI GSAP animations

I’d like to see a tool dedicated to generating GSAP animations using AI right in Webflow. Select a group of DIVs, describe what you want to achieve, and the tool generates a GSAP animation for you.

Do you have an idea for an AI Webflow tool?

Do you know anyone who is building in this area? What other AI features would you like to see in Webflow?

Leave a comment

or join our community chat:

🎁 One more thing

If you refer 3 friends, you’ll get my Guide to getting your 1st Webflow client.

Refer a friend

Based on hours of research, I’ve put together a checklist I now use to improve what’s called technical SEO.

Technical SEO is what you, as a Webflow developer, can do to improve site ranking in search engines.

For quick navigation, here is the table of contents:

1. Technical SEO Basics

2. Web Accessibility

3. Core Web Vitals

4. Other tips

1. Technical SEO Basics

Title Tags and Meta Description

Every page on your site should have a well-written title tag and description. The ideal length is 60 characters for the title tag and 160 for the meta description. Otherwise, Google will truncate it. Set it in your page settings.

Pro tip: There’s a great Chrome extension called AidKit that I discussed in my post on Webflow productivity. It checks the length of your title tag and meta description.

For collections, you want to set title tags and meta descriptions to populate with each collection item dynamically. I recommend creating a dedicated plain text field for title tags and meta descriptions. Add these fields as variables in your template page settings. You can also set a maximum character count limit to ensure it always looks great.

Open graph settings

I usually keep my open graph title and description identical to the page settings. I always set an open graph image. It’s a good idea to spend some time designing an attention-grabbing image.

Pro tip: AidKit can help here again, as it creates a checkbox that lets you quickly set the same OG image as you have on your home page.

Keeping URLs short

I only recently discovered this, but short URLs tend to outrank long URLs. A study by Backlinko backs this up. Webflow automatically creates a slug for every page you create. It’s a good idea to edit this slug for shortness. Just ensure that if you’re editing an existing page, you set a 301 redirect.

Fix duplicate content

Fixing duplicate content is especially relevant if you have a lot of it, like on a blog or online store. Duplicate content can happen not only by having two identical posts. It often happens when you have similar blog or shop categories/tags. If one category page displays identical posts as another, Google will think it’s a duplicate.

To avoid duplicate content, you can do two things: add unique descriptions to each category or tag page. This will tell Google it’s a different page. Alternatively, you can tell Google not to index a specific category page by enabling “Exclude this page from site search results“ in your Webflow page settings. Just note that this will create an error in your Google Search Console.

Set Global Canonical Tags

A canonical tag tells Google which URL leads to the original page. One thing to note is that Google looks at https://flowletter.xyz and https://www.flowletter.xyz as two different pages. Even adding “/” at the end of your URL is a different page in Google’s eyes. So, it’s a good idea to tell Google which of your URLs it should index.

To do so, go to your Site Settings, under SEO, find the Global canonical tag URL, and input your default domain URL. Webflow will automatically append the slugs for all your pages.

Set your www URL as your default

If you’re using a custom domain, you’ll notice two versions of the domain: one with www and one without. It’s best to use the one with www as your default domain. If you do so, ensure that your canonical domain, set in the step above, matches your default domain.

Use Google Search Console

Google Search Console will allow you to see any issues you might have with ranking on Google. When I got de-ranked from Google, I saw the drop in my Google Search Console. You’ll also be able to track performance and see what keywords you’re ranking for. Here’s a video guide on connecting your Webflow site to Google Search Console.

Add your sitemap.xml to Google Search Console

Adding a sitemap to Google can speed up the indexing of your pages. To add a sitemap, head over to your Site settings in Webflow, under SEO, find the Auto-generate sitemap toggle, and turn it on.

You’ll find your sitemap at “your-site.com/sitemap.xml”. Once you’ve grabbed your sitemap URL, head over to Google Search Console and, under Sitemap, submit your sitemap.

Ensure heading hierarchy

Your headings should follow a clear structure. Your H2 should be a subtopic of your H1; your H3 should be a subtopic of your H2, etc. You shouldn’t have more than one H1 on a page. Also, make sure you never skip a heading level. So, an H1 should not be followed by an H3 but by an H2.

Use Image Alt Tags

Alt tags serve two goals. First is accessibility – they tell people with screen readers what’s on an image. Second, is a failsafe – when your image fails to load, alt tags are displayed instead.

Because of this, it’s important to keep your alt tags descriptive. Try your best to describe what’s in the image.

For static images in Webflow, use the image settings in the Asset panel. This sets a global alt tag for all instances of this image on your site.

For images in your collections, create a dedicated plain text field that will serve as your image alt tag and connect it to your image placeholder in your collection template.

Also, set alt tags for images in your rich text. You can do this in collections by clicking the image and the wrench tool icon. This will open up image settings and let you set the alt text.

2. Web Accessibility

Optimize your website for mobile

Make sure your site is mobile-optimized. There are a few things you can check here.

First, make sure your site is not breaking on smaller screens. There should be no unwanted horizontal scroll, overlapping elements, hidden elements, or overly small or large fonts.

Make your typography accessible

Use REMs for text instead of pixels. Users with poorer vision tend to set their default browser font size to larger. By using REMs, your fonts scale with the browser font size. Using pixels overrides the default user settings.

Check your color contrast

You should have a good contrast ratio between your font and background colors. Webflow makes this easy to check with a built-in color contrast checker. Make sure you have at least an AA score.

Pro tip: One thing to note is that if you use color variables, you won’t see the contrast checker. In this case, I manually check my contrast using an online contrast check.

Set paragraph line height and length

Your paragraph line height should never be under 1.3. An ideal range is between 1.3 and 1.7.

Your line length for paragraphs should be between 45 and 75 characters. This ensures easy legibility.

On that note, left-align your text, especially blog posts and longer text.

Keep a flat site structure

Your site structure should be flat and keep as few levels as possible. Also, ensure you don’t have orphaned pages—pages that don’t link to any other page on your site.

Build a human-readable sitemap

In addition to having an XML sitemap, you can add a “human-readable“ sitemap page to your site. Here’s what Webflow’s sitemap looks like.

Build internal links

Link content inside your page where it makes sense. This can link to your site’s related posts, products, etc. For instance, add a “Related posts“ section at the bottom of your blog post template.

Note that Google pays attention to what’s inside the link description. Don’t use generic words like “here.“ Instead, describe what’s behind a link.

Pro tip: if you have a lot of content, you can also use AutoLink.ai, a Webflow app for internal link building like.

Add breadcrumb navigation

This is a good tip for websites with three or more layers in their structure. Adding a breadcrumb menu helps visitors quickly return one level up and speeds up navigation.

Pro Tip: Webflow now lets you nest your collection templates inside folders. This means you can create a layered structure if you have a lot of content. Your breadcrumb could look like this: Home / Blog / Guides / An awesome guide. Web Bae has a video tutorial on setting up nested collections and building a breadcrumbs menu.

Use structural, semantic HTML tags

Semantic HTML tags add meaning to your DIVs. SEMrush has a great graphic that explains this.

You can set up semantic tags for any DIV by accessing its Settings tab on the right.

• Header: Usually, this is your nav bar.

• Nav: Used to wrap navigation links, the Nav tag can be nested within the header tag but is also used elsewhere for secondary navigation.

• Main: This tag encapsulates the main content or body of a page, with only one per page.

• Section: This divides the content in the Main tag into sections. Note that this is different from the Section element used in Webflow.

• Article: Used for independent, self-contained content like blog posts, news, etc.

• Aside: Content not directly related to the main content on your page. This is used for sidebars with ads, related articles, etc.

• Footer: This is your footer section.

Remove broken links

Once you start building internal links, you may eventually encounter broken links. This happens when you change the slugs of your pages without a proper redirect or move content around. Use an extension like Check My Links to find broken links on your page.

3. Core Web Vitals

Google started measuring these metrics and giving websites a score. Your CWV score influences your Google rankings, so it’s a good idea to optimize it.

To see your Core Web Vitals, you can use Google’s Lighthouse feature in Chrome. Head over to your website, open the Inspect panel (right-click anywhere and click Inspect), and in the top tabs, you’ll see Lighthouse (it might be hidden under »).

We’ll be looking at two metrics. The first is LCP–Largest Contentful Paint, which refers to the time it takes for your entire page to load. The second is FID—First Input Delay, which refers to the time it takes for your website to become interactive.

Factors that influence LCP

• Slow server response time

• Render blocking JavaScript or CSS

• Slow resource load times

• Client-side rendering

Factors that influence FID:

• Long tasks

• Long JS execution

• Large JS bundles

• Render blocking JavaScript

One thing to note–while spending time getting your numbers in the green is a good idea, it’s usually not worth trying to get to a perfect score of 100. The difference between a score of 92 and 100 won’t mean much in terms of search rankings. Backlinko has benchmarks for each CWV score that will guide you.

Self-host your Google Fonts

Webflow allows you to access Google Fonts directly via the Google Font API. While this is a fast way to add fonts to your site, it can also slow it down.

Look at the comparison here:

Getting a .woff2 file for self-hosting a Google Font is more complicated than it seems. If you download the font directly from Google Fonts, you only get the .ttf version, which is not ideal for modern browsers.

To quickly get the .woff2 version, you can use Google Webfonts Helper. Once you have the files, upload them as Custom fonts in your Webflow’s site settings under Fonts.

Avoid using Webflow’s re-captcha

The native re-captcha slows down your site as it deploys the re-captcha script across your site and loads it with every page load.

If you have to use re-captcha, I recommend integrating it using custom code and only adding it to the page you need it on, not globally.

Minify your code

Webflow makes this super easy. Go to the Publishing section in your Site settings, and under Advanced publishing options, toggle Minify HTML, Minify CSS, and Minify JS.

Don’t overdo it with interactions

When you scroll through Made in Webflow, you might be tempted to slap a bunch of interactions to your site to make it stand out.

But beware: This comes with an SEO penalty. That might be okay if your client doesn’t rely on SEO for their traffic. But in all other cases, it’s best to go gently with interactions.

It’s a good idea to use CSS animations instead of interactions when possible. In Webflow, you can create CSS animations using the Styles panel.

Delete unused styles and interactions

As you build your site, you’ll create styles and interactions you won’t use in the final version. Make sure you clean up these styles and interactions.

To delete unused styles, head to the Style Selector in the left panel (or press G) and click on the broom in the top right corner.

To delete interactions, head to the Interactions panel on the right and click on the broom.

Pro tip: if you’re using classes in your custom code, those might get deleted, as Webflow won’t see them as used classes. So beware of that.

Delete unused 3rd party scripts

Similarly to unused styles and interactions, you might have unused custom code. Go through your pages and delete them.

Optimize images

There are two things you can do to optimize your images. The first is to use the proper size. If an image is only 500px wide on your page, there’s no reason to upload a width of 3000px. So, make sure to resize all your images. To optimize for retina displays, make the picture twice the size of the picture you’ll use on your website. If you do so, enable the “Image is HiDPI“ option in Image Settings.

The second thing you can do is compress your images into .webp. Webflow makes this process easy, allowing you to compress your images in the Assets panel. Go to your Assets panel, click the expand arrow on the right, and select the images you want to compress.

Pro tip: As awesome as Webflow is, it doesn’t compress images uploaded to CMS collections. So make sure these are compressed before being uploaded. You can use an online image compressor, or if you have many images, there’s a third-party app called Optily that compresses collection images for you.

Avoid Cumulative Layout Shift

Cumulative Layout Shift is when the content on your page shifts as it loads. For instance, your page first loads without images; once the images load, the content is shifted. Google frowns at this, and it will impact your CWV score.

Things that can cause CLS are:

• Images without dimensions

• Ads, embeds, and iframes without dimensions

• Dynamically injected content

• Webfonts causing unstyled content

To fix this, you can do the following:

• Always add size attributes to your images and videos. Just look up the size of your image and declare it in your image settings.

  

• Animate elements using transforms instead of changing the element width and height.

• Avoid dynamically inserting elements above other elements. For instance, an animation that inserts an element on delay causes the layout to shift.

4. Other tips

Implement Google Rich Snippets

Search results that appear as cards, bullet points, etc, on Google’s result page use Google Rich Snippets. This is a bit of code that tells Google how to format content.

While this will not improve your SEO directly, it can lead to stand-out search results.

To implement Rich Snippets using Schema, watch Michael Miello’s video.

Use SEMflow to run an audit of your Webflow site

SEMflow is a popular paid Webflow app that runs an audit and helps you fix the most common SEO issues. It’s not a replacement for this complete checklist but an excellent assistant.

Make my day, share Flowletter 💌

If you enjoyed this post, share it on your socials. It will help me grow awareness and build this awesome community.

I’m running a leaderboard for top sharers; if you’d like to join and get an extra perk, click the button below👇

Refer a friend

How do I get my first client?

I’m here to tell you it’s doable. It’s not easy, but it’s doable.

I don’t have a large social media following, I don’t do cold outreach, and I don’t pay for ads.

Here’s what I did: I asked my friends to spread the word and vouch for me.

When I first started with web design, having 0 commercial projects and a tiny portfolio of personal sites meant I couldn't compete with established freelancers.

My only option was to borrow trust from others. My friends know I’m an honest person, I don’t rip people off, and I’m a hard worker.

And that’s exactly what your clients need to hear before they hire someone who’s just getting started.

A bit of background

When I launched our freelance agency with my business (and life) partner, we thought we’d invest in marketing. We paid for Google Ads and newsletter ads; we did cold outreach.

All this led to 0 clients.

What I failed to realize at that time was the power of personal reference. It’s very hard to get new business if the person on the other side doesn’t know you.

I’m not saying it’s impossible. Many other freelancers have reported success with cold outreach. But to me, it always seemed icky.

I delete any unsolicited messages asking me to buy something. Why should others act differently?

My first Webflow client

My first client was a friend of a friend.

I emailed friends I knew who either ran a business or were part of one.

My message to them was simple. I’m available to build websites. If you need one, or you know someone looking for a web designer, I’m here.

I priced my services very competitively (aka cheap) to get at least a few commercial projects.

I linked my previous personal projects for reference.

I posted the same message on all my social media, especially LinkedIn.

And that’s what worked for me.

A friend noticed my post on LinkedIn. A day before, he heard from an ex-colleague of his. She was looking for a Webflow designer.

My friend gave her a reference – I was no longer a cold intro. Someone had vouched for me.

That made all the difference. A few days later, we were in business.

The crazy thing is that since then, this one client has brought in another client. And this has been true of most of my other clients.

It’s a snowball. The trick is to get it rolling.

What if you don’t have a network or want to expand beyond it?

I know that not everyone will have a network to rely on.

You might also want to expand beyond your network.

Here’s what I’m currently doing to achieve that. Maybe you’ll find some of these ideas helpful.

Being active in the r/Webflow community

I love how engaged the Webflow community is. Whether it’s on the Webflow’s official forum or the Webflow subreddit, people are out there, talking shop. And this is a great place to make new friends—friends that can turn into business relationships.

I try to be active and reply to questions where I have some experience and feel I can help. I also post interesting finds.

I’m hoping all this is showing others that I care about the community. There are people posting job opportunities, and I think reaching out as an active member makes a difference.

Following Flowremote

Flowremote is a job board focused on Webflow jobs. Most of the companies advertising jobs are either other Webflow agencies or startups using Webflow. I’m building a portfolio to apply for these jobs.

Creating Content

I’ve started this blog/substack to document my journey as a Webflow freelancer. It’s also a great place to share and show others what I’ve learned. It’s another way to remove the unknowns about yourself.

Creating clonables and publishing to Made in Webflow

I’m working on a simple style guide starter I’ll publish on the Made in Webflow directory. This is another way of showing my skills.

Looking ahead

The second reason I’m growing outside my network is to build other sources of clients. Your network is great when it brings in new clients, but I want to have a backup plan in case referrals stop coming in.

I hope some of these ideas help you find your first client. Good luck!

I’ve just started getting into Wized.

For those who don’t know, Wized is a tool for building advanced apps on top of Webflow. It allows you to build login-based sites where users can interact with data.

Think marketplaces, learning platforms, CRMs, and travel bookings.

Take a look at their showcase, and you’ll get the idea.

I’m looking to take on more advanced projects.

I’ve already built a learning platform using Memberstack, and this looks like the next logical step (especially in combination with Xano, which I’ll talk about another day).

I was really happy to see the Wized team do a live session on YouTube the other day, explaining their sales process for selling Wized projects to clients.

I watched the hour-long talk and made notes so you can get the main learnings.

It’s filled with useful nuggets covering selling both Wized and Webflow.

3:32 How do you scope a Wized project?

• Different from scoping a website - it’s more like app scoping

• 3-4 weeks of scoping

• starts from understanding the product you’re building

• wireframing, sketching, building proof-of-concept

• do you scope for free?

  • Bailey: YES - bc they close more deals, the value the client gets is unparalleled

    • you have to set a budget range on the first call to filter out clients with small budgets

    • with each step in scoping, the range gets smaller and smaller; check with your client at each step if this still makes sense

    • with each step, your % chance of closing gets higher

  • Finsweet: NO - it’s a testament to the stage of the industry; educated clients will pay money to get on your calendar so you can do the discovery for them

    • this is more true of enterprise customers

24:42 Should you price hourly or by value?

• if it’s under a week, go hourly

• if it’s more, go value-based

32:58 What should be included in a basic maintenance package?

• When you sell Wized, sell maintenance as well

• Let the customer know you’re there for them in the future; you’ll support them

• Sell blocks of hours - customers can use them however they like (usually, there’s a backlog of things to work on)

35:07 How do you plan the team?

• Finsweet prefers small teams

• No middle man, devs are in the lead positions

• Wized projects are developed in pairs - one is stronger in customer comms and the other is stronger in development

38:24 What are the outcomes of a good discovery phase?

• good understanding of the project, the client needs to feel heard, all possibilities of what this app could be, has been heard

• this includes: sitemap, detailed list of functions and feature

• take it further and build a DB schema, define individual API calls on each page

42:46 What about charging by sprint?

• these projects don’t have a finite stopping point

• split things into phases - phase one is what’s knowable today; phases two, three, etc, are things we’ll learn while building phase one

• it’s a great way to just get started - you can do a one-week sprint to just get started and get to know you

48:23 How do you course correct if the scope changes and starts to look unrealistic?

• one word answer: honesty

  • you have to be good at explaining it to them - clearly communicate how much time this adds to the project

  • don’t pay for client’s mistakes

Your turn

Have you already built an app with Wized or any other no-code platform? What’s your experience selling it to clients?

Leave a comment

👋 Happy Webflowing,
Ondrej

1. Collecting design inspiration

I’ve started a Notion database, where I collect and categorize designs that I find interesting.

My Notion Design Inspiration DB

I try to make a small note about what I like when I have time. Feel free to use my inspirations, but I guess your taste might differ.

I recommend using the awesome Save to Notion Chrome extension, which lets you add attributes to an entry and takes a screenshot of the page.

2. Using AI to brainstorm first layouts

I’ve been thinking about adding AI to my workflow for a while. Mostly out of curiosity–and the fear of being left behind 😃

Turns out, there is at least one place, where it fits in my flow–idea generation.

A client project I recently started by generating a sitemap and wireframes using Relume AI

I use Relume AI to help me generate an initial sitemap and super raw mockups using the Relume component library.

While the outputs are basic, they help me overcome the ‘staring at a blank screen‘ problem.

3. Using component libraries

Component libraries are another way I solve the cold-start problem. The most popular libraries will have many components for almost anything you’ll need. Hero sections, feature sections, team sections. You get the point.

You might say, isn’t that going to make all the websites you create look the same? It could, but only if you take the components at face value.

I like to think of the libraries as inspiration, and I almost always modify individual components.

In fact, take a look at this website, which features designs made with the awesome Relume library. When you hover over each design, you’ll see the different directions in which designers took their websites using the same component.

The component library I use is called Relume

Personally, I’m using Relume’s component library, but you can pick from various libraries created by the Webflow community. This article also compares the popular libraries so you can pick the best one for you.

4. Easy transition from Figma to Webflow

A second benefit of using component libraries in your design workflow is that most of them have a Figma and a Webflow version.

This means I can use them when I create my designs in Figma and build on top of them when I move to Webflow, speeding up the development process.

5. Using apps and extensions

AidKit is a Chrome extension that does a few neat things. It’s like a Swiss army knife. My favorite things are:

• it checks for title and meta description length for SEO

• you can copy your homepage’s OG image to other pages with one click

• it adds back undo/redo buttons

Optily optimizes your CMS images. While Webflow has built-in optimization for images, it doesn’t cover images added inside Collections. That’s a shame, but Optily is a good solution.

One thing, it’s not free. You can achieve the same result by optimizing your images before uploading them to your Collection using something like Optimage.app on Mac. It’s just faster with Optily.

Your turn

What do you do to improve your Webflow productivity? Let me know in the comments.

Leave a comment