How to Design
a User Interface
(UI)

The UI Design process is where simple blueprints become beautiful, usable interfaces ready for the real-world. Unlike UX design which establishes critical functions and flows, UI designers are responsible for creating the parts that users will directly interact with. Everything from button styles and iconography to breakpoints and typography must be considered throughout the UI design process.

In fact, when it comes to digital products or services, the user interface IS the product — at least from the perspective of the person using it. That means UI designers must be skilled in empathy and have the ability to communicate through a variety of explicit and implied techniques.

Like every discipline that contributes to the Design Thinking process, the goal of UI design is to help create the most desirable, feasible and viable solution. And as the world becomes increasingly digital, UI designers are playing a larger and larger role in that success.

By the time a project is ready for UI design, work completed in earlier steps of the Design Thinking process (i.e. Empathy, Define or Ideate) will have strategically aligned efforts. That means the direction and intention of the interface will have been established, leaving the UI designers to bring them to life.

While every UI design project is different, they can typically proceed through three major phases or steps: Review, Develop, Apply. These steps are often conducted in close collaboration with UX researchers, UX designers and developers — as well as strategy, operations and other stakeholders.

Note that UX research methods, and usability testing specifically, provide ongoing support during the UI design process, and should be leveraged when setting benchmarks, validating designs and guiding decisions.

• Review the UI Requirements. The UI Design process builds upon the outputs of UX research and UX design phases. Thus, the first step of the UI design process is to review the insights and decisions that form the strategic foundation for the project. Common artifacts to review include user stories, user personas, user journey maps, sitemaps, user flows and UX wireframes.
  
• Develop the UI Library. The UI library is the collection of all the elements required in the user interface. Good UI libraries provide pixel-perfect specifications for myriad elements, with clear instructions for how to use them. The development of the library must consider all the different elements needed both at launch and in the future, along with the devices and platforms which will display them. Common web UI libraries define elements such as buttons, forms, cards, modals, inputs, icons, fonts, colors and more.
  
• Apply the UI Elements. Applying the UI library to all the required interfaces in a complete experience is the last step of the UI design process. By developing the UI library first, designers are able to complete this step with greater efficiency and consistency than if they went straight to final designs. During this step, you can expect to refine the library as new gaps are uncovered.

While there are many approaches to the UI design process, following these three steps will help ensure consistency and scalability in the final design.

So how does the UI design process look in practice? What is the real difference between functional UX wireframes and final UI designs? What can teams expect from UI designers and the expertise they bring?

To demonstrate what designing user interfaces really entails, we can continue to build on the UX wireframes developed in the UX design process guide. While basic, these wires — and the context they were created in — provide the necessary framework for UI designers. Because UI design is about a lot more than simply eye-catching visual design. It’s about creating a scalable approach to building interfaces people want to use.

You can review details of the bike-store ecommerce example in UX design process guide before diving in, and refer to the brief summary below to get your bearings. Note that real UI/UX projects must also consider the myriad technical, competitive and operational aspects.

Unlike the UX Research and UX Design processes, UI design has a clear starting point: Wireframes. UX wireframes are the skeleton of digital interfaces, and are (or should be) the culmination of robust research and development cycles. Thus, the first step of UI design is to review these key artifacts, as well as the insights and perspectives that shaped them.

In practice, the UX wireframes often often created in close collaboration with multiple disciplines, including strategists, product owners, researchers, developers and UI designers. Thus, in most cases the UI designers will already have a good idea of the functional and technical requirements before the real UI design begins.

Another major difference between UI and UX design is the consideration of brand: UX designers are focused largely on brand-agnostic requirements, whereas UI designers are responsible for exhibiting the brand values — while also providing exceptional usability and functionality.

This focus on brand plays a major role in UI designers’ development of the interface “look and feel”. Thus, a young urban brand will require a very different look and feel than a conservative medical brand (for example). These brand values play a major role in all the UI design decisions, and will often dictate many elements such as colors and typography which must remain consistent across the entire scope of the brand — and not just within this particular interface.

Thus, during the first UI requirements review, UI designers can also expect to dive deeply in to the brand. If the brand has a codified set of styles (such as a “Brand/Style Guide”), these will set the stage for how colors, type, logos, voice and tone and other aspects should be considered. If no brand guidelines exist, such as with a launch brand, the UI designer will need to help develop a baseline set before getting started. However, in nearly all situations, the UI designers will inherit a set of rules and past examples to consider.

Besides the basic business and brand requirements, UI designers must always strive to develop user-centered solutions. And that means studying who the users are, and what goals they are trying to accomplish with the interface.

These “empathy” insights are generally captured during the UX research and design processes in the form of user story, user personas and user journey/story maps. Combined, these UX artifacts give the entire design thinking team a unified view of who the users are and how the solution can help.

Real UI/UX design projects typically involve dozens or hundreds of user stories for each persona. These are then organized into a multi-level hierarchy called a “user story map”, which gives design teams a simple way of breaking down complex experiences into manageable subunits, each corresponding to a specific user goal or stage in the journey.

A selection of user stories created during the UX design process is included below. Each correspond to a specific user persona — one expert cyclist, and one beginner. Since the perspective, experience and needs of each are very different, one could expect each to be represented by their own user persona.

UX sitemaps and wireframes are the most important requirements that a UI designer must consider before diving into design. While personas and stories provide helpful context, it is these architectural artifacts that give UI designers the skeleton they need to build on.

UI designers can expect to build off of a set of annotated UX wireframes. In our previous UX design example, we created annotated wires of the homepage and checkout page to demonstrate the level of detail and direction of these annotations. While these annotated wireframes can look like a complete experience, UI designers understand that they are simply a set of guides to work with, and are not an indication of the desired look and feel which is developed through a consideration of colors, layouts, alignments, effects and other visual design elements.

For our ecommerce UI design example, we have previously considered the basic pages that would be required to deliver the desired experience. These pages are captured within the sitemap below.

After considering the requirements of the interfaces, including the pages that will be needed, the brand that must be embodied, and the people who must be served, UI designers are ready to begin developing the UI library.

Like a brand guide, the UI library ensures that all the interfaces built for this experience adopt a consistent look and feel. Once the library is developed with all the necessary elements defined, creating new interfaces is a relatively simple manner. This is the core of the UI design scalability, and a major difference between UI design and other types of less-scalable graphic design.

Reviewing UX wireframes should indicate all the required elements (i.e. buttons, cards, forms, imagery, icons, etc). However, it will not indicate how those elements should look or behave, which is the goal of this steps.

Given how UI designers must integrate both branding elements with diverse user, technical and strategic requirements, it is often best to begin this step with mood boards. Mood boards describe a simple visual collage technique for defining the atmosphere you want your experience to create. Is it clean and minimal or bright and cheerful? Fast and efficient or balanced and beautiful? These types of aesthetic and stylistic considerations are often difficult to capture in words, and so mood boards offer an easy way to align on what the elements in the UI should ultimately create.

Mood boards for UI design lean heavily on the inspirations shared by stakeholders during Design Thinking Workshops. In our example, we previously identified Casper and Tesla as two brands with relevant aesthetics and values.

After getting alignment on the high-level mood, UI designers can begin to articulate specific attributes of the user interface. Given the number of attributes that UI designers must consider, it can be helpful to take a more systematic approach at first. One method for this is the SCALABLE method.

• Size: Specific dimensions and relative proportions
• Color: Which, where, when and why
• Aesthetics: Visual, emotional and typographic options
• Layout: Grids, hierarchies and expectations
• Alignment: Margins, padding, touch targets
• Borders: Color, thickness, contrast and style
• Language: Labels, tooltips and UX
• Effects: Animations and interactions

Having considered all the aspects and requirements, you are ready to prototype the actual user interface. This means real images, real colors, and (often) real copy — or at least a working draft.

Just like when prototyping screens during UX design, the UI prototypes are expected to undergo a series of iterations in order to arrive at the most usable and engaging design. For this reason, it’s best to prototype a few select screens as early as possible in the UI design process before finalizing the UI library elements. This makes it easier for teams to test and align on final designs before going too far.

While not every UI design project will involve usability testing, most would be improved by at least some testing. The value of testing during the UI design process — as opposed to during UX research or UX design — is that you can finally assess how users will behave in realistic environments. Testing users with wireframes or storyboards is great for conceptual alignment, but impossible to use for predicting quantitative metrics, such as how much time the new UI saved, or how specific visual decisions will be perceived by users.

Once the full-scale prototype has been iterated and aligned on, it’s time to apply all of those learnings to build the complete library. This means bringing the look and feel into every button, icon and image, ensuring that everything will fit together properly however they will be arranged.

The elements that comprise a library vary greatly between projects, but for a website UI design the following are commonly included:

• UI Elements: Buttons, Text Fields, Lists, Icons, Images, Avatars, Links
• UI Patterns: Cards, Carousels, Breadcrumbs, Menus, Modals, Forms, Messages
• UI Library: All the elements and patterns in a complete experience

With the UI Library established, all that’s left to do is apply all the elements to create the required interfaces. In web UI design projects, it is often sufficient to design only the core “template” pages that will be used to model future content on.

This is especially true when designing enterprise-level digital experiences. In these situations, UI designs are often implemented through Adobe Experience Platform or other content management systems, allowing content creators to build interfaces with familiar WYSIWYG editors and reusable code blocks.

Applying the UI elements in a consistent, engaging way is a satisfying experience and one that gets all members of the design thinking team excited and engaged. Below are a few fully fleshed out UI designs for our KBikes example demonstrating how different UX and UI design can be — and how they come together in the final experience.

The final step of the UI design process is the handoff to developers. While often overlooked, an efficient handoff critical to ensuring your beautiful UI designs translate to exceptional experiences across multiple devices and platforms.

A growing suite of tools such as Zeplin are helping to streamline the UI-to-Dev interface, allowing more precise designs and experiences to be created more efficiently than ever. It is even possible to integrate UI libraries directly into coding components, further reducing technical barriers to building great user experiences.

User interface (UI) design is the final step of the design thinking process where UX wireframes become fully functioning experiences. Designing user interfaces requires the careful consideration of interaction and usability. Unlike user experience design, user interface design must also consider branding elements and develop scalable libraries of visual design elements.

While the example in this guide pertained to website UI design, the same approach would be applied to any interface, including applications, devices and interactive displays/kiosks. Depending on the use case, there may be more user testing required — especially if the interface is one that users are unlikely to have experienced before.