Верстаем обложку эфира с двумя спикерами

У нас есть оригинал, с которым мы будем работать.

Какие есть проблемы:

1. Нет чёткой доминанты. Вроде бы лица спикеров выделяются, но при этом заголовок теряется рядом с биркой, да ещё и логотипы примерно одного размера.

2. Логотипы тёмного цвета плохо читаются на фоне.

3. Спикеры плохо вырезаны. А если работу делает не дизайнер, то вырезать каждый раз людей — трудное занятие.

4. Правило якорных объектов пытается соблюстись, но при этом, например, у имени и должности нет чёткой привязки к спикеру.

Для начала используем базовые правила:

1. Заголовок сильно увеличим. Я взял Inter, 150 пикселей, расстояние между буквами сделал -5%.

2. Перекрасил логотипы в белый цвет и немного уменьшил.

3. Добавил спикеров с фоном и положил в стандартный прямоугольник.

4. Поставил спикеров по правилу якорных объектов в левый нижний угол.

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

Правый нижний угол получился пустой, поэтому перестроим композицию:

1. Увеличил заголовок и сделал его в две строки.

2. Бирку сделал тегом и поставил в правый верхний угол.

3. Подписи к спикерам сделал одного размера и поставил справа от фотографий.

4. Перенёс логотипы в правый нижний угол.

Весь акцент смещён влево, попробуем это исправить.

Композиция хлипкая, потому что второй спикеры явно не прилеплен к одному из углов или к рядом стоящему объекту:

1. Перенёс спикеров в правую часть и поставил друг под другом. Так мы усиливаем привязку к правому нижнему углу.

2. Вернул бирку к заголовку, чтобы поддержать начальную легенду.

3. Логотипы переместил в левый нижний угол, чтобы уравновесить композицию.

Нормально, но надо работать дальше.

А что если мы не хотим использовать квадратные и прямоугольные фотографии спикеров? Ничего страшного, возьмём круглые фотки:

1. Сделал заголовок в одну строку, чтобы под ним расположить спикеров.

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

3. Перенёс логотипы в правый нижний угол для общего равновесия композиции.

Уже пойдёт, но где фирстиль?

Представим, что часть нашего стиля — простые иконки с обводкой. А цвет, например, стандартный жёлтый, который будем использовать для акцентов.

1. Сделал заголовок в две строки, а бирку вписал в модуль заголовка. Здесь мы делаем претензию на более сложную композицию, но в пределах правил.

2. Добавил снежинки и ногу, как часть фирстиля.

3. Покрасил слово «ноги» и соответствующую иконку в фирменный жёлтый цвет.

4. Уменьшил спикеров, так мы смещаем акцент на заголовок эфира.

«Спикеры маленькие, как и подписи». Ничего, починим.

Попробуем вписать фирменный стиль более бесшовно в композицию и увеличим нужные нам элементы.

1. Заголовок всё-таки оставлю в одну строку и избавлю его от бирки.

2. Впишу снежинки в заголовок.

3. Спикеров оставлю квадратными, чтобы выделить им больше места (круг меньше квадрата по площади).

4. Увеличу подписи под фотографиями, чтобы их было удобнее читать пользователю.

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

6. Ногу поставлю на снежинку — прямое считывание заголовка «Ноги зимой».

7. Выровнял по нижней границе тег, снежинки и логотипы. Так мы делаем макет аккуратнее.