Кейс «Автошкола Онлайн». Полная упаковка бренда

Дизайн бренда + оформление социальных сетей + дизайн и сборка сайта для Автошколы Онлайн.

Написал мне однажды @tsbaev с интересным предложением. Нужно было разработать логотип, фирменный стиль, руководство по использованию фирменного стиля (гайдбук) и сделать оформление для группы ВК. Обговорили все условия, и я принялся за работу параллельно допиливая свой сайт на Tilda.

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

Мысль была такая: ползунок из интерфейсов + колесо + буква «о».

Идея логотипа
Идея логотипа

Отрисовал ее, получилось классно, но пытаясь подобрать шрифт «поинтереснее» я выбрал слишком интересный. Как говорится: играл со шрифтами и проиграл. Клиенту понравилась идея, но не понравился шрифт. Не беда, подумал я, и подобрал еще несколько. Один понравился, и я принялся работать дальше.

Логотип
Логотип

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

Согласовали, идем дальше.

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

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

Дальше я оформил ВК, там ничего сложного: корпоративные цвета, брендированная тачка, мокап с айфоном и главной страницей приложения автошколы и мои любимые «летающие» элементы для динамики.

Оформление сообщества ВК
Оформление сообщества ВК

Радуясь, что все закончено, я принялся мысленно тратить заработанный кэш. И тут снова раздался звонок от @tsbaev . Оказалось, что им нужна еще разработка сайта на Tilda, и они хотят, чтобы я этим занялся. Я ответил, что опыта коммерческой разработки сайтов у меня нет, и не могу ручаться за результат. Думал уже отказаться, но потом вспомнил, что когда-то я начинал делать и другие вещи без опыта, да и в гугле я не забанен. В общем, решил рискнуть.

Накидал референс в Illustrator и скинул. Им понравилось. Тогда я начал собирать сайт уже в Tilda. В какой-то момент решил, что нужно бы все это сделать «поинтересней», и в голову пришла идея создать 3D-анимацию айфона. Но как такое внедрять на сайт, я не знал. И принялся гуглить. Ответ нашелся быстро, поэтому я полез в блендер, собрал там на скорую руку анимацию с айфоном, отрендерил, перевел все это в javasсript, потом по примеру написал код для этого дела, и на мое удивление все заработало, да еще как. Сайт реально начал цеплять глаз, и дальше я решил внедрить еще несколько анимаций, но уже без 3D и кодерства.

Сайт "Автошкола Онлайн". Главный экран
Сайт "Автошкола Онлайн". Главный экран
Сайт "Автошкола Онлайн". Анимация блока с этапами обучения
Сайт "Автошкола Онлайн". Анимация блока с этапами обучения

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

Заценить оформление можно тут: https://vk.com/autoschool_online58

Заценить сайт тут: https://xn---58-5cdabl3dfkcxdfbd5d3f.xn--p1ai/

Договориться с замечательным человеком и классным специалистом тут: https://vk.com/tsbaev

Заказать дизайн себе можно тут: https://vk.com/chevtaevdesign

Всем спасибо за внимание!

4 комментария

Очень годно получился дизайн главного экрана. Действительно понравилось.

Дам небольшой фидбэк:
1. Стоит обратить внимание на скрепления углов у плашек. Лучше всего придерживаться одинакового радиуса скругления, чтобы концепция не рассыпалась.
2. По поводу работы с возражениями. В основном, все «но» и правки клиента закрываются грамотным объяснением концепции логотипа/дизайна + презентация(если сделать скринкаст, то вообще бомба будет)
3. Работать с ассоциациями первого порядка в идеях по созданию логотипа, чтобы они были более уникальными.

Надеюсь, что обратная связь была уместна и не задела ✨

1
Ответить

Большое спасибо за обратную связь! Для меня это очень важно, т.к. это мой первый коммерческий опыт в создании сайтов, и замечания обязательно учту в следующих проектах! :)

1
Ответить

Неплохой кейс получился. Но желтый цвет я бы сменила на более спокойный, ассоциации у меня с такси, а не с автошколой)

1
Ответить

Да, понимаю) Но клиента переубедить не удалось, к сожалению. И пришлось танцевать от него)

Ответить