Перерисовать больше 100 обложек в блог за неделю и не сойти с ума

В кейсе я покажу, как выполнить большой объем работы за короткие сроки, при этом потратить минимум времени дизайнера. Или же, как простой анализ задачи на старте помогает качественно решить её.

Привет, меня зовут Никита. Сейчас я развиваю агентство ollo.agency, но еще несколько месяцев назад работал над редизайном блога для платформы автоматизации маркетинга enKod.

Первостепенной задачей было сделать сам блог и натянуть на WordPress, а обложки ко всем статьям сделать по остаточному принципу. Так оно и случилось. Как только приступили ко второй части работы, было 3 нюанса:

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

В задаче мы выделили несколько опорных точек, от которых стали отталкиваться:

Поняв задачу, мы начали по порядку разбираться к каждым пунктом.

Сейчас в блоге 7 разделов плюс общий раздел со всеми подряд статьями. Придумывать “особый” формат и стиль для каждого из разделов сильно бы замедлило работу. При таком подходе в общем разделе со всеми статьями получится дикий винегрет из обложек. Поэтому мы начали упрощать.

Просмотрев по несколько статей из каждого раздела мы прикинули, что все статьи можно разделить на 3 группы:

Вот как это выглядит на деле:

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

Следующая задача – объединить все группы под одной стилистикой. Для этого мы стали искать какой-то визуальный прием, чтобы использовать его в каждой группе.

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

Осталось сделать главное, понять как их использовать для каждой группы.

Тут следующая логика. Чем больше статей в группе, тем легче по исполнению должны быть иллюстрации. Соответственно в первой группе должны быть максимально простое применение наших форма, а в третей максимально навороченное.

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

Чтобы как-то показать что мы тут дизайнеры, а не хрен с маслом, немного усложняем. Для каждой иллюстрации стараемся сделать интересную композицию. Если статья про iCloud используем форму с облаком, если про блочный редактор – форму похожую на блоки. И как вишенку на торте добавляем теги.

Но у нас есть еще вторая группа – кейсы. Тут мы решили выделиться на общем фоне и добавить контраста. У кейсов форма служит в качестве центрального элемента и маски, для других объектов. А цвет фона зависит от фирменного цвета компании, с которой был написан кейс.

Так мы оставляем наш базовый элемент, но используем его немного в другом ключе. И тут же у нас прослеживается еще один прием – хаотичные, коллажные элементы. Его мы переносим в третью группу и выкручиваем по полной.

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

enKod Journal – это дайджест компании, в котором рассказывается про прлатформу, обновления, фичи, команду и события. В общем все самое важное, что произошло за месяц. Поскольку сам формат достаточно разношерстный, мы не стали ограничивать иллюстрацию одной метафорой, а сделали коллаж с разными образами.

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

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

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

Чтобы еще больше сократить время, мы для первых 10 статей просто взяли изображение с unsplash. На эти статьи можно попасть только с прямого запроса или промотав до первой странице в ленте блога. Второй вариант маловероятен, а при прямом попадании в статью, пользователь все равно не видит всей плитки с иллюстрациями. Поэтому можно схитрить)

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

На этом всё. Если вы дизайнер и вам был полезен этот кейс – мы рады. Если вы на стороне клиента и взяли на заметку несколько идей, или просто увидели процесс глазами дизайнера, мы рады не меньше.

Больше внутряка, идей и мыслей мы складываем в наш телеграм канал.