Разработка иллюстрации для сайта школы английского языка

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

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

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

О заказчике

The English Lab — школа изучения английского языка для детей и подростков. Клиент обратился к нам просьбой создать промо-сайт, который в простой и понятной форме познакомил бы пользователей с авторским подходом к обучению, а также показал действенность данных методов преподавания.

Этапы при разработке

1. Аналитика и предпроектное исследование

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

Мы провели множество часов тесного общения с клиентом, чтобы понять все нюансы и особенности работы школы, после чего провели большую аналитическую работу. 

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

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

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

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

2. Генерация идеи

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

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

⦁ обучение в мини-группах;
⦁ качественный и быстрый результат;
⦁ доверительная и непринужденная обстановка;
⦁ индивидуальный подход к каждому ребенку.

3. Референсы для вдохновения

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

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

Отправляемся в путешествие

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

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

Но, что же еще нужно команде исследователей? Конечно же, транспорт! 

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

Выбираем на чем ехать или… лететь!

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

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

Пара референсов ракет, которыми мы вдохновились.

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

Добавить частичку Великобритании. Это ракета или телефонная будка?

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

Пример английского автобуса, выполненного в "мультяшном" стиле

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

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

Сделать дизайн, который понравится и детям тоже! Или немного о персонажах.

Помимо всего прочего, было необходимо адаптировать будущую иллюстрацию для восприятия не только основной аудиторией сайта – родителями, но их их детьми. Нам очень понравилось несколько интересных примеров и мы выбрали, в качестве стилистики “мультяшность”. Таким образом, мы решали сразу две задачи, показывали “игровой подход” к обучению и вызывали интерес у будущих учеников.

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

Основной референс, который вдохновил нас на «мультяшный» стиль иллюстрации.

И немного “похимичить”

Также у нас возникла еще одна интересная идея, как добавить иллюстрации больше “задоринки” и динамики. Мы принялись перебирать задумки и обнаружили вариант, благодаря которому, при взгляде на иллюстрацию, ощущаешь еще больше движения и “искры”. 

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

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

Референс, который показал нам, что мелкие элементы могут быть отличным дополнением иллюстрации

4.Процесс создания

Теперь нам предстояло собрать воедино все разрозненные идеи, полученные в процессе этапа «Генерации идей».

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

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

 
Но, одной телефонной будки нам показалось мало и мы решили “воссоздать” Великобританию при помощи других узнаваемых символов. На заднем фоне картинки были размещены силуэты Биг-Бена, Тауэрского Моста, крыш лондонских домов.  

Этап 1. Вдыхаем жизнь нашу иллюстрацию

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

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

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

   Этап 2. Разработка дизайнера

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

Мы ушли от цветного фона, сократили количество букв, а паттерн из символов «воссозданной» Великобритании перенесли в подвал сайта. В итоге у нас получился тот идеальный вариант, который гармонично встроился в дизайн сайта.  

Этап 3. Итоговый вариант

Этап 4. Внедряем иллюстрацию на сайт

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

Результаты — успешный успех!

Как и итог — иллюстрация стала “изюминкой” сайта. Благодаря картинке и общей концепции, ресурс стал, действительно, уникальным. Он создавал впечатления и вызывал положительные эмоции. Это не прошло незамеченным и сайт получил профессиональные награды, такие как:

⦁ Победа в конкурсе “Рейтинг Рунета-2018” в номинации  “Обучение”
⦁ SPECIAL KUDOS в международном конкурсе CSS Design Awards