Component-Based Design

Developers don't need to be designers to ship PIXEL-PERFECT designs.

Your product's users need your interface to be clean, modern, intuitive and easy-to-use. A focus on UI and UX is critical for customers to adopt and stick with your product.

But how do we make sure that we're shipping pixel-perfect user interfaces all of the time?

And how do we ensure our interfaces don't degrade over time, as we add more features and continuously iterate the product's scope?

I use a simple strategy that enables:

• Building and shipping new features fast—without extensive rounds of design mockups and front-end development cycles.

• My developers to focus on their strength—back-end development—without needing to have high-level design skills, while still being able to implement finished, polished, user-interfaces.

• Our UI to remain consistent for users across the entire app.

What’s the strategy I’m talking about?

Components.

Sure, it's the DRY principle in software development—"Don't Repeat Yourself". But the benefit here isn't just a clean, easily maintainable codebase.

Components create predictability.

Consistent UI and UX is about predictability for your users. You want the interface to be clean and intuitive for users to learn. But more importantly, you want it to feel familiar and you want users to quickly advance themselves to becoming power-users.

From a design standpoint, consistency across your menus, your buttons, your forms, your popups, and all the common components that make up your app’s interface is key.

So how do we actually ensure that our fresh designs that we create today will remain intact when we add 50 new features later this year?

The sooner you can start extracting your commonly used interface elememts to reuseable components, the better.

A few of the more common components I create and use in all my projects are:

• Dropdown menus
• Buttons
• Forms
• Modals
• Popovers ...

But what about small differences from one button to the next, or one menu to another?

That's where making components configureable comes into play. Sensible defaults, with configureable attributes that let us tweak a component depending on where it's used, without needing to create duplicate versions of the same component.

End of the day: Component-based app design lets us:

• Create predictability for users: Improves adoption and retention.
• Building blocks for development: Faster to ship features to customers.
• Easier to maintain: UI doesn't degrade over time.

In my consulting, I love working with established SaaS companies to refresh and component-ize their UI & UX. If that's you, let's talk :)