Оффтоп Valeria Svirskaya
1 202

Разработка визуальной концепции для соцсетей образовательного проекта — опыт Professura

Рассказываем как создать запоминающийся образ без брендбука и арт-директора.

В закладки

В марте к нам в InShow обратилась школа контент-маркетинга Professura с целью разработать SMM-стратегию для учебного курса Instagraming. На тот момент школа не занималась соцсетями и работала по принципу стартапа — сначала тратится бюджет на тест рекламных каналов и если они себя оправдывают, сумма увеличивается. Поэтому у проекта не было брендбука и намерения тратиться на него в ближайшее время. Также было принято решение не привлекать к проекту арт-директора, чтобы снизить расходы.

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

Пример поста в Facebook
Так выглядела лента в Instagram

Этап первый, сложности работы без брендбука

Когда мы приступили к созданию SMM-стратегии стало понятно, что без четких правил для оформления креативов работа будет медленной и неэффективной. Дизайнер тратил слишком много времени на то, чтобы придумать концепцию поста, подобрать цвета, шрифты и графические элементы. Уходить в шаблонные решения тоже не хотелось, потому что основным kpi был brand awareness (узнаваемость).

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

Первое предложение дизайнера
Заказчик предложил добавить более контрастный цвет
Остановились на этой палитре

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

Пример рассуждений заказчика о хорошем посте для соцсетей

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

Первый креатив от дизайнера

...Пишу комментарии к работе.

Ко всем работам с цитатами

Предлагаю уйти от написаний на картинке. На картинке оставлять только что-либо крупное и недлинное. Например, можно оставить Имя и Фамилию, преподаватель. А саму цитату пишем в теле публикации.

Таким образом получается логика: Вижуал — Кто этот человек — Что ценного — C2A

У меня голова срезанная :)

Фотографии преподавателей в ч/б. Странно, но у меня Андрей с розовым оттенком, а я с синим. Выглядит мрачновато. Поэтому если используем ч/б, то предлагаю людей делать светлее.

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

Этап второй, создаем правила оформления

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

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

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

Пример баннера согласно новой концепции
Еще один пример

Этап третий, разработка визуальной концепции

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

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

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

Результат работы

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

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

Что в итоге?

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

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

Чек-лист по оформлению аккаунта для образовательного проекта от нашей команды

1) Наймите дизайнера, не надейтесь на сайты с шаблонами типа Canva. Обычно там нет приличных кириллических шрифтов, а эффектные посты, созданные под латинский текст, с русскими буквами начинают выглядеть ужасно.

2) Составьте мудборд и выберите идеи, которые отвечают ценностям проекта. Оставьте те, что проще всего реализовать, потому что всегда будут срочные посты, которые надо быстро создать и выложить.

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

4) За основу мы взяли толстые белые рамки — это хорошее решение, которое всегда смотрится стильно и не теряет актуальности. Можно экспериментировать с их толщиной, цветом и ротацией фото в рамке.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Valeria Svirskaya", "author_type": "self", "tags": [], "comments": 7, "likes": 16, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 40729, "is_wide": false, "is_ugc": true, "date": "Sun, 24 Jun 2018 14:09:47 +0300" }
{ "id": 40729, "author_id": 161145, "diff_limit": 1000, "urls": {"diff":"\/comments\/40729\/get","add":"\/comments\/40729\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/40729"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

7 комментариев 7 комм.

Популярные

По порядку

Написать комментарий...
2

Полезная статья👍

Ответить
1

Рада слышать)

Ответить
0

Спасибо, Алексей!

Ответить
2

Хороший гайд, продолжайте в том же духе 🔥

Ответить
1

Спасибо)

Ответить
0

Я тоже так считаю — нужно продолжать! :)

Ответить
0

Хорошо получились :)

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }