This comprehensive guide is a roadmap to success for Webflow projects, ensuring that clients, designers, and agencies are on the same page, resulting in a product that meets or exceeds expectations.
With insights emphasizing on safeguarding the client by setting clear expectations.
The Clients Guideline to Your Landing Page Project with Webflow
We know, navigating the realm of web-design and web-development can be intricate. This guide aims to set clear expectations for clients like you venturing into Webflow projects, ensuring you are equipped with the knowledge needed to collaborate effectively and are not taken advantage of.
What happens if the designer or agency has not provided me with a proper Figma Design?
If the designer is using Figma in a manner similar to Keynote (i.e., primarily for layout and visual presentation without detailed style specifications), then the CSS and style guide will not be provided directly by the Figma file. Instead, you will have to derive or create these elements yourself based on the visual cues given.
Here's what might happen in such a scenario:
- Manual CSS Creation: Based on the Figma design, you'd manually write the CSS for the Webflow project. You'd use the Figma design as a reference to determine things like font sizes, colors, spacing, and other styles.
- Style Guide Derivation: If a detailed style guide isn't provided, you'd interpret the design's consistent patterns and styles to create a makeshift style guide. This helps ensure consistency across the site, even if you're building out additional pages or elements not explicitly designed in the Figma file.
- Iterative Feedback: Given that explicit styles might not be provided, expect to have a more iterative feedback process with the designer or client. You'll likely need to make adjustments as you go to ensure the website matches the intended look and feel.
- Use of Figma's CSS Insights: Figma does offer some insights into CSS properties for a selected element (like font size, color, and spacing). However, these aren't always a direct translation to a complete CSS stylesheet, but they can be useful as a starting point.
- Clarifications: If unsure about a particular design detail, always ask the designer for clarifications. It's better to understand the intent upfront rather than making assumptions that might need to be corrected later.
If you're working with designers who primarily use tools for visual presentation without much detail on the actual web styling, it's beneficial to set expectations at the project's start. Establishing clear communication channels and feedback loops can help smooth out the development process.
