Prioritise content over components
Roger Stringer • October 17, 2022
2 min read
The adoption of the components model has allowed frameworks to empower developers to build a new class of websites and apps.
In design tools like Figma and Sketch, and in code library choices like React, Vue, Svelte, Laravel and even native with web components – they are now the default way designers and developers compose interfaces.
For development, separating concerns into unique components helps isolate complexity. Individual parts of an application can be lazy-loaded, on-demand. Especially with the rise of server components in React, any component — small or large — can be loaded into view and bring with it its own unique, self contained complexity.
Breaking designs down into components helps us drive visual consistency. All the variations of what a "Button" is can be defined in a design system. Then used all over an application with a predictable output given a set of inputs.
Which leads us to content. Typically, designers and developers visualise an entire application like a single image that first must be broken into puzzle pieces and reassembled. Then populated with content.
Components are composable and reusable.
As is structured content.
Problem is, components-first thinking can condemn reusable text and images into single-use decorations, arranged with explicit curation.
- What the intent of the content that will populate the component?
- How might that content be reused beyond this individual component?
- What are the commonalities between the content of one component and another?
- How can the content determine component selection and layout, and decrease the dependence on explicit curation