I’ts been said that “simplicity is an art form”, and in the case of UI design nothing could be more true.

As designers, we’re often faced with use cases that require us to pack a lot of information into what should be a lean Web design. I often find it difficult to strike a balance between conveying relevant stuff to the user, and keeping the UI clean and minimal.

When there’s too much “stuff” in the UI, user’s can be overwhelmed or distracted — — yep, that’s poor UX.

In a Perfect World

Let’s be real here. While it’s nice to be able to work on landing pages (a hero, signup form and a few cards), this isn’t usually the case.

In Reality

There are many factors that add to the clutter of our design, Most “real world” Web apps require lots of space for information. There needs to be space for text, media, ads and multiple navigation areas (navbars, footers, sidebars and calls-to-action within the content). Often there are scenarios where we need to also find room for notifications, forms and less-relevant “sub content” for things like discussion threads, comments and metadata. This becomes more challenging in the new world of Progressive Web Apps.

How I Declutter

Just to clarify, when I say “declutter your design” I’m referring only to the visual and readability aspects of the design. There is nothing in here that is specifically intended to impact performance, bloat or SEO, although those may be after-effects.

Some of the approaches I use are during the layout and protoyping phase, while others are clean-up tasks I perform when the design in almost complete. Like and part of the design process, decluttering is iterative.