Как менялся внешний вид онлайн-школы «Логомашина Учит»
Привет, это коммерческий дизайнер обучающего направления «Логомашины». Рассказываю, как за год изменился внешний вид одной из самых нашумевших онлайн-школ по обучению дизайну.
Как я стала частью Логомашина Учит
Я присоединилась к команде обучающего направления в апреле 2021 года. Чуть позже к нам присоединились ещё много крутых специалистов, и все вместе мы начали развивать продукт.
На тот момент весь продукт состоял из 4-дневной презентации и курса. Реклама прокручивалась слабо, отдела SMM не существовало.
Проблемы иллюстративного стиля
Передо мной встала задача – создать иллюстративный фирменный стиль. Отказаться от фотографий и заменить их на картинки.
Самыми использованными форматами на тот момент были баннеры и презентация для марафона. Не была обозначена ни целевая аудитория, я сама только училась рисовать и верстать.
До этого я никогда не работала с айдентикой. Но почти сразу вычленила для себя минусы такого подхода.
1. Долгий процесс рисования
На каждую иллюстрацию у меня уходило много времени. Я старалась упростить процесс рисования, искала подходящую технику. Рисовать сначала в Adobe Illustrator, а потом переносить в Figma было бы долго, поэтому я создавала рисунки сразу в Фигме. Но рисовать качественно там было тяжелее, поэтому я старалась использовать только простые формы.
2. Главное место иллюстрации, второстепенное – тексту
Иллюстрации занимают большую часть любого формата. Текст нужно было сокращать, либо использовать мелкий шрифт, чтобы вместить всю информацию.
Какие задачи я перед собой поставила
Мне предстояло решить несколько больших задач:
- Найти подходящий под задачи стиль для иллюстраций. Иллюстраций было много и совать их нужно было быстро;
- Создать визуал для социальных сетей и презентаций. Сюда включились Инстаграм, ВКонтакте и презентации для марафонов;
- Научить бренд общаться с аудиторией, стать для них другом;
- Построить дизайн-систему для автомотизации процессов.
Как видоизменялся Instagram-аккаунт
В апреле 2021 года мы возобновили ведение Инстаграма. Контент состоял преимущественно из социальных постов, показывающих взаимодействие между дизайнером и другими людьми.
Здесь я ещё не придумала сетку, каждый пост был не похож на предыдущий, стиль и даже толщина шрифта и линий в каждом посте были разные. Я находилась в постоянном поиске, училась на своих ошибках и вырабатывала насмотренность.
В июле меня захватил тренд на градиент и глассморфизм. Это было весело с точки зрения креативности, но было тяжело в исполнении. Из хорошего – я уменьшила количество оригинальных иллюстраций и начала использовать разные элементы одного и того же рисунка внутри постов и сторизов.
В какой-то момент время на создание одного поста стало слишком большим. Отказаться от идеи было сложно, мне казалось, что я сделаю шаг назад. Поэтому я взяла лучшее из двух периодов: использование отдельных элементов иллюстрации на слайдах и флэт-стиль без градиента.
В августе арт-директор Логомашины поделился с нами своим шрифтом. Я взяла его в использование, как акцидент, и для основной вёртски – Montserrat.
Здесь же я от хаотичной вёрстки пришла к универсальному решению – сверху текст, снизу картинка. Иллюстрации стали более проработанными, у персонажей появились эмоции. Оставалась проблема со скоростью рисования и настроением шрифта – он был слишком серьёзным по сравнению с игривым стилем рисунков.
В ноябре я ввела в использование фирменные фигуры – круг, закруглённый треугольник и ещё несколько форм. Они использовались на разных форматах. Это позволило мне внести ритм в ленту на аккаунте и лучше управлять вниманием.
На конец 2021 года в фирменном стиле всё ещё существовал ряд проблем. Я не могла определиться с цветовой гаммой, боялась использовать твёрдую сетку и всё ещё рисовала слишком долго.
Поэтому зимой 2022 года я полностью пересмотрела подход к коммуникации. Я и называю этот переход ребрендингом, потому что тогда я создала для себя и других отделов дизайн-систему, связала smm, рекламу, лендинги и презентации в единый стиль и автоматизировала большую часть процессов.
Что изменилось после редизайна
Я ввела твёрдую сетку для большинства форматов. Больше никаких скачущих заголовков, текст и иллюстрация начали располагаться на одном уровне, а главное – от поста к посту сохранялся один и тот же размер шрифта.
Также я перестала использовать Montserrat и прочие шрифты и полностью перешла на Inter.
Я избавилась от плашек разной формы и оставила только одну для большого текста и одну для рубрики. Ещё летом я начала использовать в фирменном стиле кривые линии, как символ игрового настроения, путешествия. От закрученных каракуль я оставила только мягкие изогнутые линии, чаще всего показывающих направление от текста к плашке.
Огромным изменениям в лучшую сторону подверглась иллюстрация. Если раньше я рисовала сначала скетч в Procreate, а потом отрисовывала в фигме пером, да ещё и раскрашивала большую часть иллюстрации, то теперь я рисую сразу в Vectonator на айпаде с самодельных референсов (фотографирую себя в нужной позе), а в фигме раскрашиваю только отдельные элементы. Черты лиц у персонажей перестали меняться, а вот эмоции стали намного выразительнее.
И последнее корневое изменение – вёрстка продающих постов. Они всегда были тёмной лошадкой – перегружены, скучные, с большим количеством текста. Я убрала большую часть элементов, перестала использовать подложки, наклон фотографий, задизайнила повторяющиеся буллеты и в целом также ввела жёсткую вёрстку. Теперь информация на продающих постах не делится только на текст – картинка, а представляет собой конструкцию из разных форматов и одинаковых форм.
Так или иначе, социальные сети – лицо проекта. Здесь зародился его внешний вид, что повлекло за собой изменения в остальных форматах – рекламе, презентациях, лендингах. Об этом я тоже расскажу.
Как создавалась дизайн-система
В проекте возник диссонанс. Социальные сети обновились, а остальные форматы всё ещё нет. Мне нужно было донести до команды, как использовать мои наработки.
Я начала с проработки баннеров. Составила для них стандартную вёрстку с допустимым размером шрифта, цветовые сочетания и сценарии расположения графических элементов.
Презентации тоже обзавелись стандартными табличками и паттернами. Изменилось положение камеры, часть текста перешла в правый верхний угол. Теперь в презентациях также используются только 2 вида плашек, но зато почти каждый слайд проиллюстрирован рисунков, взятым из SMM.
У каждого мероприятия появился свой цветовой код. Волшебный пинок получил жёлтый цвет, Волшебный нырок – фиолетовый, тренинг по иллюстрации – зелёный.
Промо-лендинги стали более проработанными и также содержат в себе фирменные элементы. Теперь через лендинг пользователям удобно узнавать о подробностях мероприятия.
Последняя составляющего нового бренда – научить его разговаривать с аудиторией, радовать её, дружить с ней. Всё началось с создания маскота. Мы с командой выбрали образы Инспектора Кота, Кита и Ламы.
Они общаются с аудиторией через ботов, появляются в постах, сторизах, рассказывают о мероприятиях, используются в презентациях и баннерах. В течение года персонажи безусловно видоизменялись и в итоге пришли к такой рисовке, представляя собой более сложную, но схожую стилистику стиля SMM.
Возможность для коллекционирования
В 2022 году мы также ввели коллекционные сертификаты и приглашения на мероприятия. Здесь прижился растровый стиль, подключились кураторы курсов.
Итог
В новом фирменном стиле я и команда Логомашины показали, что процесс учёбы – это весело. Мы собрали вокруг себя лояльную мотивированную аудиторию, которая хочет обучиться дизайну без напряга для себя. Ввели геймификацию и продолжаем развивать проект.
***
Круто рассказали и показали <3
Аня, лайк за детальность и информативность!