How To Manage Design Debt In Webflow
Best practices on how to deal with design debt in Webflow projects.
[NOTE] This article was originally published at matechs.com. The terms technical (tech) debt and design debt are interchangeable.
The sooner you detect issues, the sooner you can solve them. Imagine solving a design issue on a site you worked on months ago. Now, imagine solving something on a project you launched last week and you’re still familiar with the structure and the reasons behind any design decision. You get the idea, right?
Solving issues in a timely fashion helps in reducing tech debt. However, as you build your design projects, there are a few best practices that could avoid or, at least, minimize tech debt.
Designing first on a vector graphics design tool
Using Figma, Sketch, or even Whimsical before building in Webflow has many advantages. Especially for new projects or when you still have to decide the content structure and the layout. Trying out different UX/UI solutions in Figma first, allows you to design in Webflow in a clean and organized way.
Experienced Webflow designers can create their designs directly in Webflow, skipping Figma or Sketch from their process. They may only use pen and paper for basic wireframes and create impeccable web pages on the first try. They know what they want to achieve, have a clear idea of the layout structure, and can technically do it right away.
Some Webflow pros feel more comfortable in doing design trial and error straight into Webflow. They can be more creative trying out their ideas in Webflow and, most importantly, have the experience, knowledge and the ability to promptly fix any issues.
If you’re not a pro yet, it is best to use another design tool first where you can safely play around with your ideas before jumping into Webflow. Also, as you use Figma or Sketch, make sure your designs are consistent and realistic for all breakpoints.
The importance of the design guidelines
UX/UI guidelines are critical in maintaining consistency in your design work. They provide information on specific design decisions and facilitate collaboration with other designers involved in the project.
Name classes properly
Do not name or use classes randomly. Classes need to be reusable. Name and apply them with a logic based on the design structure and the specific element assigned.
Remove unused classes
Apart from improving the website performance, removing unused CSS allows you to create a different class using the same name.
Clean up interactions
Removing unused interactions eliminates excess code and positively impacts the site’s performance.
Organized assets panel
Website projects with multiple asset files require a proper organization of the assets panel. Name assets correctly to quickly find them in the panel, organize them in folders if needed, and delete unused ones.
Use symbols whenever possible
Symbols are components that maintain content and layout consistency throughout the website. The best use-cases of Symbols are website navigation and footer.
Quality Assurance (QA)
Never skip QA from your process. When launching a new website or implementing changes to an existing site, always check responsiveness, accessibility, and that interactions work as they should on all browsers and devices. Webflow provides many accessibility tools that you can benefit from, such as the automatic check of font contrast, headings hierarchy, or image alt text. These are great to get you started as web accessibility is a must, not a plus. There are many different QA tools to help you out at this stage, and you should choose the most suitable one for your projects.
Websites are an ongoing process, and this topic doesn’t certainly end here. In this article, the term project is used more often than the term website. That’s because websites are not stand-alone work. They are at the core of business ventures, artistic projects, awareness campaigns, or any other valuable initiative that organizations might undertake. Invest in building them correctly, or hire professionalsthat can do that for you.
Top comments (0)