User interface (UI) design is the process of designing the look, feel, and interactivity of a digital product. It’s important to note that UI design is not the same as UX—although the two regularly go hand-in-hand.
In this guide, you’ll find a thorough introduction to the topic of UI design, covering:
- What is user interface (UI) design? A definition
- What’s the difference between UX and UI?
- An overview of the UI design process
- 6 Fundamental UI design principles
- An introduction to UI design tools and software
- What are the most important UI design skills?
UI design is a vast and broad field, so we recommend using this guide as a starting point for further research.
What is user interface (UI) design? A definition
A user interface is the point of interaction between humans and computers. User interface design is the process of designing how these interfaces look and behave.
Imagine you’re using an app on your smartphone to book flights. The screens you navigate, the buttons you tap and the forms you fill out are all part of the user interface.
A user interface is made up of the following elements:
- Input controls: These are interactive elements that enable a user to enter information. Input controls include things like checkboxes, buttons, text fields and dropdown lists.
- Navigational elements: These help the user to navigate an interface in order to complete their desired task. Navigational components include things like search fields, sliders and hamburger menus.
- Informational components: These communicate useful information to the user, for example through message boxes, notifications and progress bars.
- Containers: Containers are used to group content into meaningful sections. A container holds various elements, keeping them to a reasonable maximum width based on the user’s screen size. An example of a container in UI design is the accordion menu—a vertically stacked list of headers that can be clicked to hide or show content.
UI design considers all of these elements and how they work together to create interfaces that are both easy to navigate and visually pleasing. As such, UI design covers:
- Interactivity—how the user interface and its various elements behave and function. For example, what happens when a user clicks on a particular button.
- Visual design—how the interface looks, considering things like colour, typography, imagery and graphics, logos, icon design and spacing. A variety of resources exist to help in this process. for example, the Flaticon website offers an extensive library of free-to-use icons and other graphics that can be implemented in your designs.
- Information architecture—how the content within the user interface is organised and labelled.
A well-designed user interface is crucial to ensuring a good user experience. Now we have a basic definition of UI design, let’s consider the difference between UX and UI design and how they work together.
What’s the difference between UX and UI design?
User experience (UX) design and user interface (UI) design go hand in hand but they are two distinct disciplines.
Colman Walsh, CEO of the UX Design Institute, likens UX and UI design to architecture and interior design:
As Colman explains: if you were tasked with building a new 5-star hotel, you’d need an architect to design the overall structure of the hotel. Before designing anything, they’d consider key questions such as what are we building? Why are we building it? Who are we building it for?
The architect would then plan out the structure of the hotel, considering the layout of all the different rooms and how the guests will move around the hotel.
With the hotel blueprint mapped out, the interior designer steps in to consider all the visual aspects of the hotel. They consider things like lighting, furnishing and materials to create a certain look and feel.
In the context of product design, UX designers are the architects and UI designers are the interior designers.
UX design considers the entire user experience from A to Z, always keeping the target users’ needs, goals and pain-points in mind. The goal of UX design is to create products and experiences that are easy, efficient, enjoyable and rewarding for the end user.
While UX considers the overall user experience, UI focuses on the visual and interactive elements a person uses to interact with a digital product. What does the user see when they use a digital product and what touchpoints do they encounter? How does the visual appearance of the interface help them to navigate and complete certain tasks? Which elements should go where? Does the product’s aesthetic capture and reflect the brand?
A key difference between UX and UI is that while UI design relates solely to digital interfaces, UX design can be applied to anything, not just websites and apps. Anything that can be experienced can be designed, whether it’s the experience of going into your local bank to open an account, ordering something online or getting directions from your Sat Nav.
UX and UI call upon different skills, tools and processes but both are concerned with usability, accessibility and creating a great experience for the user. You can learn more about the differences between UX and UI design in this guide.
An overview of the UI design process
Just like the interior designers in our hotel analogy, UI designers come in at the later stages of the product design process. Some key steps in the UI design process include:
Understanding the context
You can’t design the user interface for a product without knowing who will be using it and what they’ll be using it for. The UI designer will start by getting familiar with the project brief in order to understand the target audience they’re designing for and the purpose of the product.
Conducting competitor analysis
UI designers might conduct competitor analysis to see what other brands operating in the same space are doing. This helps you to understand what your users expect when interacting with certain products, allowing you to design interfaces that feel familiar and are therefore easier to use.
Designing screens and UI elements
Of course, a substantial part of the UI design process focuses on design. UI designers will design all the individual screens that make up the user journey and the different elements that feature on these screens. This includes designing icons and buttons, selecting or creating imagery, making decisions about colours and typography and designing any animations and interactions.
Creating wireframes and prototypes
Throughout the UI design process, UI designers will create wireframes and prototypes. In the early stages, low-fidelity wireframes can be used to map out the position of different elements on the screen. As initial ideas progress to concrete design decisions, high-fidelity, clickable prototypes are used to model the final look and feel of the product. With high-fidelity prototypes, UI designers can communicate not only what the product UI should look like but also how it should behave when the user interacts with it.
Handing off to developers
Once the product UI has been finalised, it’s over to the developers to turn the UI designer’s prototypes into a real, working product. It’s important to be aware that moving from high-fidelity prototypes to development might not always be straightforward as developers and other stakeholders may have feedback, requiring you to iterate on your designs.
6 Fundamental UI design principles
There are certain guiding principles that inform the UI design process. These include:
Consistency
The most delightful, user-friendly interfaces are those that are consistent. UI designers should strive for visual consistency—keeping fonts, colours, buttons and icons uniform throughout the product—and functional consistency, ensuring that certain elements represent the same function or action in all contexts. The more consistent the UI, the easier it will be for a user to get to grips with.
Familiarity and predictability
This relates to how a user expects a particular interface to function. Based on our experience with similar websites and apps, we learn to associate certain UI elements with certain actions. We also expect things to be in certain places (for example, when browsing a website, we’d usually head to the top of the page to find the menu). UI designers should leverage familiarity and predictability to create comfortable, user-friendly interfaces.
Feedback
As the user moves through an interface, it’s essential to provide them with feedback. This guides them towards their goal, letting them know if they’ve successfully completed a certain action or informing them if something’s gone wrong. Feedback can be provided visually — like a tick appearing on the screen to let the user know their desired action is complete — or through clear, concise messaging.
Flexibility
When designing an interface, it’s important to provide flexibility in terms of how users can complete certain tasks. Ultimately, your user interface should be consistent while simultaneously allowing for some degree of customisation depending on the user.
Efficiency
While new users might require more guidance, experienced users should have access to shortcuts and accelerators which enable them to speed up frequently-performed actions.
Accessibility
UI designers have a responsibility to create interfaces that are accessible for all users. This includes providing sufficient contrast between text and the background it’s placed on, ensuring that interactive elements such as links and buttons are easy to identify, leaving enough space around buttons and touchpoints and creating designs for different sized viewports. You can learn more about designing for web accessibility here.
An introduction to UI design tools and software
UI designers use various tools and software to help them create delightful, interactive interfaces. Some of the most popular UI design tools include:
- Sketch: A vector graphics editor used for drawing, wireframing, prototyping and design handoff. Sketch is considered an industry-standard design tool, used by both UX and UI designers.
- Adobe XD: Another all-encompassing vector-based UI tool, Adobe XD is used for early ideation and low-fidelity designs, right through to animations and high-fidelity, interactive prototypes.
- Figma: A web-based interface design tool built for fast and collaborative design. Just like Sketch and Adobe XD, Figma is a vector graphics editor that will take you from early-stage ideation through to interactive prototyping.
You can discover more tools in our complete UI design tools guide.
What skills do you need to be a UI designer?
If you’re interested in UI design as a potential career path, you might be wondering: What are the most important skills for a UI designer to have?
The most important job-specific UI design skills are:
- Wireframing and prototyping
- Knowledge of basic design principles such as typography and colour theory
- Familiarity with industry-specific tools such as Sketch, Adobe XD and Figma
- An understanding of UX design
- Knowledge of interaction design principles
- Knowledge and understanding of information architecture
In addition to those hard skills, UI designers will also need to demonstrate:
- Creativity and an eye for detail
- Empathy and an interest in accessible, inclusive design
- A collaborative spirit and excellent communication
- An aptitude for problem-solving
If you’d like to learn these skills and become an expert UI designer, consider a professional UI design course. The Professional Certificate in UI Design offered by the UX Design Institute covers all the core principles and practical techniques you’ll need to design high-quality user interfaces, plus a project and portfolio module.
You can learn more about the course and request further information here.
