Соотношение сторон: руководство для дизайнеров

Соотношение сторон — это термин, используемый для описания фиксированных пропорций экранов, изображений, сайтов. Проще говоря, соотношение сторон изображения — это связь между его шириной и высотой. Соотношение сторон обычно выражается двумя числами, разделёнными двоеточием, например X:Y или 4:3. Чаще всего оно используется для описания фильмов.

Соотношение сторон при хорошем цифровом дизайне должно быть адаптивным. Например, посмотрите на домашнюю страницу качественного сайта: вы увидите, что соотношение сторон видео — 16:9, которое адаптируется. Например, если вы уменьшите ширину браузера, видео изменит размер — и будет адаптироваться по мере необходимости.

Однако по мере того, как дизайнеры всё больше сотрудничают друг с другом и создают множество проектов, для которых необходимо знать суть пропорции сторон, мы решили собрать самую важную информацию о соотношениях, чтобы вы смогли использовать эти знания на практике.

Что такое соотношение сторон?

Для начала давайте разберёмся с основами: соотношение сторон — это отношение ширины изображения к его высоте без учёта пикселей или единиц измерения. Соотношение сторон изображения поможет вам понять его форму, но не определяет фактический размер изображения. В соотношении сторон (X:Y) x — это ширина изображения, а y — его высота.

Формула соотношения сторон

Соотношение сторон записывается в виде формулы соотношения ширины к высоте, например 3:2. Важно помнить, что хотя два изображения могут иметь одинаковое соотношение сторон, их размеры могут различаться.

Например, соотношение сторон 1:1 означает, что ширина и высота изображения одинаковы. Независимо от того, имеют ли размеры изображения 320 x 320 пикселей или 1080 x 1080 пикселей, соотношение сторон остаётся 1:1. В качестве другого примера: изображение может иметь разрешение 1920 x 1080 пикселей или 1280 x 720 пикселей, но оба варианта имеют широкоэкранное соотношение сторон 16:9.

Общие соотношения сторон

Вот наиболее распространенные соотношения сторон:

1. Соотношение 1:1

Изображения с соотношением сторон 1:1 имеют одинаковую ширину и высоту и являются квадратными. Такое соотношение сторон обычно используется в смарт-часах, и вы можете заметить соотношение сторон 1:1 в социальных сетях.

2. Соотношение 3:2

Соотношение сторон 3:2 стало популярным благодаря 35-миллиметровой плёнке и остаётся популярным в фотографии и сегодня.

3. Соотношение 4:3

Соотношение 4:3 создаёт прямоугольную форму, которая часто встречается на некоторых компьютерных мониторах и телевизорах. Старые телевизоры часто были именно такой формы.

4. Соотношение сторон 16:9

Более вытянутая прямоугольная форма — соотношение сторон 16:9 — встречается на слайдах презентаций, широкоэкранных телевизорах, компьютерных мониторах. Это стандартное соотношение сторон для широкоэкранных видео. Большинство смартфонов и цифровых зеркальных камер записывают видео с разрешением 1920 x 1080 пикселей, что соответствует соотношению сторон 16:9.

Соотношение сторон в дизайне

Как уже говорилось ранее, соотношение сторон чаще всего используется в кино. Однако дизайнеры могут время от времени сталкиваться с этим термином. Например, если вы работаете над проектом с коллегой или клиентом, и они говорят о соотношении сторон, то, вероятно, имеют в виду различные размеры экранов, на которых будет отображаться продукт: компьютер, планшет, мобильный телефон, часы и т. д. Хотя адаптивный дизайн может учитывать то, как компоненты отображаются на экранах разных размеров, в некоторых случаях адаптивный дизайн может обрезать статичные изображения (особенно с текстом). Таким образом, важно обращать внимание на то, как изображения с определённым соотношением сторон обрезаются и отображаются на экранах разных размеров, и спрашивать у своих коллег, как адаптивный дизайн может повлиять на предполагаемое использование.

Калькулятор соотношения сторон

Поскольку дизайнеры обрезают и преобразуют контент, чтобы он соответствовал различным форматам, важно иметь под рукой простой в использовании калькулятор соотношения сторон. Данные приложения позволяют рассчитать соотношение сторон и размеры в пикселях для передачи данных другим работникам.

Вот несколько популярных калькуляторов:

• Wistia
• io

Отслеживание соотношения сторон позволяет подобрать необходимый масштаб графических элементов и не терять качество изображения при изменении условий их использования.

Мы познакомили вас с ключевыми тезисами в контексте соотношения сторон и надеемся, наш материал поможет вам лучше взаимодействовать с клиентами и коллегами при командной работе.

Читайте больше статей о дизайне, ведении бизнеса и ораторском искусстве в нашем разделе «Блог» и находите новые идеи, советы для решения ваших коммерческих задач.