13 Feb 2024
|13 min
What is user interface (UI) design?
Learn all about user interface (UI) design, UI design principles and processes, and the skills you need to become a UI designer.
A definition of user interface (UI) design
User interface (UI) design is the practice and process of creating the visual and interactive elements of a device or piece of software. It's what you see on a screen or a device.
The role of a UI designer is to plan for and create the function, look, and style of products. UI designers focus on aesthetics and make decisions about colors, typography, images, animations, spacing, and responsive design.
While UI designers and graphic designers are often confused, they both perform distinct tasks. Graphic designers tend to focus on visuals, and UI designers focus on the interactions we have with a product.
The UI design process includes research and testing to confirm design choices. UI designers follow guiding principles when making design decisions. Some specialized UI designers are also experts in voice-controlled or gesture-based software.
Unfortunately, UI design also often gets confused or lumped in with UX design. User experience (UX) experts focus on the well-being, satisfaction, and ease of use of a product. While UX designers focus on the experience of the product, UI designers focus on the look and feel. Often UX and UI designers need to work in collaboration.
If you’re looking to understand what UI design is, want to build a career in UI design, or better understand what UI designers do, keep on reading.
What are the fundamental principles of UI design?
In the world of design, core principles help determine what makes for a good UI design. There are no set rules to UI design, but these six concepts are the ones veteran UI designers refer to.
Keep it simple
Simplicity means trying to reduce the amount of information a user sees. If something isn't necessary, see if you can remove it. Only add something when it helps the user understand the product.
For example, when designing a contact information form, ask for relevant details only, and nothing more.
Two examples of a new account registration form. On the left is a complex form, and on the right is simplified version. Consider exactly what information you need from users when they sign up to make this process quick and simple.
Predict and preempt
Show your users what the next step is, and predict what information or action they’ll take. Assume there will be mistakes sometimes. Make it easy for users to know what those mistakes are and how to fix them.
In this example from our platform, users can choose to add team members or skip ahead. We've given options for users follow the usual process, or skip ahead and come back to invitations later. This example of preempting what comes next, and providing an alternate option, is what this principle is all about.
Put the user first
Base your design decisions on what the user needs and wants. This means doing good research and making decisions based on what users say or do. Test out your ideas many times during the design process.
An example of preference test results in Lyssna, used here to help make decisions about which color scheme resonates best with the target audience.
Be consistent
Consistency is about making all the visual elements of your product similar. If you make a button a certain size and color, other buttons should look the same throughout the product.
Consistency means less visual clutter, making it easy for the user to understand.
Be clear, use common signposts
Don’t let users guess where a button is. And don’t try to be too clever with cute but hard to identify icons or menu items. Again, keep it simple. Make sure that what the user sees is clear and use text when an image doesn’t offer enough information to convey a message.
UI design kits, where commonly used and recognized icons are already designed for you, is a great way to avoid designing a signpost that users will find hard to identify.
An example of a travel-themed icon kit.
Consider accessibility
What looks good for one user might not work for another, especially if they have accessibility issues. Visual impairments, other physical limitations, and neurodivergence all need to be considered.
Elevate your research practice
Join over 320,000+ marketers, designers, researchers, and product leaders who use Lyssna to make data-driven decisions.
What is the UI design process?
UI designers often follow a similar process. Here are the steps they take.
1. Research and understand the brief
The first step is to make sure you understand what you're designing. In some cases, you might get precise instructions in the form of a brief. Otherwise, you'll need to do more research to understand the goals of the project.
2. Sketch and build a wireframe
Once the goal is clear, you can draw sketches and wireframes. These are initial drafts of what the final product will look like. Wireframes show where all the elements need to be. They're usually simplified, often black-and-white outlines of the imagined design.
3. Design the components
This is where you begin to define the project’s aesthetics. It’s where you define the style and design the core elements of the product. Some designers work with an existing style guide. Others start from scratch.
4. Define user journeys and task flows
This is where you clarify how a user gets from point A to point B, plus the detours they may take. UX designers and UX researchers are valuable for this stage of the process.
In some cases, a user journey is as simple as a series of screenshots showing the exact sequence a user will follow. In other cases, the user flow will be interactive. This can depend on the tool you’re using.
5. Create high-fidelity designs
This is the step where UI designers shine. It’s where you create all the visual elements, including colors, typography, images, icons, and animations. This is what makes the product look as close to the final version as possible.
Here, UI designers focus on visual consistency and branding. In some cases, the same software is used to design high-fidelity designs and prototypes. When that’s the case, there’s one less step to the process.
6. Build and test prototypes with real users
A prototype is an interactive version of a low- or high-fidelity design. Testing your prototypes with users is a necessary step before launching your product. Testing your prototypes shows you what’s confusing for users, and the results allow you to iron out errors and simplify the user flow.
A special note about usability testing
To create a great product, a UI designer won’t wait until the prototype is ready to test it out. Instead, they test their designs throughout the product design process. They use card sorting exercises to define the information architecture. They do preference tests as they refine the look of their components. They run design surveys to see where the friction points are. There are research methods and tests for every phase of the project.
What are the most common UI design tools?
There are so many UI design tools available that you could almost use something different for each step of the design process. Thankfully, some tools allow you to do everything in the one place. This helps make sure that, as a project moves from the ideation to the final design, there's coherence and consistency.
Let’s look at some of the most popular tools.
Pen and paper
Before we get into specific software, it’s worth talking about good ol’ pen and paper. These are ideal when you want to quickly sketch ideas for your wireframe and user journeys.
Wireframing tools
A wireframe is a cleaned-up and simplified version of your pen and paper sketch. It shows all the elements of the design without color, interactive features, images, and videos. Balsamiq and Sketch are great tools for wireframing.
Design and prototyping tools
There are many tools available for creating high-fidelity designs and prototypes. When you're getting started, pick a tool and get to know it well. A lot of UI designers use Figma, InVision, Illustrator, Axure, or Proto.io. Once you know how to use one tool, learning the others is easy.
Research and testing tools
There are two primary methods that UI designers use to gather data to support their design choices – moderated and unmoderated research.
Moderated research is done in person via focus groups, interviews, and card sorting exercises. Online tools, like Lyssna, are great for running unmoderated usability tests like prototype tests, design surveys, five second tests, first click tests, or preference tests. With Lyssna, you can test using your own participants, or get fast results using our integrated testing panel.
Who does a UI designer work with?
A UI designer rarely works in isolation. Below are some of the product team members a UI designer will likely work with.
Product owners or product managers
Product owners or product managers are the captains of the product ship. They make sure the goals of the project are clear and that the tasks are assigned to the right people at the right time. They might also take care of administrative tasks related to product and team management.
UX specialists
UX designers, UX researchers, and UX writers work closely with UI designers. Their research, findings, and decisions often overlap. In some cases, a single designer assumes the role of UI/UX lead.
Developers
Developers have the technical expertise to make UI designs come to life. They handle the back end of the product (coding, databases, programming) while UI designers work on the front end (what the user sees) of the product.
How to become a UI designer
Ready to start a career in UI design? You’ll need a good balance of technical and soft skills. You can also show potential employers and clients what your design strengths are with a portfolio.
Technical skills
Most UI designers start with a degree in graphic design and then become experts in a few of these areas:
Interaction design
Branding and style guides
Wireframing
Prototyping
User research and testing
Creating a design portfolio
After completing a degree, with or without a speciality, most UI designers will need to work on a portfolio so they can start looking for a job. Your portfolio can be include school projects, volunteer work, or even mock projects that simulate a real product. For UI design portfolios, you’ll need to host it your own website or a portfolio platform that allows you to share their work.
Soft skills
A degree and a portfolio are not all you need. Because UI designers usually work as a part of a team, these essential skills are also a must:
Creativity: You'll need creativity to convey messages, guide users to the right place, and bring products to life.
Problem-solving skills: Your job will involve helping users, considering what other team members need, and to staying on brief. This can often feel like assembling a giant puzzle.
Attention to detail: Writers need to spot typos. UI designers need to spot visual elements that seem out of place. All interactions should work as intended and elements should be consistent.
Collaboration: A UI designer works with many other product team members. You'll need to be able to take your team members' concerns into account when making design decisions.
Communication and presentation skills: As part of the job, you'll present and explain your designs to stakeholders.
Where to learn more about UI design
While we’ve covered the basics of what UI design is, you can keep learning and find like-minded UI enthusiasts on these sites.
The Lyssna blog: Our blog can help you understand user research and UX/UI design.
Dribble: Part community, part visual blog, Dribble is a place where you can share your designs, get feedback, and get inspired by other designers.
Adobe XD Ideas: Run by Adobe, this blog doesn't stop at teaching you how to use their software. They also go in-depth by covering other topics related to UI such as design principles and processes, user research, information architecture, general creativity, and emerging technology.
DesignerUp: While they’ve got a lot of info about design, DesignerUp's free UI designer crash course is worth a look. From there you can decide if you'd like to deepen your knowledge with the rest of their resources.
CareerFoundry: This site is ideal if you're looking to change careers in tech. They offer courses on UI design, UX design, and web development, with a specialized course on UI for UX designers.
Lyssna has all the tools you need to test your prototypes and undertake user research so you can design confidently.
Your go-to user research platform
The best teams use Lyssna so they can deeply understand their audience and move in the right direction — faster.
--
Marie-Pier Rochon is a Brisbane-based UX copywriter who specialises in making complicated technical topics sound simple. She loves learning and writing about UX, design, and technology, and wrote a book called UX Writing Basics. You can also find her on LinkedIn.
You may also like these articles
Sign up to our newsletter
We'll keep you updated with the latest UX insights and more.
