Take a peek at Instagram and you’ll notice the photos on your grid are neatly uniform in 1:1 squares. Pull up YouTube, and it’s a widescreen rectangular shape at 16:9.
Screens, images, and frames all have recognizable shapes and aspect ratio is the term used to describe the fixed proportions of these shapes. Simply put, an image’s aspect ratio is the relationship between its width and height. Aspect ratios are commonly presented as two numbers, separated by a colon like X:Y, or 4:3. Most often, they are used in describing film.
In UX design, aspect ratios become somewhat antiquated because they’re inflexible and good digital design is responsive. For example, look at InVision’s homepage: You can see how that header video appears to be a 16:9 ratio, but it responds. So if you drag your browser in to narrow the width, the video changes its size—adapting as you go.
However, as designers work more cross-collaboratively and design assets within websites or apps, it’s likely they’ll come across the term every so often or use it to communicate the component ratios that need to be locked. So, here’s what designers need to know about aspect ratios and the user experience.
What is an aspect ratio?
First let’s cover the basics: An aspect ratio is how large an image’s width is compared to its height, without any pixels or units attached. While an image’s aspect ratio will help you understand its shape, it doesn’t determine the image’s actual size. For an X:Y aspect ratio, the x is the image’s width and the y is the image’s height.
Aspect ratio formula
Aspect ratios are written out as a formula of width to height, such as 3:2. It’s important to remember that while two images can have the same aspect ratio, they can have varying images sizes.
So, as an example, a square ratio of 1:1 would mean the width and height of the image are the same. No matter if the image’s dimensions are 320 X 320 pixels or 1080 X 1080 pixels, the aspect ratio remains 1:1. As another example, an image could be 1920 X 1080 pixels or 1280 X 720 pixels, but both have a widescreen 16:9 aspect ratio in common.
Common Aspect Ratios
Here are the most common aspect ratios:
1:1 Ratio
Images with a 1:1 aspect ratio have equal width and height and are squares. This aspect ratio is commonly used on smart watches and you might notice a 1:1 aspect ratio on social media sites, like Instagram photos.
3:2 Ratio
The 3:2 aspect ratio was popularized by 35mm film and it remains popular in still camera photography today. The 3:2 ratio was also used on some early model iPhones.
4:3 Ratio
A 4:3 ratio creates a rectangular shape that’s common on some computer monitors and television displays. Old television sets were often shaped in this dimension.
16:9 Ratio
A more elongated rectangular shape, you’ll spot a 16:9 aspect ratio on presentation slides, widescreen televisions, computer monitors. It’s the standard widescreen aspect ratio for videos. Most smartphones and DSLRs record video at 1920 x 1080 pixels, which is a 16:9 aspect ratio.
Aspect ratio in design
As stated earlier, aspect ratios are most commonly used in film. However, designers may come across the term every once in a while. For example, if you are working on a project with a colleague or a client and they’re talking about aspect ratios, they’re probably referring to the different screen sizes the product will be accessed from: a computer, tablet, mobile phone, watch, etc. While responsive design can account for how components are displayed on different screen sizes, there may be instances when a responsive design can cut off static images (especially those with text). Thus, it’s important to pay attention to how images with certain aspect ratios will crop and appear across different screen sizes—and ask your collaborators how intended use may be affected due to responsive design.
Many common devices have similar aspect ratios even if they have different dimensions. To help, Materialdesign.io includes the aspect ratio of common devices, including laptops, smart watches, tablets, and phones. For example, an Apple Watch has an aspect ratio of 5:4 while iPads have aspect ratios of 4:3 and MacBook Pros have aspect ratios of 16:9 and 16:10 depending on the versions.
Aspect ratio calculator
As designers crop and convert content to fit a variety of mediums, having an easy-to-use aspect ratio calculator on hand is important. These calculators can help you calculate aspect ratios and pixel dimensions when handing off to developers.
You can find several free aspect ratio calculators online:
Caitlin Wagner, product designer at InVision, says she would use these if, for example, she knew that she wanted a video to take up exactly half the screen while mocking up a website—or, in this instance, ~500 px width for her Sketch file devoted to the video.
“I would always have to tell my dev team to ensure that the video responds with the page size,” Wagner says. “That ensures that the aspect ratio is locked even as the browser scales down.”
Ensure your notes (like locked aspect ratios!) get clearly communicated to developers with Specs
New to InVision V7, Specs are tailored for one job only—design to development collaboration. Each design spec delivers exactly what’s relevant to developers and provides the context they require from designers, all in a document focused solely on the details the developer needs to take the spec from design to reality.
Brittany Anas is a Denver, Colorado-based freelance writer. She is a regular contributor to publications including Apartment Therapy, Forbes and Men’s Journal and previously was a reporter at the Daily Camera in Boulder and The Denver Post. She worked three years as a federal background investigator before transitioning into a full-time freelance role.
