By definition: an inventory is a gathering of items tracked in a list. This term isn’t anything new, but the idea of using this concept towards interfaces is. Brad Frost, who coined the term “Atomic Design”, states that creating agnostic patterns helps to build far more versatile components that can be used widely across a system.
In this short tutorial we’ll use InVision to create an interface inventory. We’ll work towards a finished product with components and modules that are perfectly reusable and portable.
Getting Started
A “module” is a set of standardized parts or independent units that can be assembled to construct a more complex structure. Building this way makes predictable outcomes more likely.
In order to reach this pinnacle of development utopia we’ll use InVision’s Boards feature.
Boards are painless to create and each one can be titled with a name and description. Once your information is complete click the “create board” button.
Naturally, boards can be used for various purposes, whether that be for an inventory audit such as the one we’re creating, or for branding discoveries and so on.
We’ll be focusing on the interface inventory for the purpose of this tutorial, but keep in mind that boards can be used for other contextual needs as well.
Creating the Audit
Now that our board has been created it’s time to get down to business and begin the real work we’ve come to do; the interface inventory audit. Depending on your workflow this can be done in a few different ways, but usually it starts with screenshots of the interface’s “atoms” such as buttons, headlines, inputs, colors and even icons. Since Atomic Design also includes “molecules” and “organisms” you can move onto each type as the process guides you.
In most cases molecules and organisms are a much higher level of inspection that includes smaller atomical/molecular pieces combined in unique ways to create a larger whole.
Organization is definitely the most important part as you begin your audits. As you can see above I broke down a particular section into patterns and variations so I could identify portions of the interface that repeated, but had a slight variation. This is great when it comes time to code because you can find reusable patterns in order to keep your CSS lean, ultimately constructing a more modular system.
Atoms will help identify variations and even guide you in your naming conventions quest; the most difficult part of the job. When discovering your atoms think to yourself what is a “display pattern” and what is a “content pattern” as both will differ greatly. If this question isn’t answered correctly your code runs the risk of deviating from becoming a portable and modular unit suitable for differing contexts.
Color swatches are a great use case with InVision boards too. This can be a huge timesaving guide when discussing if color consistency is used throughout an interface. Swatches can also help keep track of color values required when using variables to store color information for working with CSS pre-processors.
Take advantage of boards to document and discuss naming conventions, functionality, plugins/libraries and even identify patterns from a higher level.
Comments and sketching are a powwerful feature that can be used with boards too! Use sketching to point out parts of the interface in question, or use comments to discuss patterns discovered in order to solidify requirements before development. There are a ton of other great commenting features that come with InVision I encourage you to read more on their site.
Conclusion
Boards are really handy to use for inital discoveries, whether development or visual in intention. If you’d like to learn more you can read all about Boards on the Invision blog. As always, happy coding and thanks for reading!