Design for your content, as you do for your users

In the early days of the internet, we created websites and applications from the content up. Every new website rendered a new design challenge.

The introduction of mobile applications caused a need for systematic design. So, in 2014, Google introduced Material Design and enabled designers to focus on user problems instead of creating patterns.

But it caused designers to rely too heavily on copying patterns instead of trying to understand the content. Before we reference design systems, we need to understand what makes our content unique. Failing to do this can lead to a broken experience. 

Our users come to our applications because of the content. The content allows us to connect with our users and engage them in experiences.  This necessitates us to know how our content behaves. We need to understand how flexible it is and notice when it will break.

An object-oriented approach can help to understand and structure the content.

1. Start with a content inventory.
2. Then investigate the individual elements.
3. Finally, list the different instantiations of the content objects.

• Identify the primary content objects used in your application.
• List their content elements. Start with core content elements and metadata, then map the nested objects.
• List all the CTAs the users will need to work with the object.

When you have your inventory, look at each content element's attributes. The image, video, headline, or body copy have specific properties, constraints, and requirements.

• Origin: Where is the content coming from? Is it hardcoded, coming from a database, user-generated or curated?
• Appearance: What is the general character count of a headline, teaser or body copy? What are the sizes and default aspect ratios of images or videos?
• Relationships: How do those elements relate to one another?
• Hierarchy: Are all related elements equal?
• Versions & state: Is the content changing or static?

Once you know the content pieces and their constraints, it's time to see how they work together.

Content objects can appear in many places and in different shapes,  for example, displayed as a detail page or a listed item on an overview page or shown as a teaser.

Identify and detail the required instances and check their relationships. Then list the content elements for each occasion.

The correct pattern should fit the user and content requirements. It will respect the content needs and help users use the content to reach their goals.

When we know the different instantiations of each object and the requirements and constraints of its content, it should narrow the possibilities to a few patterns. From there, we look at our options from a user's perspective to select the best pattern.