Ще наприкінці літа ми з командою менеджерів, розробників та дизайнерів зібралися для того, щоб генерувати ідеї для новорічної гейміфікації.
Гейміфікація — це технологія адаптації ігрових методів до неігрових процесів та подій для більшої залученості учасників до процесу.
Навіщо впроваджувати її у бізнес?
У нашому випадку — для того, щоб підвищити загальні знання щодо роботи з додатком, загальне залучення та утримання користувачів.
Через 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 та допоможе користувачам отримати позитивні емоції та новий досвід, а бізнесу — заробити.
