Webflow Considerations

🖥️ When starting the design

To save time for you and the dev use this Figma Kit.

While you are designing, please remember to copy the components and paste them on your own file, this way, we don't edit the original file.

🎨 Use of Templates

Webflow can be designed from two beginnings:

From scratch
From template: multiple templates in the Webflow gallery can be used for designing.

Depending on the template developers may avoid using the template to build the app because it takes more time than starting from scratch. However, designers can still utilize it to speed up the design phase. But it depends on the type of template.

Link to gallery: https://webflow.com/templates

🔑 Key Considerations for Designing in Webflow

Sizes

Familiarizing yourself with these size guidelines will help ensure consistency in your designs:

Frame: Represents the total screen width → 1440px
Content Area: The space where content is placed → 1280px
Padding: The margin from the outer border to the content → 40px

Spacing Between Sections

Use the following standard spacing values:

Large → 128px
Medium → 80px
Small → 48px

Fonts

Webflow uses Google Fonts by default, but custom fonts can also be uploaded.
If a client provides a custom font, we can incorporate it seamlessly.
Default paragraph text size → 16px
Text Hierarchy: Maintaining a proportional scale for typography ensures consistency and readability. Here are the recommended size ranges:

H1 → 40–48px
H2 → 32–36px
H3 → 24–28px
H4 → 20–24px
H5 → 16–18px
H6 → 14–16px

Grids

Webflow does not use built-in grids for development.
However, it's a good practice to design in Figma using grids for layout consistency.
Developers will manually adjust layouts in Webflow without relying on a grid system.

Icons:

We can use anything we want, such as Font Awesome, iOS icons, Material Icons... as long as they are available in Figma.

Breakpoints for Images:

Images may or may not have breakpoints, depending on their type:

- Decorative images (where the client doesn't mind which part is displayed) don’t require breakpoints, ensuring they scale accurately across all screens.
- Content-critical images must have a breakpoint set at 1920px. On larger screens, a white background will appear on the sides. To communicate this to developers, we’ll add a note next to the image.

When there are no background images the breakpoint will always be 1920px, but we must specify how the image should be adjusted. For example, add a note for the developer stating: "Duplicate the image to cover other screens."