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
- 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
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.
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:
- Text elements (standfirsts, paragraphs)
- Images and media
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
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
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.
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
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.”
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
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:
- Atoms come together to form molecules
- These molecules combine to form organisms
- 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.