STUDIO MODULE 2: PROJECT 4 - UX/UI ELEMENTS

 

STUDIO PROJECT 4 - UX/UI DEsigns

Be sure to review the Project 4 Description in Canvas BEFORE starting these tutorial videos. The Canvas description contains all of the instructions and requirements, while this page contains video tutorials that cover each of the project-processes in more detail.

This project will continue to introduce and explore Adobe Illustrator and vector editing concepts. Similar to the environment asset project, Illustrator is not the only tool used by game designers to develop UX/UI components, however, it is very commonly used for this specific purpose, and, ideally, these types of components are always developed in a native vector format (as opposed to a pixel-based format). There are other industry standard programs specifically made for developing UX/UI designs, such as Sketch App and Adobe xD, however, Illustrator is still very functional for this type of development (I work with a mix of Illustrator for more complex designs and iconography, and Sketch App for layouts and template systems).

Additionally, in a typical game art production pipeline, you would not be creating or even testing specific UX/UI elements BEFORE defining the overall game mechanics, controls and gameplay specifics. This project jumps forward a few steps in the pipeline process in order to address this very important - and sometimes overlooked - art production step.

Approximate Total Video Time - 90 Minutes

Setting up Files

Create a new Illustrator document with the environment configuration of your choosing and the vectorized pixel art character assets. This will be the “screen” that you will be developing interface elements for.

Ensure the environment and character assets are sized to the correct dimension / aspect ratio for the format you are working with.

Convert Character + Any Object Assets to Vectors

If you have not already done this, follow this tutorial to convert pixel-based assets to vectors. You are also welcome to re-create any of these assets in Illustrator following your own process / style.

Create UX/UI Elements

Using the tutorial videos below, create and position the following elements:

  • Way-finding or navigation component that includes a clipping mask

  • Status, progress or health bar / meter

  • At least 2 different icons / buttons (these can be related, but cannot be identical)

  • Numerical counter - could be tied to inventory, time or points

  • Line Text + Area Text

Export File + submit to Canvas

The instructions below are for the previous project, but the process is the same.

Also, a few reminders of your options with this video format:

  1. Pop out of Canvas and watch in a new tab if any of the features aren't working

  2. There are fullscreen and CC (Sub-title) options available in the right hand corner. For being YouTube auto-captions, these are pretty clear. I think they must have improved their algorithm. Please email me with any accessibility needs.

  3. If you are feeling pressed for time, but don't want to miss anything, you can watch with audio in 1.5 speed by hitting that little gear icon.