Four years ago I wrote the post 220 Screens: How to Stay Organized with Your Designs on the topic of enterprise UX design. Apparently I’m still obsessed with file organization, because here I am again telling you this time to stop making screens.

When designing using mockups, you’re showing all of the content within the layout. You’re repeating that content endlessly just to display one change on one component. As designs change, things become outdated and delivery becomes complicated. I’ve worked on projects with hundreds of screens as deliverables before. Now, I deliver one set of responsive layouts and my components are delivered separately.

Modules are instructions on the behavior of individual components. They show, in isolation, all of their possible states — empty, error, filled, etc. When you make a change to a component, you only need to update that one location, it is your source of truth.

How components respond to viewport size
Each component is described individually

The benefits of working with modules and layouts are enormous. You can work more rapidly with faster iteration. You’ve got time to really examine all of the behaviors of each component individually, allowing for more micro-interactions.