Сайт бренд-медиа о маркетинге «Конверт»

Контекст

Изначально блог «Юнисендера» был посвящён только имейл-рассылкам. Со временем редакция разрослась, появились материалы о дизайне, маркетинге, редактуре, рекламе. Стало ясно, что проект уже не вписывается в формат блога. Кроме этого, на сайте блога были проблемы с визуальной подачей статей: однотипные иллюстрации и монотонная вёрстка, которая скорее подталкивала открыть Ютуб, нежели читать статьи. Главная страница не отражала всего многообразия тем и форматов, которые создавала редакция блога, и читатели могли так никогда и не узнать об их существовании.

Задача и вызов

Перед нами стояла непростая задача — навести порядок в темах и форматах, сделать площадку понятной и привлекательной для читателей. Нам предстояло учесть множество технических требований: продумать сквозную навигацию и подвал, не сломать вёрстку в старых статьях, сохранить наработки СЕО-оптимизации.

Главный вызов состоял в том, что технически новое медиа оставалось частью сайта основного продукта «Юни», но при должно иметь свой брендинг, навигацию и логику. Предстояло разработать дизайн, который учтёт наследие бренда и не сломает то, что уже работает и приносит деньги.

Процесс

Смотрите подробный видеокейс о редизайне медиа и новом логотипе «Конверта» с комментариями арт-директора студии Евгения Лепёхина:

Результат

Заказчик попросил сделать так, чтобы медиа было связано с основным сайтом «Юнисендера». Поэтому мы придумали сквозную шапку и предложили более понятную структуру меню. Из шапки сайта можно перейти на страницу почтового сервиса и к другим продуктам «Юнисендера».

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

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

На странице статьи у каждого элемента появилось место. Оглавление позволяет быстро перемещаться по статье, теги заняли место справа от обложки, заголовок и обложка стали крупнее. Также появилось место для автора, который обновил материал. Благодаря выверенной структуре страница статьи стала удобнее и практичнее.

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

Кроме обычных рубрик в «Конверте» есть раздел с авторскими колонками «Честно». Чтобы отделить «Честно» от других рубрик, мы сделали для неё отдельный экран. Вокруг блока появилась рамка в виде края почтовой марки, а у статей появились имена и фото авторов. Дизайн карточек в блоке со спецпроектами тоже отличается от обычных статей, чтобы привлечь внимание читателей к этому разделу.

Страница отдельной рубрики и автора стали практичнее: теперь на одну страницу влазит 12 статей вместо семи, можно быстро перейти к популярным материалам, подписаться на рассылку «Честно». На странице автора появились фотография, краткое описание и список опубликованных статей.

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

У сайта сквозной подвал, который объединяет все продукты «Юнисендера». Чтобы отделить подвал от основной части страниц, мы покрасили его в светло-серый. Также мы навели порядок в ссылках и отредактировали названия пунктов меню, чтобы упростить навигацию. Главными элементами подвала стали крупные ссылки на страницы «Конверта» в социальных сетях.

Когда дизайн был готов, мы описали все компоненты и передали их вместе с макетами внешней команде разработчиков «Юнисендера». На этапе вёрстки мы осуществляли арт-надзор: следили, чтобы вёрстка соответствовала макетам и чтобы всё работало именно так, как мы задумали. По ходу разработки нам пришлось переиграть отдельные решения, но на 99% мы попали в цель с первого раза.