DEV Community

loading...
MATECHS

How To Manage Design Debt In Webflow [Part 2]

mirelaprifti profile image Mirela Prifti Originally published at matechs.com on ・3 min read

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.

Discussion (0)

pic
Editor guide