STUDIO MODULE C: PROJECT 6 - IN-GAME HUD DESIGN

 

STUDIO PROJECT 6 - IN-GAME HEADS UP DISPLAY {HUD} DESIGN

Be sure to review the Project 6 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 is relatively free-form compared to Studio Project 5, similar to Project 4 in the last module. You will be developing a Heads Up Display {HUD} Interface Design for your imagined game, but the project will not require any new vector processes or concepts. In some cases, you will also include components made for Project 5 - sometimes these will be adjusted slightly, other times you can include the identical assets.

The videos below do not communicate any new processes that were not already covered in the Project 5 Studio Instruction Videos. That being said, they are a bit shorter, and can be helpful reminders after previously going through a process more in depth. When they were recorded, they covered a slightly different version of this project - so, the exact numbers and details I use in the videos might be a little different than what you see in Canvas. Always go with what is in Canvas, v.s. what I might say in a video, when it comes to requirements, points, credit, etc.

If you are able to complete the required processes for this project using the Project 5 Instruction videos, you do not need to review the videos below. If you do need a bit more practice with these processes - which is completely understandable - these videos are very short, and can be reviewed as needed for support.

Step 1: Setting up HUD File

Create a new Illustrator document with the environment configuration of your choosing and also be sure to have your Project 5 file open to pull assets from. This new file will be the “in-game screen” that you will be developing HUD interface elements for.

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

STEP 2: Create HUD Elements

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

  • Way-finding or navigation or map component that indicates some sense of direction / location

  • Status bar or progress or health bar indicator design

  • At least 2 different icons that are adapted to fit the HUD design, using icons made for Project 5

  • A numerical counter - could be tied to inventory, time, stats, or points

  • Line Text + Area Text - should utilize the same fonts as Project 5

Any additional elements from Project 5 can be incorporated into this project as needed or desired, but this is not required.

Step 3: UX/UI Design Refresher Videos

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.