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. Instead, UI design handles the visuals of the product while UX design handles the functionality.
In this guide, you’ll find a thorough introduction to the topic of UI design, covering:
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 (UI) 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 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 that 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, furnishings 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 navigation system.
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 them understand what their users expect when interacting with certain products, allowing them to design interfaces that are 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 prototypes
During the UI design process, UI designers will create prototypes, building on UX designers’ wireframes and early drafts of prototypes. 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.
- Figma: A web-based interface design tool built for fast and collaborative design. Figma is a vector graphics editor that will take you from early-stage ideation through to interactive prototyping.
- Gravit Designer: A web-based tool for UI design. Gravit Designer has an intuitive interface with robust vector editing tools and reusable components. Plus, it’s free!
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:
- Knowledge of basic design principles such as typography and colour theory
- Familiarity with industry-specific tools such as Sketch, Adobe XD and Figma
- Wireframing and prototyping
- 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
Is UI design a good career path?
If you’re creative and visually inclined, UI design can be a very good career path. There are an ever-growing number of websites and apps, and just about every one of them needs at least one UI designer to maintain its visuals.
As a result, there are a lot of UI jobs to go around and the pay also reflects that demand. According to talent.com, Jr. UI designers make approximately $60,000/year, mid-level UI designers make around $100,000/year, and Senior UI designers make around $134,750/year.
Learn more about UI design salaries with our guide.
Importantly, even with the rise of AI, the human knowledge a UI designer brings to the table is still invaluable. UI designers have real-world knowledge of visual design, user research and user behaviour, something AI is unlikely to replicate anytime soon. As a result, UI designers are still invaluable members of the product design team.
How to start a career in UI design
UI designers can come from any number of backgrounds. You can have a background in web and graphic design or something that has nothing to do with design at all.
If you’re a complete beginner, you’ll need to learn the basic skills and principles of UI design, and the best way to do this is through a course. Consider a professional UI design course, especially one that has been accredited by a university, such as UX Design Institute’s Professional Certificate in UI Design. This course covers all the core principles and practical techniques you’ll need to design high-quality user interfaces, plus a project and portfolio module, so you can apply to and interview for jobs.
You can learn more about the course and request further information here.
Emily is a professional writer and content strategist with an MSc in Psychology. She has 8+ years of experience in the tech industry, with a focus on UX and design thinking. A regular contributor to top design publications, she also authored a chapter in The UX Careers Handbook. Emily also holds a BA in French and German and is passionate about languages and continuous learning.
