Retroactive Decluttering: A Frontend developer's approach to learning design

Photo by Toa Heftiba on Unsplash

Retroactive Decluttering: A Frontend developer's approach to learning design

Learn design by trimming the visual designs of your projects

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. Antoine de Saint-Exupéry

Context

This is the beginning of a series of articles on correcting the visual design of web applications I've built. Here, I will attempt to follow design and UX fundamentals learned from tutorials and guides.

Over the years, I've been building several small side projects; ranging from the unexciting (Coffee Tracker) to a challenging (Heartbeat based App) that converts heartbeats (measured via Bluetooth) into musical sounds.

mobile (2).png

Frontend developers and design

As frontend developers, we tend to lack the ability to design web interfaces ourselves. By frontend developer, I am referring to developers who typically receive and integrate web designs into websites or apps. Naturally, you can become an exceptional web developer without ever diving into web design. Still, I personally believe that learning some basics about design can improve the way you develop these interfaces, as well as the way you might be required to collaborate with a designer in the future.

Design as an asset to development

What makes the proposed interaction you received not worth the effort in a project ? No matter what the actual reasons are, using terms like "flexbox" or “box-sizing” may not help you when trying to communicate with a designer. On the other hand, you might have a more fruitful exchange by learning concepts such as visual hierarchy, spacing, or color theory.

An implication of learning design as a web developer is a new perspective on previous projects developed without this critical eye. Where you may have been satisfied with your accomplishments, you may now find inconsistent alignments, absurd spacing (see the purple squares down below), and inaccessible contrasts.

App for converting heart beats measured from a smartwatch into tones: Screenshot showing a desktop view with a main content too small surrounded by unused negative space

Using inexperience as a mean to get more experience

Viewing your past accomplishments through new, more polished lenses and realizing what you could have done better is not exclusive to web development. Whether you're an artist, athlete, or writer, you may tend to look at your prior work as a testament to your inexperience and as evidence of your budding expertise.

I'm far from being an expert in front end development, but I do now look back at projects I did a while ago with a different perspective. Most of these projects seem cluttered, with features that are either irrelevant or inappropriately arranged for their purpose.

In this series of articles, I will redesign past projects by decluttering their interfaces while extracting bits of knowledge, notions, and sources on which these decisions are founded. The focus will be on Simplicity, Clarity, and Accessibility, which are principles I now value most when developing.

  • Simplicity will be about keeping the essential elements.
  • Clarity will be about making those elements as obvious and transparent as possible.
  • Accessibility will be about making these components usable by as many people as possible.

Conclusion

If you are a developer learning design, hopefully, this can help you learn a few things and even consider getting into the habit of refactoring past projects.

Becoming a good engineer is about collecting experience. Each project, even small ones, is a chance to add new techniques and tools to your toolbox. Addy Osmani