STUDIO PROJECT 5 - CREATING USER INTERFACE DESIGNS FOR GAMES

Be sure to review the Project 5 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 work with Adobe Illustrator and vector editing concepts, and introduce User Interface {UI} and User Experience {UX} production fundamentals. You will design an inventory interface specific to the content and visual style of your game, while working with some UX/UI conventions. Vector editors like Illustrator are crucial for creating and visually prototyping most visual interface designs for things like games, applications, programs, and websites. There are more specialized programs to create UX/UI designs, such as a AdobeXD and Sketch {formerly SketchApp}. These utilize similar vector graphics processes, but I have found Illustrator to be a more flexible tool for introducing UI/UX design and production concepts.

In most cases, you would not be designing visual interfaces for something like an inventory system or level map before fully developing the overall game design, but, for the focus and goals of the course, we are skipping ahead a few steps. That being said, it is very helpful to develop and prototype visual aspects of an interface - such as the way components look, how things are organized on a screen, the size of icons and buttons, etc - before trying to implement the entire system. This is because the visual design of interfaces can be very linked to the overall functionality - for example, it is much more efficient to know if a button is too small to read BEFORE that size is hard coded into a game’s interface.

If folks want to work with a different type of interface design, such as a more complex level-map screen, send me an email describing your proposal so that I can approve it kgillett@ucsc.edu. Overall, if it can include the same number of components and utilize the same types of processes, it should work. Monday - Friday, I will respond to these requests within 24 hours, so, please plan accordingly.

Approximate Total Video Time - 3 to 3.5 Hours

Step 1: Working with WIREFRAMES

For this studio project, you will start with a planning phase called “wireframing”, which is an important part of UI/UX design. You will submit these black and white wireframes as part of the project. We will not be grading these wireframes on effective layout design, we will only be looking at experimentation with different compositions.

The Project Requirements in Canvas can be used to guide this wireframing process - these layouts should be design to accommodate the required interface components and organization. Don’t feel limited by some of the minimums in the requirements. Inventories can include open / empty spaces, so, you do not need to only make space for the required number of inventory item icons.

Step 2: Setting Up The Interface Design File In Illustrator

To setup your working interface design file, it will be helpful to use assets made in both Project 3 and Project 4. If you do not have these projects completed, you can also utilize color schemes and placeholder pixel-art assets from Project 1 + 2.

Step 3: creating interface components

The following processes for step 3 can be completed in any order. Some folks might prefer to build out icons before creating interface navigation and menu components. The order these are presented are what I personally find most streamlined and effective, but other folks might have a different workflow / preferences. Each of these does correlate with a specific requirement for the project.

Overlays + Backgrounds

Interface Components

Icon Designs

Clipping Masks

Editing Text

STEP 4: Additional VECTOR PROCESSES for UI Designs

The video below contains several additional processes that can be helpful in adding details and allowing for more artistic authorship of your interface designs. These include incorporating things like vector filters / effects, drop shadows, complex shape building via the pathfinder {like merging many complex layered objects into a single shape}, expanding paths that are only lines to be shapes, etc.

None of these are required, but will be helpful for the project, especially for the final 2 points of the rubric, and creating an interface that feels more integrated and cohesive with the rest of the game-world.

Step 5: Exporting Interface Composition

DONT FORGET TO Submit the Wireframes

These should be submitted in addition to this composition

review checklist - what’s Due?

• 2 Wireframe Designs {black and white, outlines, graded for experimentation only}

• 1 Finalized Interface Design

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.