Содержание · 10
- Почему одинаковые карточки не работают
- Приём 1. Разные пропорции
- Приём 2. Разный масштаб внутри кадра
- Приём 3. Типографика вместо изображения
- Как не скатиться в хаос
- Что должно быть на обложке, кроме картинки
- Как проверить сетку до вёрстки
- Что делать, когда изображений нет
- Из чего собрать карточку без фотографии
- Что в итоге
Сетка одинаковых прямоугольников усыпляет. Разбираем приёмы разнообразия обложек, которые не превращают главную страницу в хаос.
Почему одинаковые карточки не работают
Сетка из карточек одинакового размера сообщает, что все проекты равнозначны. Глаз не находит точки входа и скользит по странице, не задерживаясь.
Журнальная вёрстка решает это веками: разный кегль, разный размер иллюстраций, разная плотность полос.
Приём 1. Разные пропорции
Чередование вертикальных, горизонтальных и квадратных обложек само по себе создаёт ритм. Достаточно двух-трёх форматов, применяемых последовательно.
Ключевое условие — система: пропорции должны повторяться по правилу, а не выбираться каждый раз заново.
Приём 2. Разный масштаб внутри кадра
Один проект показан общим планом, другой — крупной деталью, третий — фрагментом. Даже при одинаковых размерах карточек страница перестаёт быть монотонной.
Приём 3. Типографика вместо изображения
Одна-две карточки без изображения, только с крупным названием проекта на цветном фоне, работают как пауза и одновременно как акцент.
Приём особенно полезен, когда у части проектов нет сильных фотографий.
- Не больше двух текстовых карточек на экран.
- Крупный кегль — не меньше, чем у заголовков раздела.
- Цвет фона из палитры проекта, а не случайный.
Как не скатиться в хаос
Разнообразие работает, пока подчиняется системе. Три правила удерживают композицию: общая сетка, ограниченный набор форматов и повторяющийся ритм.
Сетка одинаковых прямоугольников усыпляет быстрее, чем плохая обложка. Разнообразие здесь — не украшение, а условие просмотра.
Что должно быть на обложке, кроме картинки
Обложка проекта решает не эстетическую задачу, а навигационную: помогает выбрать, что открыть. Поэтому кроме изображения ей нужны два-три факта, по которым выбор возможен — тип работы, отрасль и год. Без них посетитель портфолио вынужден открывать всё подряд, и обычно не открывает ничего.
Порядок важен: сначала то, что различает проекты между собой. В портфолио, где всё сделано для одной отрасли, отрасль не информативна, а тип работы — да. В универсальном портфолио наоборот.
- Название проекта — короткое, без слогана.
- Тип работы: айдентика, сайт, упаковка, интерфейс.
- Отрасль или контекст — одним словом.
- Год, если работам больше двух-трёх лет.
Как проверить сетку до вёрстки
Разнообразие обложек проверяется не в макете, а в уменьшении. Сожмите сетку до ширины миниатюры: если карточки перестали отличаться друг от друга, разнообразие было в деталях, а не в композиции — то есть его не было.
Вторая проверка — на реальном материале. Сетка, собранная из шести идеальных кадров, разваливается, когда в неё попадает проект с плохой фотографией или без изображения вовсе. Заранее решите, что происходит в этом случае: типографическая карточка, плашка цвета или кадр-заглушка с фирменным паттерном.
Что делать, когда изображений нет
Разнообразие обложек упирается в исходники: приёмы с пропорциями и масштабом работают, когда есть что кадрировать. У части проектов хорошей съёмки нет и не будет — исследование, стратегия, консультация, незапущенный продукт. Подставлять туда стоковую картинку хуже, чем не ставить ничего: она обещает то, чего в проекте не было.
Работающая замена — типографическая обложка, собранная по тем же правилам, что остальные: тот же формат, та же сетка, тот же кегельный ряд. На ней стоит не название проекта, а его суть в двух-трёх словах или число, которое он дал. Такая карточка в ряду с фотографическими не выпадает, если её оформление принадлежит той же системе, а не придумано отдельно.
Из чего собрать карточку без фотографии
- Короткая фраза вместо названия: «сократили путь до заказа вдвое» читается, «Проект для банка» — нет.
- Число, если оно есть и его можно назвать: год, тираж, число экранов, доля.
- Фирменный цвет проекта или заказчика как единственный элемент оформления.
- Фрагмент собственной графики — схема, сетка, диаграмма из проекта: это его материал, а не иллюстрация к нему.
- Одинаковая с фотографическими карточками пропорция и типографика: иначе она читается как заглушка.
Что в итоге
Разные обложки делают портфолио живым, но только если разнообразие подчинено системе.
Задайте повторяющийся паттерн из нескольких форматов — и страница будет читаться как журнальный разворот.
Коротко
- Что должно быть на обложке проекта?
- Кадр, по которому понятен предмет, и название с типом работы. Абстрактная композиция без узнаваемого объекта не работает: в ленте обложек человек ищет знакомое.
- Стоит ли писать название прямо на обложке?
- Если обложки показываются в ленте с подписями — не стоит, это дублирование. Если лента без подписей, текст на обложке обязателен, и тогда его набирают крупно и с запасом контраста.
Сайт-визитка
Одна страница, четыре блока и никакой лишней сложности. Разбираем, что действительно нужно небольшому бизнесу или специалисту.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…