Building a website of any complexity requires effective coordination between developers and designers – and between both these parties and the client. In a typical project, designers ideate and build a mockup based on visual, UX, and UI elements, while developers determine if the design is feasible and, if so, get to work coding the site. The client leans in at key moments to offer feedback, and the process continues.
How complicated this gets depends largely on how far along the development process is. If the implementation of the front-end design is already well-connected to the back end of the site, any significant design changes can result in time-consuming and costly rework, causing delays and budget overruns.
To avoid this problem, for many of our more complex projects at Chapter Three, we use a tool called Storybook, which allows us to build fully interactive front-end prototypes of website elements. This enables clients to test drive a site and suggest changes prior to back-end integration, before things get complicated and costly.
What is Storybook?
Storybook is a JavaScript-based open source platform for creating component libraries of reusable, “composable” pieces of UI in isolation. It works with most leading front-end frameworks, including React, React Native, Angular, Vue, Ember, Drupal (Twig), and HTML, and features extensive documentation, built-in testing functionality, and collaborative features.
In practical terms, this tool enables designers and front-end developers to work together to create highly sophisticated prototypes of web pages for testing purposes, which can later be integrated into the back-end once the front-end has been tested, fine-tuned, and approved by all stakeholders.
While there are other tools out there that serve similar functions, such as Pattern Lab, CodePen, and CodeSandbox, Storybook stands out by combining a sandbox-type development environment with documentation and a client-friendly user interface to enable external viewing, testing, and approval of UI elements.
What it does: Enable collaboration early and often
Storybook is applicable to virtually any project regardless of scale, but where we at Chapter Three have found it to be particularly helpful is for projects involving either multiple interconnected websites with shared design elements or for very large sites with a lot of pages with similar elements.
By using a component library like the one provided by Storybook, the look and layout of all the pieces of user interface only need to be templated and styled once. This prevents them from being accidentally reinvented for each piece of backend that gets themed – often by multiple developers. Having a component library also means that when a design gets changed, it only needs to be changed in one place and is automatically updated everywhere it’s used.
Component libraries in Storybook make developing future websites and features with the same design elements much faster by making the necessary components readily accessible.
A tool like Storybook also helps foster feedback loops between developers and designers by enabling quick prototyping and communication without having to wait on back-end development and theming, which can take weeks or even months. It also enables front-end and back-end development to take place simultaneously without one element impeding the progress of another, delivering better quality outcomes.
How it works: components in JavaScript
Storybook is powered by Component Story Format, an open standard based on JavaScript ES6 modules. This allows design elements to move between development, testing, and design phases, with each exported as a JavaScript function, so you can reuse it with other tools.
When you build out a component, you create a “story” file in Storybook in the form of a stories.js file. You then import your component and create various use case examples in the iframe sandbox using that component. Within these story files, you create controls using “arguments” (or “args” for short), which appear in the Storybook UI, enabling teams to change a component’s properties, states, and interactions.
This structure and workflow allows you to create a component library accessible to anyone regardless of technical expertise. Anyone with a user account can collaborate on the platform and share feedback without having to write code or install extra software.
How we’ve used it: an enterprise example
Storybook has been an essential part of our work with the Judicial Council of California (JCC). Storybook governs design elements for dozens of websites, including county courts, the statewide self-help website, the Supreme Court, and other affiliated sites. It allows each site to retain their own look and feel, and the centralized repository governs how the front-end connects to the underlying features and functions in Drupal. As the design system evolves and new components are created, the entire repository can be used to build and test new websites, further extending the visual design options for the JCC, while streamlining maintenance of code.
Latest upgrades
Storybook released the newest version of its platform, Storybook 7.0, in March 2023. New improvements to the platform include:
- Improved interaction testing, featuring a stabilized test runner and interactions debugger
- Improved type safety
- Frameworks API for streamlined integrations
- Code coverage for interaction tests
- UI design refresh, featuring edge-to-edge layout, redrawn icons, and refined forms
- Improved stability with Ecosystem CI
Visit Storybook for more information, including guides and tutorials.
