At Instrument, we build supportive, flexible solutions that can grow with our clients. As such, we’ve found it extremely effective to emphasize design and code as a larger component framework, rather than as a series of one-off moments. We leverage modular design and development processes to build and revise our work.
Benefits of Modular Development
Modular development is centered around building a set of reusable components rather than around individual pages or templates.
A component-driven system allows dev to kick off earlier, and to work more tightly with design throughout the project. It allows developers to work quickly and independently, and it allows for earlier and more consistent client review. Finally, a modular system allows a product to evolve past its initial scope or handoff. When we deliver a component system, our clients don’t just get a handful of pages or lines of code – they get a way to grow their product by recombining components and incorporating their own.
Many of our projects culminate not just in a website but also in a component library or style guide. This deliverable reflects our own internal workflow and opens up a lot of possibilities for client ownership post-handoff.
Component Framework Tools
We embrace simplicity and aim to use lightweight tools that meet our current needs. Here are three of our favorite tools for developing modular systems. Each can be used on its own as a component library or prototype or paired with a headless CMS to create a fully-functioning website.
Storybook
Storybook is a component-based UI development environment usually paired with React. We’ve used Storybook across a wide range of projects and loved it every time. We use it to keep dev focused and independent; we also leverage it for getting design feedback, running visual and functional tests, and for sharing work iteratively with clients.
Fabricator
Fabricator is another tried-and-true component development tool, this time centered around Handlebars and vanilla JavaScript.
Pattern Lab
We have also used and loved Pattern Lab, a Mustache-based tool that encourages Atomic Design thinking and structure.