All content in this course uses:

Get started with user interfaces

A user interface (UI) is what allows a user to interact with a program and a UI designer is responsible for making those interactions as clear and enjoyable as possible. In this tutorial, you’ll learn a bit more about what UI design is and the tools available in Unity to help you create UIs. Then, you’ll open your project and begin customizing your scene.

By the end of this tutorial, you'll be able to:

Define "UI" and the role of user interfaces in real-time 3D experiences.

Differentiate between UI design and other related disciplines, like User Experience Design and Information Architecture.

Distinguish between Unity's three available UI systems: uGUI (or Unity UI), IMGUI (or “Immediate Mode” GUI), and UI Toolkit.

CreativeCore_UI_U6.zip

) 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.

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.  

Overview

This learning experience assumes that you are already familiar with the Unity Editor. If you’re new to Unity, the

 has been designed to help you get set up and ready to create in the Unity Editor. 

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.

If you need to refresh your memory of the Unity Editor basics, you can take a moment to review 

Before you begin

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 

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.

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.

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.

What does a UI designer do?

) 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.

, which was made with Unity. Notice how the UI does not take attention away from the gameplay, which should be the focus. 

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:

Answers the question: What’s the user journey?

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

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

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

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.

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.

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

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.

What UI design is and what it is not

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. 

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?

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

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

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

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

: 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!

Test yourself: Who does what?

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

  In the Unity Editor’s Project window, open 

 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.

Open the UI project and scene 

. 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.

, 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 

to change the time of day, as you learned in the 

 to frame the objects nicely in your scene. Use the 

 property to expand or restrict what’s in frame, as you learned in the 

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

Personalize the backdrop

Before you start adding new UI elements, you should know that there are actually three entirely separate systems available for developing UIs in Unity: 

. That’s a lot of similar-sounding acronyms, so let’s briefly look at each system.

 (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.

(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.

 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 

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. 

Which Unity UI system to use?

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. 

Next steps

full-ui-menu.mp4

Designed for post-secondary and K-12 educators at accredited academic institutions teaching Unity in the classroom, the Unity Educator plan provides you with free access to the same real-time 3D development tools used by professionals to support your students.

Included in this plan are Unity Pro, cloud-based collaboration, cloud build, free Unity assets, and much more!

Creative Core Pathway Facilitator Kit.zip

Creative Core Pathway Facilitator Kit (Google Drive)

Unity Educator Hub

The Unity Creative Core Pathway Facilitator Kit includes everything you need to successfully bring this Pathway into your learning context including a syllabus, complete lesson plans, standards alignment, teacher preparation guide, and more. 

Unity Version 6.0