Aspect-Ratio Aware Design
One of the primary challenges with designing games for mobile apps is that you cannot control the aspect ratio. On the desktop, you can safely assume that all computers play games in a 16:9 ratio (the standard ratio for displaying movies). However, a modern iPhone has an aspect ratio of 19.5:9 and an iPad has an aspect ratio of 4:3.
The reason why aspect ratio is important is because, while you can scale your images to fit the screen, you have to scale them the same amount horizontally and vertically. Otherwise the images look distorted. But this means that a change in aspect ratio could cause the image to be cut-off. When you design your interface, you should make sure that your game visuals will display properly, regardless of what device people are playing from.
In this assignment, you will practice creating UI assets that can adjust for different aspect ratios. There is no coding involved in this assignment. We do not even require that you work with the CUGL engine (that will be part of a later assignment). Instead, you will create some screens mockups that demonstrate your thought process for making responsive UI assets.
Table of Contents
Aspect Ratio Review
This assignment assumes you are already familiar with aspect ratios. However, if you need to review the concept, the link above provides a quick overview of aspect ratios from Adobe. This overview talks about why it is important for web pages and how to make a web page that is aspect ratio aware. Because your games will be on mobile devices, the same is true for the games that you develop.
With that said, there are some standard aspect ratios that you should be prepared for in this class. They are as follows:
- 16x9: Android phones, PC Gaming
- 16x10: Android tablets
- 19.5x9: Modern iPhones
- 3x2: Old iPhones (pre iPhone 5)
- 4x3: Most iPads
- 21x9: Ultra-wide gaming monitors
Project Overview
Since it is too early to be designing for your group’s game, this assignment will have you create a home screen for an imaginary game. To get full points on this assignment, your home screen should include the following elements:
- The title of the game (something you make up)
- A play button
- A settings button
- A background image
A good example of this is Cut the Rope’s old home screen.
You may use whatever program you are most comfortable with to create the screens, but we will be giving tips for how to do some of the steps in Figma. The final product should be exported to PDF for submission.
Throughout these instructions we have a running example to help you understand how to approach the problem. You should not copy this example in your submission. We want something that is different in some way and shows some design initiative.
Instructions
Create the UI assets
In a single image file, lay out each of the homescreen elements (title, buttons, and background image) separately.
UI Assets Example
Do not stress about making this look pretty. Your buttons can be plain boxes with text, and your title does not need to have fancy lettering. Just focus on making the elements clear and readable.
Background
The background does not need to be fancy, but we will place some constraints on how it should look. It should not be just a solid-colored screen. You likely will not have a solid color as your game’s background, and using a solid background does not let you practice making it responsive for different aspect ratios. We ask that you have some kind of image on your background, like a simple forest, or clouds. You can pull some royalty free images to use for this if you like.
While creating the assets, keep in mind how you want them to resize. Below your assets image, write a description explaining how you plan for them to work.
UI Assets Description Example:
The background image is 16:9, but can be cropped for any horizontal aspect ratio. When cropping, fill the image to the screen and keep the image centered on the screen.
The button shapes can lengthen or shorten horizontally to fit different aspect ratios, but the text inside will remain the same size.
The title will resize to fill about 80% of the screen width. It is always centered within the screen.
Make sure your background looks good when cropped for different aspect ratios, with 16:9 being the best case scenario, and a square being the worst. You do not want your background image stretching or cropping off important visuals!
For example, with our sky background, we want to make sure the sun is always nicely placed within the screen, which is why we specified to always center the background image:
Background properly cropped for 4:3 screen
If we were to align the image with the right side of the screen, the sun gets cut off and put awkwardly to the side of the screen:
Background poorly cropped for a 4:3 screen
Lay Out the Assets into a 16:9 screen
Since most media use a 16:9 aspect ratio, you will create a “control” screen at this ratio. Assuming you are using Figma, create a new frame.
Then adjust the size to any 16:9 ratio by using the right sidebar.
Now you can place all of your UI elements onto the screen. This is useful if you have elements that do not fit exactly onto the screen (like the background), since it will automatically hide any parts that hang offscreen. Once you have your 16:9 screen, arrange the UI elements in the layout that you want.
To export your screen as a single image, select it’s frame and scroll to the bottom of the right sidebar.
Beneath the image of your screen, write a short description explaining how you chose your screen layout.
Example:
The title is at the top of the screen, since that is what we want players to see first.
In the middle of the screen, and on the biggest button, is the “Play” button, since we want players to immediately see where to start the game after reading the title.
"Options" is under play, and on a smaller button since we do not expect players to select it that often, but we do want them to know that it is there.
Choose Another Aspect Ratio
Now you will recreate that same menu screen, but for a different aspect ratio. Pick one of the following aspect ratios:
- 21:9
- 4:3
- 3:2
Your UI elements should be designed in a way that works for all of these aspect ratios.
For the sake of time, we are not asking you to recreate the menu screen for each aspect
ratio, but that means that your explanations should thoroughly explain how you planned
for each element to adjust to different screens.
At your chosen aspect ratio, create a new screen and layout your UI elements. Then export your image as before. Beneath the image of your screen, explain how the plans you described in the UI assets file apply to this particular screen. Also justify why you wanted the elements to adjust in the way you described. (Eg: Explain that your “play” button will stretch to fill out a certain amount of the screen, and your text will always remain the same size and centered within the button shape).
Example:
This is what the home screen would look like at a 4:3 aspect ratio.
The title was made slightly smaller so that it did not overwhelm the screen, and it was kept in the center like in the original layout.
The "Play" button should take up a majority of the screen width so that it is easy to press, but it needed to be shortened for this aspect ratio so that it did not take over too much screen space.
Even though buttons have been shortened to fit the shorter screen width, the text is still the same size within them, so that they stay a large and readable size.
The background was sized to the screen's height, and the excess width was cropped by centering the background so that the sun still remains in about the same position, in the center-left of the screen
Submission
Due: Thu, Feb 03 at 11:59 PM
To turn in the lab, create a PDF file containing the following (each element to a page by itself):
- The UI assets by themselves
- Explanations of each asset
- The 16:9 screen
- The explanation for the 16:9 screen
- The other screen
- The explanation for other screen
Submit this zip file as lab1design.zip to CMS