Незанудный стиль для edtech в сфере финансов: диджитал-гайдлайн для «Образовательных проектов ПАКК»

Часто в компаниях макеты для оформления соцсетей делают не дизайнеры, а маркетологи или smm-менеджеры. От этого страдает общий стиль.

Арт-директор maryco Вероника Октябрь и старший дизайнер Андрей Тельминов расскажут, как мы создали новый масштабируемый фирстиль соцсетей для «Образовательных проектов ПАКК» и как обучили сотрудников компании создавать из него тысячу и один шаблон без помощи дизайнера.

Создать фирстиль для соцсетей, который масштабируется на другие носители

ПАКК — консалтинговая компания, у которой есть направление «Образовательные проекты ПАКК». Это программы по финансовой грамотности для нескольких групп: преподавателей в школах и вузах, которые затем обучают этим навыкам учеников и студентов; общественных и коммерческих организаций; государственных органов. ПАКК проводит дистанционные курсы, создает сценарии мероприятий, выпускает информационные материалы (ролики, брошюры), устраивает оффлайн мероприятия по всей России.

Клиент хотел обновить дизайн «Образовательных проектов ПАКК» в трёх соцсетях — Инстаграм, Вконтакте и Facebook. Важно было сделать дизайн современным, понятным для разных групп целевой аудитории (работники госорганов, школьные учителя старшего поколения) и узнаваемым.

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

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


Вероника Октябрь, арт-директор maryco

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

Какие перед нами стояли задачи:

  • Разработать фирменный стиль и руководство по его использованию в диджитале на основе существующей айдентики «Образовательных проектов ПАКК», сделав ее актуальнее.

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

  • Сделать дизайн, понятный всем группам целевой аудитории — преподавателям, ученикам, руководителям из корпоративного сегмента и представителям госорганов.

  • Подобрать простой в использовании инструмент, с помощью которого отдел маркетинга смог бы самостоятельно создавать визуалы.

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

Как мы выстроили процесс

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

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

Были в связке с SMM-отделом. Разбирались, какие есть рубрики в соцсетях, какой у компании tone of voice, кто целевая аудитория. Параллельно обучали команду пользоваться наработками и самостоятельно создавать дизайн-макеты в Canva по нашим инструкциям.

Подход: дизайн система вместо набора шаблонов

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


Андрей Тельминов, старший дизайнер maryco

Мы решили, что лучше сделать руководство и несколько примеров и показать, как с помощью простых правил создавать множество разных носителей.

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

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

Наше решение: геометрический минимализм в нескольких палитрах

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

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

Также мы должны были ввести акцентные цвета для логотипов отдельных направлений «Образовательных проектов ПАКК». В прежнем дизайне они были выполнены градиентом. Мы отказались от этого, чтобы общий вид был цельным и лаконичным.

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

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

Также мы прописали ограничение для Instagram — здесь можно использовать только три палитры. Мы сделали так потому, что в профиле Instagram пользователь видит сразу 12 постов: они должны сочетаться друг с другом, выглядеть цельно и не создавать пёструю визуальную кашу.

Facebook и Вконтакте работают иначе: за раз мы видим один пост. Поэтому здесь можно использовать все пять цветовых схем.

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

Абстрактные формы просты в использовании, понятны для восприятия, они в меру серьёзны и на ассоциативном уровне связаны с устойчивостью и структурностью. Среди форм есть несколько арифметических символов, которые напрямую отсылают к финансовой сфере.

Все макеты строятся на взаимодействии фигур, текстов и фотографий.

Шрифты. Мы подобрали небанальную пару бесплатных шрифтов, которые ещё не успели надоесть, — Wremena и Commissioner. Wremena — шрифт с засечками для акциденции: использовали его в заголовках и для выделения малых объёмов текста. К нему в пару мы подобрали гротеск Commissioner — отличное решение для наборного текста.

Фотостиль. В большинстве постов клиент использует фотографии. У них три тематики: образование/финансы, учитель/ученики и мероприятия/семинары. Мы разработали для каждой тематики критерии, собрали мудборды и прописали правила поиска на стоках. Например, для образования и финансов на фото должны быть не люди, а образы, ассоциирующиеся с обучением (книги,тетради, доска и прочее).

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

Сделали гайдлайн и обучили команду

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

Дальше приступили к обучению, чтобы команда ПАКК поняла внутреннюю логику нового дизайна. Сначала мы собрали его в Figma. Когда стало ясно, что это сложный инструмент, мы перенесли дизайн в Canva. Сделали шаблон, предложили команде поработать с ним — пособирать, покомбинировать.

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

Трудностей не было, потому что команда maryco пошла навстречу и перенесла все приёмы в более доступный инструмент. Когда у меня есть тезисы поста, я смотрю гайдлайн, подбираю форму (для крупного текста — один вариант, для мелкого — другой), палитру, чтобы это хорошо смотрелось в сетке Инстаграма. Дальше создаю макет в Canva, это очень удобно: дизайнеры подгрузили туда все цвета, формы и изображения.

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

Дарья Карташова, маркетолог «Образовательных проектов ПАКК»

Результаты проекта

  • Придумали единую дизайн-систему для всех направлений «Образовательных проектов ПАКК» и обеспечили визуальную целостность бренда.
  • Передали образ компании — эксперт в edtech — через минимализм и геометрию.
  • Создали гибкую масштабируемую систему со множеством возможностей. Она строится на простых фигурах, которые можно бесконечно комбинировать и использовать в том числе на оффлайн-носителях: блокнотах, письменных принадлежностях, подарочных коробках.
  • Подобрали инструмент для работы и адаптировали под него приёмы.

  • Обучили команду клиента пользоваться гайдлайном.
0
11 комментариев
Написать комментарий...
Олег Ващуков

Приветливый и теплый стиль. Мне нравятся цвета и формы 👏 

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

Вопрос, а какие трудности возникли в использовании Figma, что побудили к использованию Canva?

Ответить
Развернуть ветку
Олег Михалевич

"какие трудности возникли в использовании Figma, что побудили к использованию Canva?" - может то, что Figma продукт для дизайнеров, а не для менеджером клиента, которым проще использовать более понятный ресурс недизайнеру?

Ответить
Развернуть ветку
Олег Ващуков

Возможно. Хочется понять конкретно в чем именно "проще". Уточняю, потому что ведь Canva это тоже платформа для графического дизайна )

Ответить
Развернуть ветку
maryco design studio
Автор

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

Ответить
Развернуть ветку
Олег Ващуков

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

Ответить
Развернуть ветку
maryco design studio
Автор

Да, все верно. Сталкиваемся с тем, что часто с клиентской стороны нет времени и желания разбираться в незнакомых программах, штатные маркетологи и СММ-специалисты все еще предпочитают Канву. 

Ответить
Развернуть ветку
maryco design studio
Автор

Олег, спасибо за обратную связь!
Гайдлайн целиком отправить, к сожалению, не можем. Отдельные страницы из гайдлайна можно найти по ссылке проекта на Behance:
https://www.behance.net/gallery/112825171/EduPACC-Social-Media-Guideline

Ранее в ПАКК не было единых договоренностей по цветам, шрифтам и стилеобразующим элементам, макеты создавались стихийно на усмотрение сменяющихся СММ менеджеров. Как менялись креативы можно посмотреть в социальных сетях компании.

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

Ответить
Развернуть ветку
Борис Филатов

 сразу ассоциации сразу с чебурашкой)) очень приятное оформление вышло

Ответить
Развернуть ветку
maryco design studio
Автор

Борис, спасибо!

Ответить
Развернуть ветку
Анастасия Здоровцова

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

Ответить
Развернуть ветку
maryco design studio
Автор

Анастасия, спасибо! 

Ответить
Развернуть ветку
8 комментариев
Раскрывать всегда