Text Link
Learning Hub
Design Basics

A collection of insightful tips and guides to help you become a great designer.

Beta
Design Tips
<path d="M6.6729 18.3516C8.50093 18.3516 9.79065 18.989 10.3738 19.3626C10.5757 19.4725 11.0804 19.7802 11.215 19.8352V2.38462C10.4075 1.04396 8.23178 0 6.03364 0C3.06168 0 0.672897 1.62637 0 2.9011V18.5714C0.011215 19.5824 0.594392 20 1.30093 20C1.81682 20 2.13084 19.8352 2.48972 19.5714C3.16262 19.044 4.71028 18.3516 6.6729 18.3516ZM17.3495 18.3516C19.3009 18.3516 20.8486 19.044 21.5215 19.5714C21.8692 19.8242 22.1944 20 22.6991 20C23.4056 20 24 19.5824 24 18.5824V2.9011C23.3383 1.62637 20.9607 0 17.9888 0C15.7794 0 13.615 1.04396 12.7963 2.38462V19.8462C12.9308 19.8022 13.4355 19.4835 13.6486 19.3626C14.2206 18.989 15.5103 18.3516 17.3495 18.3516Z" fill="currentColor"/>
What is the Aspect Ratio?

What is the Aspect Ratio?

Aspect ratio might sound confusing for beginner designers at first, but it is a relatively simple subject to understand. We promise. In this article, we will explain everything you need to know.

What’s the first thing you do when you open Vectornator? You choose the shape of your artboard.

If you think about it, every canvas, image, or graphic has its own shape. Usually, that shape is a rectangle, and this rectangle has a unique proportion based on the display medium.

In simple terms, this defines the aspect ratio. While perhaps not the sexiest of design topics, aspect ratio is nonetheless an important consideration for any designer. We know how challenging it is when you have to crop and convert graphics to fit a variety of mediums like mobile, computer, and iPad; or a variety of channels, like website, social, apps. So let’s dive into it, shall we?

What is aspect ratio?

An aspect ratio is the proportional relationship between a graphic’s width and height.

Aspect ratios are written as a formula like this: 16:9 (where 16 represents the width and 9 represents the heights). Why so? Because most screens are wider than they are tall, so the aspect ratio will naturally have a horizontal orientation.

As a simple example, a square image has an aspect ratio of 1:1, since the height and width are the same (some math does come in handy!). But the image could be 500px × 500px, or 1500px × 1500px, and the aspect ratio would still be 1:1.

What are common aspect ratios

  • 1:1 is the square format. Throwback to Instagram’s strict square image requirements. Glad those days are gone!
  • 3:2 and 4:3 are standard photo sizes
  • 16:9 is the standard widescreen aspect ratio.
  • 9:16 is the vertical video we view on our phone. It’s a perfect 90 degrees flip of the 16:9 ratio.

Mediums you need to consider

Monitors and Devices

At the turn of the millennium, almost all computer monitors used a 4:3 aspect ratio. Only 90’s kids will remember. But by 2010, an aspect ratio of 16:9 had become the standard.

Phones are more commonly used than tablets, however, the preference for consuming content on a phone is usually vertical. Who flips their phone anymore, right? This has resulted in inverted aspect ratios becoming much more common, such as 9:16 rather than 16:9.

Social media

Social media image sizes seem to change constantly. Today you have a perfect cover image for your account. Tomorrow, it’s been resized, and looks all pixelated and stretched.

Check out our Template Hub for a full guide into social media aspect ratios and templates to make your design process as easy as 1, 2, 3!

Cropping to aspect ratio

Manipulating the aspect ratio is called cropping. You might need to change the aspect ratio of your graphic so it’s compatible with the medium it’s presented on. This way you ensure that the end-user sees the correct information.

To do this, Vectornator offers a super simple way to crop images by using masks. If you'd like to learn more about masks read our detailed Learning Hub article about it.

But before you crop your graphic, you need to ask yourself these questions:

  1. Where is this image going to appear to the user?
  2. Do I need to create multiple versions of this design?

Aspect ratio in your designs

Having learned what aspect ratio is and how to manipulate it, it’s time to consider how it impacts your design.

There’s not going to be one image that fits all your requirements. Sometimes you’ll be able to change the aspect ratio to make the picture work without compromising the subject – but sometimes that just won’t be possible. It’s crucial that the subject is fully included in your images of any aspect ratio.

So if you have a blog header, a blog thumbnail, and maybe a blog icon for your latest post, all of them need to make sense in their particular aspect ratios.

Is the concept of the cropped picture easily understood by the viewer? If the answer is no, you’ll have to consider whether the shape or the subject is more important, and what you’re willing to change. Since the aspect ratio is usually fixed, you’ll have to change the image. But it all depends on your project of course.

I hope we explained what is aspect ratio for you. If you want to practice resizing images for various aspect ratios, or you’d like to download our handy, pre-existing templates head to Vectornator and create away!

Download
Download the PDF version here.
Was this useful?