Prototyping UI in Unity — Introduction

Mike Mariano
Design + Sketch
Published in
3 min readJan 28, 2018

Unity is one of the most popular game engines today, due to it’s breadth of cross-platform publishing to mostly all mobile operating systems and game consoles. The ability to have one project that builds to every platform is a no-brainer for many game developers, so it’s unsurprising that Unity has become the primary tool for most game studios.

However, for those not working in game development, there are many other options for prototyping, and Unity is not typically one of them. But as this series will show you, Unity is probably one of the most powerful solutions out there, and not too difficult to learn!

Why prototype UI in Unity?

If you’re not making games, why use Unity? Well there’s quite a few reasons, these are just a few:

  1. It’s free (Personal Edition)
  2. It’s cross platform (Windows and MacOS)
  3. You can publish to any device, console or browser (iOS, Android, PS4, Chrome)
  4. You can create flexible designs that adjust to all aspect ratios (Portrait, Landscape, 4:3, 16:9)
  5. If you’re at all interested in AR or VR, Unity is the tool to know

The biggest deterrent for most people is being unfamiliar with the software. If you’re not used to working in a 3D environment, it can be intimidating and seem complex. But as you’ll find throughout this series, as long as you can grasp some of the main concepts, it’s really not!

About this Series

This series is written both for designers new to Unity, and for those looking for more advanced techniques.

Section 1

The first half will be an introduction to UI in Unity, and will walk through the basics of the program from installation to the introduction of UI concepts.

Part 1 — Installing Unity and Creating a Project

Part 2 — Exploring and Customizing the Interface

Part 3 — Introduction to UI Components

Part 4 — Layout Components

Section 2

The Second half will build upon those basics by creating a functional prototype and installing to a device.

Part 5 — Creating the UI Navigation Bar

Part 6 — Creating the UI Photo Feed (Coming Soon)

Part 7 — Creating the UI Profile Page (Coming Soon)

Part 8— Adding Interactivity (Coming Soon)

Part 9— Installing to a Device (Coming Soon)

By the end of this entire series, you should have a pretty comprehensive understanding of how to create fully functional prototypes in Unity.

Prototype Preview

Here’s a preview of the prototype we will be making.

Screenshot in Sketch
Screenshot in Unity
Running on an iPhone 7 Plus

If you want to skip ahead, you can download this project here: https://github.com/marianomike/unity-prototype-photoapp

Now, let’s begin!

Next: Part 1 — Installing Unity and Creating a Project

--

--