Get started with user interfaces

1. Overview

A User interface (UI) is any system that allows a user to interact (interface) with a computer or computer application.

In the context of real-time 3D projects, a UI is usually a combination of text, buttons, checkboxes, sliders, and toggles.

These elements can communicate with the user using rules or notifications. UI can also help the user carry out tasks, such as saving progress or adjusting settings.

Image from Unity’s Tanks demo project.

Image from Unity UI Samples on the Asset Store.

Every published application you’ve ever used has likely included some kind of UI.

In this tutorial and the ones that follow, you will learn how to use Unity’s UI systems to create an interactive settings screen.

By the end, your project could look something like the example below, or something entirely different, depending on your design decisions.

In this first tutorial, you’ll start by exploring exactly what UI design is and what it is not. Then you’ll open the UI project and customize your scene.

2. Before you begin

New to Unity?

This learning experience assumes that you are already familiar with the Unity Editor. If you’re new to Unity, the Unity Essentials learning pathway has been designed to help you get set up and ready to create in the Unity Editor.

Update the Unity Hub

Before you begin to set up your Unity project, consider updating your Unity Hub to the latest release. If you are using an older version of the Hub, there may be differences between the guidance provided and your experience.

Review the Unity Editor basics

If you need to refresh your memory of the Unity Editor basics, you can take a moment to review Explore the Unity Editor at any time.

3. What does a UI designer do?

Responsibilities

UI designers mostly concern themselves with what the UI elements look like and where they’re located on screen. More specifically, a UI designer will:

• Design menus, buttons, HUDs, pop-ups, etc. according to the art direction.

• Make sure all relevant information and functionality is present through the various UIs.

• Design with technical constraints and optimization guidelines in mind.

Check out the examples below to see well-designed UIs in applications made with Unity, including Arena of Valor and Ludo King.

Arena of Valor. © 2021 - Proxima Beta Pte Limited. Image from Unity Case Study.

Ludo King. © 2021 - Gametion. Image from Unity Case Study.

If the UI designer is comfortable with basic programming, they may also be asked to implement some simple UI functionality. More complex UI functionality, such as a character customization screen, would fall to a programmer.

Background

Most UI artists have the following foundational skills and experience:

• Traditional artistic skills, including knowledge of proportion, composition, color, etc.

• Good understanding of usability, clarity, and accessibility of interfaces.

• Up-to-date with the current design and typographical trends.

Basic programming is a plus, since UI is usually tied to simple functionality.

Tools

In addition to Unity, UI designers might use or be familiar with other software programs, including:

• 2D image editing software, such as Adobe Photoshop, to create textures and lay out interfaces.

• 2D vector illustration tools, such as Adobe Illustrator, to draw images, buttons, and icons.

4. What UI design is and what it is not

What is UI design?

UI design is the process of laying out graphical UI (GUI) elements in a compelling, yet intuitive way. UI should be clear, consistent, accessible, and appealing. When you’re using a well-designed UI, the experience is seamless and enjoyable.

If you’re not thinking about the UI design very much as you’re using it, that’s usually a good sign.

In fact, people say that a good UI should be invisible and get out of the user’s way.

Check out the example below from Last Day on Earth, which was made with Unity. Notice how the UI does not take attention away from the gameplay, which should be the focus.

Last Day on Earth. © 2021 - KEFIR. Image from Google Play Store.

What UI design is not

However, defining UI design can get confusing when you consider it alongside similar-sounding areas like user experience and user interaction design.

Below are some of those disciplines and how they relate to each other:

User experience (UX) design

• Answers the question: What’s the user journey?

• Goal: Ensure a positive overall experience with a product from start to finish.

User interaction design (IxD)

• Answers the question: What does the user need to achieve their goal?

• Goal: Allow users to accomplish their goals in the most efficient way.

• Is part of UX design.

User interface (UI) design

• Answers the question: What should the UI elements look like on screen?

• Goal: Make the interface easy to understand and easy to use without getting in the way.

• Is part of IxD, which is part of UX.

Information architecture

• Answers the question: How should information be organized and structured (not necessarily for interactions)?

• Goal: Structure content so users know where to go to find the information they need.

• Informs UI design, IxD and UX design.

Visual design

• Answers the question: What will look the best (not necessarily for interactions)?

• Goal: Make something visually appealing.

• Informs UI design, IxD and UX design.

There is no clear consensus on the precise differences between these disciplines, but it’s helpful to be aware of how these terms relate to each other at a high level.

5. Test yourself: Who does what?

Test yourself with an example. The screenshot below shows the inventory menu from an action RPG, which allows the player to equip items, use items from the inventory, and view current player stats.

Image from the Unity’s Creator Kit: Beginner Code project.

What might have been the responsibility of someone working in each of the following disciplines in order to arrive at the final product shown above?

• User experience design

• Interaction design

• User interface design

• Information architecture

• Visual design

Check your work

• User experience: Ensure the experience of equipping items is fun and satisfying for the user.

• Interaction design: Ensure the user can equip or use items in two clicks or fewer.

• User interface: Design the icons and interface layout so that it is very clear what everything is.

• Information architecture: Determine if it makes sense to split up items that can be equipped vs items that cannot.

• Visual design: Select the best possible colors for the background and text.
  
  

Now that you know what a UI designer does, let’s open Unity so you can try it for yourself!

6. Open the UI project and scene

To set up your Unity project:

1. Install Unity 6, if you haven’t already done so.

2. Download and unzip the project for this learning experience.

3. Move the project folder to a suitable location on your computer.

4. Add the Unity project to the Unity Hub.

5. Open the project from the Unity Hub.

6. In the Unity Editor’s Project window, open Assets > CreativeCore_UI > Scenes and then open the scene TutorialScene_UI_Outdoor.

In the TutorialScene_UI_Outdoor scene, you will find an outdoor scene with a single street lamp in it.

In the next step, you’ll customize the scene to look the way you want.

7. Personalize the backdrop

Press Play. What you see in Game view will be the backdrop of your UI. The title and menus will sit on top of what you see there.

If you don’t really care what your final project looks like, you can skip this step and just use what is currently framed in the Game view.

However, if you want to personalize your UI scene, take some time now to make it look how you want. With just a few quick changes to the scene and your camera position, it could look very different.

1. From the Project window, in Assets > CreativeCore_UI > Prefabs, add additional props to your scene that you want to include in your UI backdrop. You can also use primitive shapes like cubes and spheres to build your own custom objects. If you’re familiar with Probuilder, you can use that too!

2. Adjust the Rotation, Color, and Intensity of the Directional Light to change the time of day, as you learned in the Lighting tutorials.

3. Reposition the Main Camera to frame the objects nicely in your scene. Use the Field of View property to expand or restrict what’s in frame, as you learned in the Camera tutorials.

Once you have your scene framed just right, you’re ready to move on!

8. Which Unity UI system to use?

Before you start adding new UI elements, you should know that there are actually three entirely separate systems available for developing UIs in Unity: uGUI, IMGUI, and UI Toolkit. That’s a lot of similar-sounding acronyms, so let’s briefly look at each system.

• uGUI (or Unity UI) is a stable UI system for developing in-game interfaces. It is currently the most commonly used system, which you are most likely to encounter in other Unity projects.

• IMGUI (or Immediate Mode GUI) is a code-based system primarily for programmers to create debugging tools and custom inspectors for the Unity Editor itself. This is not often used for user-facing UI.

• UI Toolkit is a new system that will eventually be the primary system for developing UIs within Unity. The goal is for it to include all of the features from uGUI and IMGUI. However, this system is still in development.

You can read more about the pros and cons of each system in the Unity User Manual.

Since the UI Toolkit is still in development, we will use the uGUI system in these tutorials. uGUI is the best option for applications in production today.

As you use the uGUI system, you will learn UI design skills that will be valuable regardless of the system you are working with.

9. Next steps

In this tutorial, you learned what a UI is and how it fits in with other related disciplines. Then you opened your project and customized your scene to get it ready for UI editing. In the next tutorial, you will add your first UI element: a title.