Design Systems (Smashing eBooks)

Their purpose is to enable or encourage certain user behaviors.

To understand the purpose of a pattern, try focusing on what it does rather than what you think it is. In other words, try to find an action that best describes the behavior a pattern is designed for. Describing a pattern with a verb rather than a noun can help you to broaden potential use cases for a pattern and define its purpose more accurately.

An inventory doesn’t have to encompass everything (although the very first one you do should be comprehensive). It can focus on one pattern group at a time, such as promotional modules, headers, or all the product display modules. You can do an inventory focused specifically on typography, or color, or animations.

For example, instead of designing a course list page, I’d think of the “Discovery” area as a whole. What are the behaviors we need to encourage at this stage of the user journey? What are the patterns that can support those behaviors?

Conduct an Interface Inventory

Functional patterns can be simple or they can combine to create more complex patterns. A recipe card is made of a meal title, image, ingredients, and an action button. Each module within the recipe card has its own goal: the title tells us what the meal is; the image provides a preview of the final result; ingredient icons allow us to scan the card

if you define it in terms of actions — from your user’s perspective as well as your own — you can uncover its purpose: “Promote a course” and “Discover a course”; and “Get inspired to join a course” and “Encourage people to join.” By focusing on the action, you connect pattern with behavior

You print out the screens of your interface on paper, or collect them in Keynote or PowerPoint. You then separate out various components either by cutting them out or pasting them in Keynote.

To be most effective, interface inventories should be done regularly. Even if your team maintains a pattern library, new patterns will emerge that need to be folded into the system. If you get into a habit of running inventories every few months, each time shouldn’t take more than a couple of hours. And every time you do it, you understand your sys

At this point you might be thinking: “It’s just a sketch or a wireframe. I do that all the time anyway.” But it’s a bit different. This is a sketch focused specifically on the content structure of a module, and the hierarchy and grouping of the elements.