Еще в конце лета мы с командой менеджеров, разработчиков и дизайнеров собрались для того, чтобы генерировать идеи для новогодней геймификации.
Геймификация — это технология адаптации игровых методов к неигровым процессам и событиям для большей вовлеченности участников в процесс.
Зачем внедрять ее в бизнес?
В нашем случае — для того, чтобы повысить общие знания по работе с приложением, вовлеченность, общее привлечение и удержание пользователей.
Спустя 8 часов обсуждений была выбрана самая подходящая идея.
Общая концепция геймификации такова: есть карта с 11 городами и путь, который необходимо пройти по этой карте, выполняя различные задания. За завершенное задание пользователь будет получать баллы (в нашем случае километры) и продвигаться по карте до финальной точки. В конце у пользователя будет возможность поучаствовать в розыгрыше множества ценных призов, а также побороться за главный приз — автомобиль Audi Q3.
Менеджеры начали прописывать ТЗ, логику и все особенности, а мы, дизайнеры, начали работать на юзер флоу и визуальной концепцией.
В этой статье я расскажу, как проходил этап генерирования идеи, поиска стилистики и отрисовки части UI, в частности иллюстраций.
Шаг первый. Поиск референсов и составление мудборда
Референс помогает получить новые идеи.
Референсами можно считать любые изображения, которые максимально точно передают идею автора.
Например, фотографии, кадры из фильмов, чужие рисунки или плакаты.
Перед началом работы я изучила все, что связано с тематикой Нового года и игровыми картами. Мне нужно было максимально погрузиться в тему перед началом работы, буквально ощутить на улице снег и запах мандаринок, таким крутыми должны были быть референсы :)
Чтобы найти вдохновение, я зашла на Pinterest, Dribbble, Behance. Все, что показалось полезным добавила себе в файл иллюстратора. В итоге получаю что-то подобное.
Из всего найденного больше всего понравится стиль, который в своих работах использует иллюстратор Gemma Gould. Я внимательно изучила ее технику, цветовую гамму и то, как она работает с деталями в своих иллюстрациях.
К слову, у нее была также иллюстрация карты, которая в дальнейшем как раз стала основой для нашей карты в Приват24.
Шаг второй. Отрисовка концепций
Некоторые иллюстраторы с легкостью отрисовывают концепты прямо в графических редакторах. Но я не из их числа. Мне намного удобнее начинать работу именно с листа бумаги и карандаша для отрисовки идей и концепций. К слову, в книге «Дизайн логотипов» автор Дэвид Эйри как раз советуют начинать работу над логотипами именно с бумаги и карандаша, так как руки в этом случае работают быстрее:
Перед тем как учиться пользоваться компьютером, вы учились рисовать. Почему? Потому что — легче. Меньше ограничений. И больше творчества. Хотите круг здесь? Штрих там? Нет проблем. Возьмите и нарисуйте. А пока вы проделаете то же самое на компьютере, ваш творческий порыв успеет угаснуть.
В работе с иллюстрациями я тоже всем советую начинать работу именно с бумаги и карандаша.
В работе я столкнулось с небольшой проблемой. Детально отрисовать 11 городов на относительно небольшой карте достаточно сложно. Поэтому каждый город был по смыслу ужат в некое здание или просто домик.
Далее я набросала концепты городов, стараясь брать в учет специфику их названия, которые так или иначе перекликаются с банковскими сервисами или тематикой.
Вот что у меня вышло.
Когда концепты были утверждены, я начала отрисовку.
Шаг третий. Отрисовка графики
Я понимала, что выбранный мною стиль предполагает работу с кистями, и с этим отлично справятся инструменты Adobe Photoshop.
Перед началом работы я снова обратилась к референсам, чтобы подобрать палитру цветов. Для всего, что связано с зимой и снегом было выбрано 5 оттенков. Я отрисовала их кистями и сохранила их себе отдельным слоем. Это делается для того, чтобы не было рассинхрона в оттенках, когда иллюстрация станет больше и объемнее.
Опытным путем мы пришли к выводу, что сама карта должна быть 4000 на 4000 пикселей, и у нее должны быть некие свободные границы для удобства перемещения по карте.
Каждый город я отрисовывала в довольно крупном масштабе (около 1500 на 1500 px). Это связано с тем, что я работала в растре, а это значит, что изображение нельзя будет увеличить без потери качества. Поэтому для перетраховки каждый город был отрисован с запасом по размеру в бОльшую сторону.
Как я отрисовывала город?
Если говорить про этапы и инстументы, то я пользовалась такими инструментами: прямоугольное лассо, кистью и заливкой.
Каждый элемент иллюстрации был создан на отдельном слое. Например, отдельно я рисовала стену, отдельно крышу, отдельно окна, отдельным слоем тени на стене, крыше и окнах, свет также отдельно. Отдельно декор.
Это сделано для того, чтобы не отрисовывать все заново, если понадобиться поменять цвет, обрезать или подчистить какой-то элемент.
Очень важно не запутаться в слоях и не забывать давать осмысленные названия слоям и группам.
Что важно не забывать во время отрисовки иллюстрации?
- Где находится источник освещения. Чтобы все элементы иллюстрации смотрелись гармонично между собой, вы должны определить для себя положение источника освещения. Отрисовывая каждый город, я предполагала, что свет будет падать прямо сверху на здание, поэтому его верх более освещен, а все объемные элементы дают тень.
- Перспектива и пропорции. Если вы определились, что все элементы иллюстрации будут отрисованы с фронтальной перспективой, то не нужно добавлять угловую перспективу. Например, пытаясь отрисовать город ПриватЛенд, я опиралась на реальные фото здания ПриватБанка, но не сразу могла понять что мне не нравится в иллюстрации. И только со временем я осознала, почему он не вписывался. Он был в угловой перспективе (как с реального фото), а остальные здания отрисованы во фронтальной перспективе.
- Цветовая гамма. Определитесь с палитрой на начальном этапе и постарайтесь не вводить лишние неоправданные цвета. Так композиция будет смотреться целостнее. В моем случае была холодная гамма плюс 3 дополнительных цвета для городов (красный, синий, бирюзовый), они были достаточно контрастны по отношению к фону карты, не дробили визуально карту (из-за того, что их было только три и они не слишком отличались друг от друга по яркости и насыщенности). Также у нас на карте была летняя зона. Она, конечно же, была в соответствующей цветовой гамме, но это уже другая история :)
Шаг четвертый. Передача в разработку
Все города, персонажи, карта и декор готовы. Дальше я собирала все элементы уже на карте. Каждый отдельным слоем, создавая общую композицию.
Каждый город отдавался в разработку в формате png и прогнанный через сервис сжатия tinypng.com, что позволило избежать сильного утяжеления веса приложения.
Также каждый город был вписан во фрейм (квадрат) одного размера. Это упростило позиционирование объекта для отдела разработки.
Вот как карта выглядела в конце работы:
Ну а дальше в работу вступили разработчики и тестировщики.
Геймификация проработана для трех платформ: iOS, AOS, web и поможет пользователям получить положительные эмоции и новый опыт, а бизнесу — заработать.
