Как менялся внешний вид онлайн-школы «Логомашина Учит»

Привет, это коммерческий дизайнер обучающего направления «Логомашины». Рассказываю, как за год изменился внешний вид одной из самых нашумевших онлайн-школ по обучению дизайну.

Как менялся внешний вид онлайн-школы «Логомашина Учит»

Как я стала частью Логомашина Учит

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

На тот момент весь продукт состоял из 4-дневной презентации и курса. Реклама прокручивалась слабо, отдела SMM не существовало.

Как менялся внешний вид онлайн-школы «Логомашина Учит»

Проблемы иллюстративного стиля

Передо мной встала задача – создать иллюстративный фирменный стиль. Отказаться от фотографий и заменить их на картинки.

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

До этого я никогда не работала с айдентикой. Но почти сразу вычленила для себя минусы такого подхода.

1. Долгий процесс рисования

На каждую иллюстрацию у меня уходило много времени. Я старалась упростить процесс рисования, искала подходящую технику. Рисовать сначала в Adobe Illustrator, а потом переносить в Figma было бы долго, поэтому я создавала рисунки сразу в Фигме. Но рисовать качественно там было тяжелее, поэтому я старалась использовать только простые формы.

Как менялся внешний вид онлайн-школы «Логомашина Учит»

2. Главное место иллюстрации, второстепенное – тексту

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

Какие задачи я перед собой поставила

Мне предстояло решить несколько больших задач:

  • Найти подходящий под задачи стиль для иллюстраций. Иллюстраций было много и совать их нужно было быстро;
  • Создать визуал для социальных сетей и презентаций. Сюда включились Инстаграм, ВКонтакте и презентации для марафонов;
  • Научить бренд общаться с аудиторией, стать для них другом;
  • Построить дизайн-систему для автомотизации процессов.

Как видоизменялся Instagram-аккаунт

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

В августе арт-директор Логомашины поделился с нами своим шрифтом. Я взяла его в использование, как акцидент, и для основной вёртски – Montserrat.

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

В ноябре я ввела в использование фирменные фигуры – круг, закруглённый треугольник и ещё несколько форм. Они использовались на разных форматах. Это позволило мне внести ритм в ленту на аккаунте и лучше управлять вниманием.

На конец 2021 года в фирменном стиле всё ещё существовал ряд проблем. Я не могла определиться с цветовой гаммой, боялась использовать твёрдую сетку и всё ещё рисовала слишком долго.

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

Что изменилось после редизайна

Я ввела твёрдую сетку для большинства форматов. Больше никаких скачущих заголовков, текст и иллюстрация начали располагаться на одном уровне, а главное – от поста к посту сохранялся один и тот же размер шрифта.

Также я перестала использовать Montserrat и прочие шрифты и полностью перешла на Inter.

Как менялся внешний вид онлайн-школы «Логомашина Учит»

Я избавилась от плашек разной формы и оставила только одну для большого текста и одну для рубрики. Ещё летом я начала использовать в фирменном стиле кривые линии, как символ игрового настроения, путешествия. От закрученных каракуль я оставила только мягкие изогнутые линии, чаще всего показывающих направление от текста к плашке.

Как менялся внешний вид онлайн-школы «Логомашина Учит»

Огромным изменениям в лучшую сторону подверглась иллюстрация. Если раньше я рисовала сначала скетч в Procreate, а потом отрисовывала в фигме пером, да ещё и раскрашивала большую часть иллюстрации, то теперь я рисую сразу в Vectonator на айпаде с самодельных референсов (фотографирую себя в нужной позе), а в фигме раскрашиваю только отдельные элементы. Черты лиц у персонажей перестали меняться, а вот эмоции стали намного выразительнее.

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

Как создавалась дизайн-система

В проекте возник диссонанс. Социальные сети обновились, а остальные форматы всё ещё нет. Мне нужно было донести до команды, как использовать мои наработки.

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

Последняя составляющего нового бренда – научить его разговаривать с аудиторией, радовать её, дружить с ней. Всё началось с создания маскота. Мы с командой выбрали образы Инспектора Кота, Кита и Ламы.

Как менялся внешний вид онлайн-школы «Логомашина Учит»

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

Возможность для коллекционирования

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

Как менялся внешний вид онлайн-школы «Логомашина Учит»

Итог

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

***

Мои контакты для связи и проектной работы Telegram | Instagram

2828
2 комментария

Круто рассказали и показали <3

1
Ответить

Аня, лайк за детальность и информативность!

1
Ответить