The Fundamentals of UI Design

How to design interfaces that are consistent and scalable.

Image source: Christopher Murphy.
The Fundamentals of UI Design
Adobe Products Featured

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 A 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 pattern 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.

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 it helps to 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 design systems that are consistent across team members and that are 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. As Frost says:

“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.”

If you’re redesigning an existing product, an interface inventory starts by mapping out all of 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 sizeable 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 complete 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 design 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 pattern 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 of 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 that 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 others’ 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 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 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 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.

Getting a head start with UI kits

As designers working on the web for the most part, we’re incredibly fortunate to be a part of a community that celebrates a shared approach toward the work we do. We’ve seen an explosion of UI kits — systematically designed sets of user interface components — over the last few years, helping to make our lives a little bit easier.

There’s no sense in wasting time redrawing common UI components when a UI kit can you save you this time and effort. A well-designed UI kit can form the cornerstone of a digital product, be it a website or an app, ensuring it has a consistent look and feel, and visual identity.

Adobe XD UI kits for mobile (left) and web (right) are a great way to get a head start at the beginning of a design project. By providing typical components (sign-up, forms, profiles), they save you a considerable amount of time, removing the need to reinvent the wheel by redrawing commonly used components.

Adobe has partnered up with a series of world-renowned designers to create some fantastic Adobe XD UI kits, which are well worth exploring. They have also provided some great tutorials on starting your design with UI kits to get you up-and-running.

In addition to offering a number of free icon sets (designed by Lance Wyman, Büro Destruct, and Anton and Irene), they have also created a comprehensive set of free UI kits with pre-built templates for both web and mobile projects.

UI kits are incredibly helpful and can save you a considerable amount of time by saving you from redrawing commonly used elements. A note of caution, however. As with any generic kit, there’s a danger of falling into a template-driven approach in which one design looks very much like another. It’s important to use your kit as a starting point, onto which you layer the look and feel you established when creating your element collages.

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

For the latest trends and insights in UX/UI design, subscribe to our weekly experience design newsletter.

Recommended Articles