Prioritise content over components

Simeon Riggs:

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.

[...]

Ask yourself

- 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