UX, IA, UI — all of these abbreviations can be confusing. As designers, we often find ourselves designing the overall user experience (UX), organizing information logically as we consider information architecture (IA), and considering the granular design of the user interface (UI).

In Comprehensive Guide to UX Design, I explored the necessity of understanding users’ needs and journeys, as well as designing with human behavior in mind, and establishing an overall aesthetic. Now I’ll be exploring how we design interfaces that are consistent and scalable. Our goal at this phase of the design process is to apply what we’ve learned to our user interface design by:

  • Using benchmarking to develop interface inventories that ensure your user interface is considered in a cohesive and consistent manner;
  • Building a UI patterns library, informed by your interface inventory, to ensure that what you design is both cost-effective and consistent; and
  • Embracing animation as a way of communicating with users, improving our design at the levels of both function and delight.

This series is intended to help you develop a systematic approach towards user interface design that is widely applicable and scalable across a range of projects. By building a framework for designs, we can apply lessons learned from others, improving our designs and resulting in a better outcome for our users.

What is UI design? UI is a vast topic, so consider this article a short primer. I have provided a list of suggested reading toward the end to ensure you’re well covered.

Get started with an interface inventory

You might be starting from a clean slate with a new product or revisiting an existing product, but to define your UI patterns library you must start by establishing an interface inventory. Just as a content inventory helps to ensure content (i.e. words, images, and other types of content) is consistent, an interface inventory also ensures that user interfaces are developed consistently within a comprehensive and considered framework.

Spending a little time on this upfront will save a lot of time in the long run by establishing a design system that is consistent across team members and that is easily scalable. Building an interface inventory helps you focus your time and effort on the elements you need at this moment in time, but — just like a style guide — it should be a living document that is extensible, growing as your product grows.

So, what exactly is an interface inventory? Well, the term was coined and popularized by Brad Frost. It takes the idea that underpins content inventories and maps it over to the world of user interface design.

An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website [or product]. An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.

Brad Frost, from Interface Inventory

If you’re redesigning an existing product, an interface inventory starts by mapping out all your components — no matter how large or small — so that they are systematically documented. If you’re embarking on a new project, you might like to map out a competitor’s product, undertaking an analysis of others’ work. This helps you get a feel for the different interface components you’ll need to consider.

A screenshot of an interface inventory

An interface inventory helps you to define everything that needs to be considered in your UI. Brad Frost has helpfully provided a template you can use.

The first stage in the process is to systematically take screenshots of everything you’ve designed. This will be time-consuming, but it’s important. It’s at this stage — especially if you have a sizable design team — that you might start to see inconsistencies in how different elements have been designed. Your interface inventory will help you identify these elements, which you can then fix.

Consider all the different components that comprise your user interface, including:

  • Typography
    • Headings and subheadings
    • Text elements (standfirsts, paragraphs)
    • Lists
  • Images and media
    • Logos
    • Iconography
    • Images
  • Forms
    • Text inputs
    • Radio/Checkbox inputs
    • Select menus

If you’re anything like the old me (before I knew better), you may well have designed these different components as and when the need arose, without any systematic approach. The idea of an interface inventory is to impose an order onto this process, ensuring everything is consistent.

The second phase of the process, categorizing everything, is intended to impose some order upon the screenshots you’ve taken. You can organize your screenshots using all manner of tools, but I’d suggest organizing everything using Keynote or PowerPoint, that way you can present the work when it’s completed to your team. Ever-helpful Brad Frost has provided a template that you can use as a zip file.

With the above work undertaken, it’s a good idea to get together as a team or with the client and run through everything. This discussion will lead to a better understanding of the different components you need to design. It is also likely to lead to some streamlining of your different components by identifying shared patterns — a big win for efficiency.

Build a pattern library

With your interface inventory undertaken and all of your components organized, it’s important to start to identify common UI patterns and build around them. Your interface inventory is likely to have revealed stark inconsistencies in your design, and now is the point in the design process that you address these by rebuilding your UI in a modular manner. I find it’s helpful to think of this approach as being somewhat like LEGO.

With LEGO, you can (by using small components) build incredibly complicated things. Interfaces are similar. Although at first glance an interface might be incredibly complex, it is essentially made up of smaller components. These components are where pattern libraries come in. So, what is a pattern library?

A pattern library identifies and classifies design patterns that are recurring solutions to typical design problems. These might be:

  • Calendar pickers
  • Breadcrumb trails
  • Carousels

A UI patterns library breaks-down an interface into smaller elements that can then be used as reusable building blocks. The benefits of this approach include:

  • Consistency in your design 
    By building complex user interface elements using smaller, reusable components you ensure that all your user interface elements are consistent because they’re all built from the same simple components.
  • A visual vocabulary that you can share across team members
    By establishing a pattern library for your product, everyone on your team builds using defined UI patterns as a basis, rather than building their own ad-hoc elements.
  • Efficiency over time as your designs develop
    Even if your product grows over time, it is efficient to maintain because it is built on a core pattern library.

When designing your user interface, it’s helpful to refer to other UI design patterns to see what works and, equally, what doesn’t. UI Patterns is an excellent resource for doing this, gathering a wealth of design patterns.

By using your interface inventory as a starting point to identify common design patterns, you’re one step away from establishing the components you need to create and establish a design system. This will help ensure your UI is consistent and scalable.

Embracing atomic design

Before diving a little deeper and exploring atomic design principles, it’s important to give a little credit where credit’s due. Andy Clarke has been writing and talking about designing systems — not pages — for quite some time now.

Clarke’s insight — that we need to stop designing pages in isolation and instead focus on the creation of the systems out of which those pages are built — has informed much of the writing that has arisen around the importance of focusing on UI design patterns.

Sidenote: We’re fortunate that a number of designers have taken the baton and explored this line of thinking in depth. Brad Frost’s book titled “Atomic Design” and Alla Kholmatova’s book titled “Design Systems” are both overflowing with useful advice and should be required reading. I’d strongly recommend them both.

Open book about interface inventory
Design Systems by Alla Kholmatova.

Stressing the importance of adopting a methodical approach towards the design of interfaces, Frost states:

“[I’m] interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.

In searching for inspiration and parallels, I kept coming back to chemistry. […] All matter is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.”

Frost’s methodology establishes five distinct levels that comprise atomic design: atoms, molecules, organisms, templates, and pages.

By building from the atom up, we create fundamental building blocks of design that allow us to build anything.

Brad Frost’s atomic design methodology
Image by Brad Frost

Brad Frost’s atomic design methodology is a solid foundation on which to build a design system. By focusing on the smallest building blocks — then putting these together to create more complex designs — you can build a system that is both consistent and scalable. In the illustration above is the methodology applied to the native mobile app for Instagram. Image source: Brad Frost.

Chemistry was never my strong point, but essentially:

  1. Atoms come together to form molecules
  2. These molecules combine to form organisms
  3. These organisms are then used as the basis for the creation of (distinctly non-chemical) templates and pages

In short, we create small interface building blocks and then put these together to create progressively more complicated interface elements. The benefits of atomic design are that you can ensure consistency by combining elements at a granular level and then build up from there.

Continue reading part two of The Fundamentals of UI Design: Interactions and Animations.