What Is User Interface (UI) Design? The Beginner’s Guide

“How do I use this?” These are the last five words that a UI designer wants to hear.

When creating a website, app, wearable, or any digital product, you want it to be as easy and efficient to use as possible. That might mean making the log-in button obvious on the homepage of a membership site, or adding a cart icon in a clear spot on an ecommerce website so visitors can go to the checkout page immediately.  

These decisions are part of user interface (UI) design. In this post, we’ll cover everything you need to know about this topic, including:

• what is UI design;
• UI design principles;
• UI design tools;
• how to design UI for a website; and
• best UI design examples.

UI plays an essential role in the user experience. A user will not have a good experience if the design of the app is not intuitive or cohesive — but UI is not the same as UX. When comparing UX vs UI, you’ll find UX is a more all-encompassing term. It is the process of researching, developing, testing, and refining all aspects of a product to ensure the user’s needs and expectations are met. UI, on the other hand, is more cosmetic, focusing only on the product’s presentation.

That does not mean the UI designer’s job is easy, however. They must decide what to put on the page and where. For example, the logo might be placed at the top of the page, or the bottom, or both. The buttons might change colors when a user hovers over them, or have no animation. Keeping the hierarchy and interactivity of elements in mind, the UI designer must ensure that every visual element is attractive, engaging, and aligned with the other elements on the page as well as the brand as a whole.

UI Design Principles

While every application will require a unique interface, there are a few fundamental principles that should guide any project. You’ll find dozens online and in textbooks, but there is a handful that are most well-known and regarded. These include the 10 Usability Heuristics for UI Design by Jakob Nielsen, The Eight Golden Rules of Interface Design by Ben Shneiderman, and Principles of Interaction Design by Bruce Tognazzini. Most of these principles overlap, so we’ll condense and summarize them below.

1. Be consistent.

Consistency in the colors you feature, typography you choose, animations you create — even in the words you use — will lead to an overall cohesion in your interface that’s important to the user experience and to your brand identity.

For example, say on one form, the button text is “Submit” and on another it’s “Send.” Your users should not have to wonder whether these different words mean the same thing. Making all button copy for forms either “Submit” or “Send” will maintain internal consistency, which is one half of this principle.

The other is external consistency. That means you want to follow the conventions of other products to avoid forcing your users to learn something new. For example, in the navigation menu of virtually any site, you’ll find an option labelled “Home.” This refers to its homepage. Now imagine you had a navigation option “House.” Most users would figure that meant the homepage, but not without spending an extra second or two puzzling it out. You can avoid increasing the user’s cognitive load in this way by following the conventions set by other websites and applications.  

2. Make users feel in control.

You want to make users feel like they’re in control of the interface so they will spend more time exploring and learning the application. That means enabling them to make mistakes or reverse their actions. So popups should have clear close buttons, checkout pages should have easy and clear ways to go back or edit the cart information, editors should have undo and redo options, and so on.

Here’s an example of a lightbox popup on LoveOhLou, which clearly offers the user the options to enter their email address or click the close button.

Image Source

3. Provide feedback.

Another way you can instill confidence in the user is by providing them feedback as they navigate and interact with the interface. The first point of feedback might be a loading animation that tells the user that their request to visit the page was successful and the content is being retrieved. There are plenty of other ways you can inform the user.

Take an order confirmation message on an ecommerce site, for example. Informing the user that their order has been confirmed can provide a sense of relief or accomplishment. Otherwise, a user might be unclear whether their order was successful and try again and duplicate the order, or exit out before placing it.

Another example is telling users how far away they are from free shipping before they checkout. The Wrap Life provides this important information to set the user’s expectations of what their final cost will be, and to encourage users to spend more.

Image Source

4. Enable users to resolve errors.

A user interface can’t simply enable users to make mistakes and stop there — it must also enable them to overcome those mistakes. That’s where error messages come in. An error message that uses plain language and clear visuals to indicate the problem and suggest a solution will allow users to understand, fix, and avoid the same mistake in the future.

A common example of an error message is the “incorrect password” notification you’ll get on a login page. This message will often suggest two ways to solve the issue: one, you can try inputting your password again or two, you can reset your password.

On Package Free Shop, it will simply provide the error message that the email address or password inputted is incorrect. The user can either continue trying to guess the combination, or click Forgot Password to reset it.

Image Source

5. Prevent errors.

You want to provide users with autonomy, but ensure they can still navigate the interface and complete actions successfully. That’s why you should not only have mechanisms to react to errors, but to prevent them. You can prevent errors by providing the user with undo options, required steps to confirm their personal or payment information, warning messages, or constraints that prevent the user from completing the action.

Consider the usual restraints you face when setting up a password. Usually, the password has to meet a certain length requirement, have a combination of letters and numbers, contain at least one special character, and be unique. You can’t create a password until you meet these requirements. This helps prevent users from creating passwords that other users have already chosen or that your application can’t accept or process correctly. It’s also a security measure.

You’ll see another common example of error prevention if filling out a form incorrectly. If you leave a required field blank, for example, you won’t be able to submit the form. Instead, you’ll get an error message asking you to review the form and correct the mistake. Here’s an example below.

Image Source

6. Don’t rely on users to remember information.

No matter where the user is on the interface, whether they’ve scrolled down to the bottom of the homepage or clicked that they’re ready to checkout, they should have all the information they need to take their next step. They shouldn’t have to recall information from another part of your site, or find it by scrolling up the page or hitting the back button.

Say, for example, you’re offering a discount. The code is listed in an eye-catching banner on your homepage — but nowhere else on your site. That means when the user is on a product page, they might be wondering how much that discount was again. Or if they’re on the checkout page, they might have to go back to the homepage to copy the code. During their search, they might decide to abandon their cart or your site altogether.

You can avoid this situation by ensuring that information is easy to see or retrieve throughout the user interface. For the example above, you might place a banner with the discount code on every single page of your website so that it’s easy to find no matter where the user is.

When offering a discount, the UX-based footwear store COIX features a hero image on its homepage as well as icons showing the discount amount on its product archives page. It also shows the reduced price on each individual product page so that the user doesn’t have to recall the discount amount or do any math to figure out the new prices.

Image Source

7. Keep it simple.

Keeping the user interface simple doesn’t mean make it flat and avoid shadows, effects, or other decorative elements. It just means use a minimalist approach when designing the interface. Think: what elements must I include to enable users to complete their goals. Anything else will compete for the user’s attention and is likely better left out.

8. Design for different types of users.

Let’s say you’re designing an interface for a content management system. Some users might have a lot of experience with other CMS platforms, while others might have never used one before. That’s why it’s important to design with both experts and beginners in mind.

You can do this by providing demos or tooltip suggestions for beginners, and shortcuts and other accelerators for experts. All of these features should have options to skip or exit out at any time. That way users that need instructions can make use of the demo and suggestions, while more advanced users can get right down to using the platform and its shortcuts.

The WordPress admin dashboard provides an excellent example. Beginners can click the Help tab to find information about the navigation, layout, and content of the dashboard, and links to support threads or documentation. More advanced users can simply leave this tab minimized.  

1. Understand your user’s pain points.

Understanding your user’s pain points is an essential first step in the UI design process (and the UX design process). It’s not just about demographics. How old they are, where they live — these are not the most important questions. You have to understand what your users need (including what they don’t know they need), what expectations they have, and what challenges they face in accomplishing their tasks. Only then will you be able to create a user interface that’s as simple and effective to use as possible.

More than data and analytics, this will take empathy. Interviews, online surveys, and user testing sessions are just a few ways you can gain insight into the people who will be using your website. These insights will inform every stage of the UI design process.

2. Write user stories.

After you’ve performed your interviews, surveys, and user testing, then you’ll have lots of rich information about your users. One way to use and organize this information is to create user stories. According to UI/UX architect Tom Brinton in an article on UXBooth, user stories describe a basic goal that the user wants to accomplish using the application. They’re usually only one sentence and follow this format: “As a user, I want to … [some goal].”

Think of some goals that a user on a meal delivery service kit might want to accomplish. Here are some examples using the user story format:

• “As a user, I want to create a new account.”
• “As a user, I want to log in.”
• “As a user, I want to add my payment information.”
• “As a user, I want to change my address.”
• “As a user, I want to change how often I receive a delivery.”
• “As a user, I want to change the day I get my deliveries.”

You’d need to brainstorm a lot more user stories to identify all the goals of users for the meal delivery service kit. While this step might take a significant amount of time, it will be worth the effort. Identifying user stories first will ensure that the user’s needs and behaviors dictate the design and functionality of the application — not the other way around.

3. Make an interface inventory.

Now that you have a clear idea of what the user wants and needs, you can create an inventory of the UI elements and features required for the user to accomplish their goals. Web designer Brad Frost refers to this as “the interface inventory.” You’ll need typography, images, media, tables, forms, buttons, a navigation system, and any other odds and ends that make up an interface.

If you and your team have already designed some of these components or used them in other marketing collateral, then Frost recommends taking screenshots of them and compiling and categorizing them in a PowerPoint. You’ll be able to identify any inconsistencies at this stage — maybe you designed a button with rounded edges, and another team member designed it with square edges — and begin identifying patterns. This will be great for streamlining the UI design process.

4. Identify design patterns.

As you finalize your interface inventory, you can identify common design patterns. Design patterns are general solutions to recurring problems in software design. They’re not code, but rather a template or description for solving a problem that can be applied to different situations. For example, say the problem is that a website has many sections, but limited space for a navigation menu. In that case, a vertical dropdown menu could be a solution. Identifying these patterns will help maintain consistency and efficiency in the UI design process.

5. Create a prototype.

A prototype is a semi-functional layout that offers a high-fidelity preview of how the actual application’s interface will look and feel. Most prototypes won’t have the app’s full functionality, but it will simulate how the app will work and allow clients and other stakeholders to click around the interface. With the prototype, UI designers and other stakeholders can demonstrate and discuss how the elements would work, test their ideas, and make changes. At this stage, UI designers typically hand off their designs to a developer to start implementing.

Now that we understand the steps of the UI design process and how important prototyping is, let’s look at some tools that can help you create responsive and interactive prototypes.

1. Justinmind

Justinmind is a free tool for designing responsive and fully interactive prototypes. You can design the style, size, and layout of UI elements to fit the look and feel of different screens, and use a full range of interactions, animations, and transitions to design the interactivity of your interface.

2. Sketch

Used by over one million people, Sketch is a design platform that enables users to create prototypes while collaborating with a team to bring their ideas to life. As a vector-based tool, Sketch allows you to easily resize a drawing, prototype, or wireframe without losing quality. To use Sketch, you can make a one-time payment or pay a monthly subscription.

3. Marvel

Marvel is a flexible tool for creating wireframes, mockups, and prototypes for any device. You can build mockups within the tool, upload your images, or sync designs from Sketch. With Marvel, you’ll get millions of assets, stock photos, and icons to add to your designs. At any point, you can provide your team or other stakeholders with visibility into your project and leave comments or annotations on others’ designs. There’s a free plan as well as two premium plans and an enterprise plan.

4. Wondershare Mockitt

Wondershare Mockitt Design is a rapid prototyping tool with a library of built-in UI assets and templates. You can drag and drop UI components onto the page, create and reuse your own libraries, and work on the same page as teammates to collaborate in real time. There’s a free version in addition to two premium subscription plans.

5. Invision Studio

Invision Studio is one of the most popular free prototyping tools among UI designers. Like Sketch, Invision Studio is a vector-based tool. That means you can quickly and easily design, adjust, and scale your high-fidelity, interactive prototypes to fit any screen automatically. You can share your designs using Invision Studio’s Boards features, and clients and teammates can comment directly on your designs.

6. Figma

Figma offers powerful design features for UI designers. You can create animated prototypes in less time, adapt them to different screen sizes using the constraints feature, and reuse elements across your projects using the components feature. You can also co-edit the same project to ensure you can offer and respond to feedback as you design.

7. Adobe XD

Adobe XD is an all-in-one tool used by UI and UX designers. You can wireframe, animate, prototype, collaborate, and more. Since it’s vector-based like Sketch and Invision Studio, Adobe XD enables you to create high-fidelity designs for any screen. There’s a free plan as well as paid plans for individuals and businesses.

Best UI Design Examples

You know the process and tools you need to design a user interface. Now let’s check out some examples from real websites and apps that might inspire you to create your next project.

1. Wine + Peace

Wine + Peace is an innovative wine company that strives to connect consumers to the most exciting wines and producers in America. While it ships wines from all over the country, Wine + Peace is limited by direct wine shipment laws in some states. Rather than rely on consumers to navigate to its FAQ page, Wine + Peace features a banner on every page where users can input their zip code to check if the company is able to ship to their areas.

This is an excellent way to make users feel in control, provide them with important information, and prevent them from placing an order they can’t fulfill, without relying on them to recall or find the information themselves.

2. Naba Zabih

Naba Zabih is a wedding and elopement photographer who travels across the US and the world for weddings. With the motto “I believe in magic,” Zabih has designed her site to look romantic and dreamlike with an earthy color scheme and script typeface used consistently down the page.

As she does with her photos, she aims to tell a story with her site, using lots of images, transitions, animations, and white space so the experience of scrolling through the site is more like flipping through a photo album. This portfolio site provides an excellent example of designing a UI with consistency and simplicity.

3. Delassus Group

Delassus Group is a Moroccan grower of snacking tomatoes, citrus, grapes, avocados and flowers. When you first visit the site, there’s a 60-second video explaining when the Delassus Group was first founded, what it produces, and its social responsibility mission.

Users who aren’t familiar with the company or are visiting the site for the first time can watch the whole video with or without sound. Those who are familiar or repeat visitors of the site can simply skip the video and be redirected to the homepage. This UI not only provides users with control over their experience — it’s also designed for different types of users.

4. Hi, skin

Hi, skin is a skincare service that offers customizable and personalized facials and face workouts for every unique complexion. To demonstrate its commitment to its customer’s happiness and skin health, Hi, skin’s website features images and videos of a diverse group of models taking care of their skin, smiling, and laughing.

It also offers several clear paths for users to learn more about the company’s team of estheticians, services, and locations so users can explore the site as they please. Striking a balance between media, lots of white space, and little text, you’ll notice the pops of color that draw the user’s attention to different elements. The orange button in the top right corner of the video above, for example, encourages users to book an appointment.

5. HalloBasis

HalloBasis is the website of design pair Felix Vorbeck and Johannes Winkler. Specializing in visual communication, the whole site is a testament to their skills in branding, graphic design, and web design.

Its “Accept Cookies” message deserves special mention. It provides users with only the most essential information about their cookie policy and then offers them the options to accept them immediately, or to learn more. While the popup’s design is simplistic, its positioning at the top of the page — where it remains as the user scrolls — emphasizes the importance of the user accepting cookies without completely disrupting their experience. 

6. Spain Collection

Spain Collection is a tourism website that offers deluxe travel experiences in Spain and Portugal. Its motto is: “Live your own unique adventure!” So it makes sense why the website offers the user so much autonomy.

On the homepage, they can click on a range of videos about the company, CEO and founder, and other team members to play them, or scroll past them. They can click on different collections featured in a slider toward the bottom of the page, or they can click on collections from the navigation header. If they do, they’ll be taken to a page that encourages them to either choose an experience or a destination, with multiple options for each.

7. Tasty Burger App

Above is not the app you’ll download from the app store, but a UI design created by the Tubik team. This UI is designed with two users in mind: the user who wants to browse, and the user who knows exactly what they want to order.

For users who want to browse, there are filter options and photos and key information, including pricing, of each menu item. After clicking on a  specific product, they can click on the tab labelled ingredients to see what’s in the product and customize it. For users who know exactly what they want, color accents highlight prices and calls-to-action like “Add to Cart” for quick scanning and checkout.

8. Dribbble

Dribbble is a website created for design professionals to find and showcase their creative work. It aims to do that on every single page of its site, including its 404 error page.

Rather than find themselves at a dead end, lost visitors are redirected to a page that features popular designs of a specific color. If they’re not interested, they can use the slider to browse designs under different colors, or they can use the search bar to find a specific design or designer. They can also click the logo in the top left to return to the homepage, or click “Contact us” in the top right to be taken to the help center. This makes users feel in control of the interface, even when they make a mistake or click on a broken link.

9. Linkedin App

Image Source

The LinkedIn app has a simple user interface that’s consistent with its branding: you’ll recognize the typeface, blue and gray color scheme, and icons used on its website.

The app particularly excels in its user onboarding flow. Once the user starts to create their account, they’ll be guided through different stages of the process. Various screens will invite the user to complete their personal information, confirm their email, follow LinkedIn groups and thought leaders, and accept suggestions to add more people to their professional network. While each screen will offer a brief explanation of what they’re being asked to do, users can choose to skip some of these steps and complete them later.

The Importance of UI Design

Every day, we interact with user interfaces — whether it’s using a microwave, logging into an app, or making a purchase on an ecommerce site.  Successful UI design can make the difference between an excellent user experience and a poor one. Understanding and applying UI design principles as well as the guidelines of website design — simplicity, navigability, consistency, and user-centricity, among others — and using the right tools can help you create the best interface for your product.