Что в видео-уроке:
В уроке оформляем большой информационный блок о компании: выстраиваем длинный заголовок, преимущества и числовые показатели, настраиваем Auto Layout и добавляем визуал. Затем выносим логотипы брендов в самостоятельную секцию и приводим их к единой визуальной системе.
Сначала разбираемся со структурой информации
Пятый блок содержит сразу несколько типов контента: длинный заголовок, преимущества компании, числовые показатели, визуал продукции и логотипы брендов. Если просто перенести всё из текстового прототипа в одну секцию, экран получится перегруженным.
Начинаем с заголовка и проверяем его в разных вариантах переноса. Слишком длинная строка плохо считывается, особенно если используется выразительная акцидентная гарнитура. Поэтому текст лучше разбивать на несколько коротких строк и следить за тем, чтобы отдельные слова или числовые значения не нарушали композиционное равновесие.
Фразу «с 2002 года» в итоге логичнее вынести из большого заголовка в отдельный небольшой шильдик. Так основной текст становится короче, а дата получает самостоятельный акцент.
Группируем преимущества и освобождаем место под визуал
Следующий уровень — блок «Мы предлагаем» с несколькими преимуществами. Каждый тезис выносим в отдельный текстовый элемент и собираем группу через Auto Layout.
Для маркировки используем уже знакомые небольшие круглые элементы вместо создания новой системы иконок. Повторение существующих деталей помогает поддержать стилистику и не перегружает интерфейс.
При этом не нужно стремиться заполнить текстом всё свободное пространство. Часть экрана специально оставляем под графическую композицию. Такое сочетание делает плотный информационный блок легче для восприятия.
Работаем с числовыми показателями
В блоке используются показатели разной длины: десятки, тысячи и миллионы. Изначально можно попробовать сделать числа очень крупными, но быстро становится заметно, что значения сильно отличаются по ширине и начинают спорить друг с другом.
Вместо этого уменьшаем размер типографики и выстраиваем показатели группами. Цифры должны оставаться заметными, но не превращаться в самостоятельные огромные заголовки.
Знаки «+» и «%» лучше отделять от самих чисел, чтобы можно было независимо управлять их размером, положением и визуальным весом. В итоговом варианте основные значения остаются белыми, а дополнительные знаки получают жёлто-зелёный акцент и более лёгкое начертание.
Так внимание сначала направляется на сам показатель, а уже затем — на уточняющий символ.
Настраиваем показатели через Auto Layout
Разные по длине значения сложно выстраивать вручную. Если просто расположить их в общей горизонтальной строке, элементы начинают смещаться и теряются силовые линии.
Поэтому показатели группируем по строкам и собираем через несколько уровней Auto Layout. Такая структура позволяет сохранить контролируемые расстояния на десктопе и одновременно подготовить блок к будущей адаптации.
При уменьшении ширины контейнера группы смогут перестраиваться и переноситься на новые строки. Здесь важно не пытаться любой ценой убрать каждый элемент в один общий Auto Layout: иногда удобнее сначала организовать небольшие смысловые группы, а уже затем объединять их.
Добавляем визуал и возвращаем производственную тему
Чтобы секция не состояла только из текста и цифр, свободную часть занимаем изображением упаковки. Выбираем банку, которая поддерживает уже используемую палитру и отличается по форме от объектов в предыдущих блоках.
На заднем плане возвращаем ещё один приём главного экрана — приглушённую фотографию производства. При этом не копируем прежнее изображение: повтор одной и той же фотографии может восприниматься как недоработка.
Новую фотографию обесцвечиваем и аккуратно проявляем на тёмном фоне. В центре композиции оставляем непосредственно производство и упаковку, а второстепенные детали максимально приглушаем.
Так блок одновременно рассказывает о масштабе компании через цифры и подкрепляет эту информацию визуально.
Используем направление объектов в композиции
Добавленная банка состоит из самой ёмкости и крышки. При выборе положения важно смотреть не только на техническое выравнивание, но и на направление формы.
Если один объект визуально направлен от центра, второй элемент может компенсировать это движение и вернуть взгляд внутрь композиции. В данном случае положение крышки помогает уравновесить направление банки.
Такая работа с визуальным движением позволяет использовать даже неидеально ориентированное исходное изображение, если вся композиция в целом остаётся сбалансированной.
Выносим логотипы в самостоятельный блок
По текстовому прототипу логотипы брендов относятся к этой же секции. Однако вместе с большим заголовком, преимуществами, цифрами и изображениями они создают слишком высокую информационную плотность.
Если смысл позволяет, большой блок можно разделить на несколько самостоятельных экранов. В данном случае секцию «Упаковываем бренды» логично вынести отдельно: связь с предыдущей информацией сохраняется, но логотипы получают больше внимания.
Это не нарушение прототипа, если логика контента остаётся понятной. Наоборот, отдельный блок создаёт визуальную паузу после насыщенной текстовой секции и позволяет пользователю переключиться на более простой тип информации.
Приводим разные логотипы к общей системе
Логотипы почти всегда отличаются по цветам, пропорциям, ориентации и типографике. Если разместить их без дополнительной обработки, блок начинает выглядеть хаотично.
Поэтому сначала для каждого логотипа создаём одинаковую область, внутри которой выравниваем изображение по горизонтали и вертикали. Это позволяет привести разные формы к общему размерному принципу.
Дополнительно переводим логотипы в монохром, убирая Saturation. Цветовое разнообразие исчезает, и бренды начинают восприниматься как единая группа.
Для каждого логотипа используем одинаковые светло-серые карточки со знакомыми скруглениями и тенями. Благодаря этому даже изображения разного качества и формата лучше вписываются в визуальную систему сайта.
Делим контент, когда это улучшает восприятие
Текстовый прототип задаёт смысловую структуру, но не всегда должен буквально определять количество дизайн-блоков.
Если внутри одной секции оказалось слишком много разных типов информации, стоит проверить, можно ли логически разделить её без потери смысла. В этом уроке один большой блок превратился в две самостоятельные секции: информацию о компании с показателями и отдельный блок с брендами.
Так пользователь сначала воспринимает текст, цифры и преимущества, затем получает визуальную паузу и переходит к логотипам. Страница становится легче, а важная информация не теряется внутри перегруженной композиции.
