Конкурс для IT-фахівців Ukrainian IT Awards до 1 листопада приймає заявки на участь. Олександр Тараненко, креативний директор компанії sense it, розповідає для Telegraf.Design, як його команда розробила для події айдентику та її ідею, й навіщо головній IT-премії знадобився ребрендинг.

У липні 2020 року наша команда взялася за ребрендинг «Оскара» для українських IT-фахівців. У нас були жорсткі дедлайни, тож майже за місяць ми повністю оновили айдентику та сайт конкурсу.

Для початку – новий логотип Ukrainian IT Awards:

Поки ваш мозок буде розв’язувати таємницю фіолетових прямокутників, розповім, як і навіщо ми вирішували це завдання.

Що ми знали про Ukrainian IT Awards – і що варто знати вам

Ukrainian IT Awards шукає й нагороджує професіоналів індустрії. Є дев’ять персональних номінацій – від Software Engineering і Infrastructure & DevOps до Management і IT Education. У 2020 році додалися дві командні – Impact of the Year та Innovation-Research of the Year.

У IT Awards може подати заявку будь-який український IT-фахівець. Для цього в онлайн-анкеті потрібно розповісти про складний проєкт, над яким ви працювали, описати, які найкращі практики використовували, яких результатів і соціального впливу домоглися. Організатори визнають: у досвідчених учасників шансів більше, але Senior або Lead бути необов’язково.

Ukrainian IT Awards 2019 – офлайн і без масок

Конкурс заснувала і вперше провела у 2012 році компанія SoftServe. Локальний захід швидко виріс, залучив сотні учасників. Щоби розвивати його далі, SoftServe запросила у співорганізатори Асоціацію «IT України», а у 2020-му – повністю передала їй конкурс.

Цього року переможців визначають понад 70 людей із 55 компаній. PwC Україна стежить за правильністю підрахунку голосів. На «бекенді» організатор зробив усе, щоби конкурс проходив об’єктивно й незалежно. А нас попросив про «фронтенд»: показати зміни, відбудову і нові меседжі.

Що ми зробили насамперед

Часто в ребрендингу завдання № 0 – не намалювати симпатичне лого, а довести до ладу сервіс. У випадку з конкурсом слабким місцем був сайт. Подання заявок зависало, дані учасників іноді губилися з незрозумілих причин. Доводилося самостійно вносити анкети в базу, формувати листи для оцінювання журі.

Поки продуктова команда робила технічний аудит, дизайнери зайнялися концепцією. У кожному проєкті ми спочатку складаємо мапу точок, де бренд взаємодіє з аудиторією. У кейсі IT Awards – це сайт, сторінки в соцмережах, відео, розсилки, правила, мерч, нагороди, буклети, бейджи, банери тощо.

Попередній логотип конкурсу

Щоби бренд упізнавали, скрізь має бути єдиний стиль. Він відстежується через лого, корпоративні шрифти, кольори, tone of voice тощо. Побачили ручку або пакет із логотипом – упізнали. Прочитали пост або зайшли на сайт – упізнали.

Конкурс спирався на слоган «стань IT-зіркою» і для цього обігрував стилістику космосу: фон зоряного неба на сайті, номінації у формі сузір’їв. Але текстове лого, поєднання кольорів, шрифти, сувенірка не показували візуальної єдності.

Тема зірок у конкурсах популярна, але в тому і складність: вона підходить майже для будь-якого конкурсу. В айдентиці важливо вибудувати більш пряму асоціацію з IT. Для цього нам потрібно було переосмислити ідею зірок або придумати нову, що ляже в основу фірмового стилю.

Як ми придумували

Рецепт перевірено досвідом: закинути в мозок побільше інформації, й давати йому перемикатися. Часто інсайти приходять не за робочим столом і не тоді, коли запекло треш чоло. Ми збираємо референси та мудборди, малюємо перші скетчі та пишемо короткі обґрунтування. За деякий час знову збираємося й обговорюємо конкретні пропозиції.

Один із наших мудбордів

Ми шукали різні асоціації з індустрією – від історії двійкового коду до сучасного впливу й методів обробки даних. Паралельно вивчали схожі кейси, інші конкурси, згадували тематичні книжки й серіали, спілкувалися з колегами-айтішниками.

Зазвичай на такі пошуки й обробку йде до декількох тижнів. Але саме за такий термін конкурс мав стартувати. Тому вже за тиждень замовник дістав дві концепції, з яких обрав переможця.

Логотипи

Ваш мозок уже розгадав наш задум? От відповідь:

Нова айдентика конкурсу показує, як упорядковується хаотична інформація. Асоціацій із IT багато. Як працюють алгоритми сортування (що технарі вивчають ще в школі). Як програми структурують дані. Як програмісти оптимізують рядки коду. Як обробляється бігдата.

Кумедно, але нас надихнув ще один візуальний образ, теж пов’язаний із IT-тематикою. Його напевно пам’ятають ті, хто в дев’яностих та нульових «експериментував» удома з Windows.

У 2020-му дефрагментацію диску використовують одиниці. А колись багато з нас намагалися прискорити роботу системи. Кольорові квадрати рухалися, мінялися місцями й давали надію. Ми ж заспокоювалися, ніби дивлячися на вогонь. У цьому образі є суть конкурсу – впорядкувати за номінаціями сотні заявок і визначити серед них кращих.

Фіолетовий обрали з двох причин. По-перше, послідовність – його відтінки використовували попередні конкурси. По-друге, якщо поглянути на кольоровий спектр, то можна побачити, що фіолетовий може виникати у двох його кінцях, укладаючи в собі всі інші кольори. Так і конкурс IT Awards об’єднує безліч номінацій, які представлені в стилі кольорами веселки.

Кольори нових номінацій можна легко вибирати зі спектра

Командні номінації ми оформили поєднанням персональних

Ми відразу зробили приклади віжуалу для різних точок контакту з аудиторією.

Першу версію стилю майже відразу погодили. Далі ми допрацьовували концепцію до дрібниць, придумували правила й систему використання стилю. На виході віддали детальний Style Guide. З цим документом будь-який дизайнер надалі зможе розробляти для конкурсу віжуал і продукцію.

Щоби спростити собі та іншим роботу над графікою, ми відмовилися від хаотичного розміщення «прямокутників». За основу побудови ми взяли систему пропорціонування «Модулор», яку розробив культовий французький архітектор Ле Корбюзьє.

Як ми (пере)робили сайт

Коли клієнт затвердив загальну ідею, лого, колір, шрифт і правила, продуктова команда взялася за веб.

Головне, що робить сайт, – інформує та приймає анкети. Нам не потрібно було проводити глибинні інтерв’ю, визначати корнер-кейси, тому що болі користувачів нам передав сам замовник. Ми зосередилися на швидкості роботи та естетиці.

Минулий сайт збирали на WordPress, а за приймання заявок відповідав окремий модуль на PHP, який іноді непередбачувано втрачав анкети. Тому від ідеї «просто виправити» ми швидко відмовилися.

Технічна команда інтегрувала топову Headless CMS Strapi. Фішка цієї CMS – на бекенді задані встановлені сервіси, які ми перевикористовуємо. А багато бізнес-логіки реалізується на фронтенд-частині на React.

Спочатку віддали MVP – сайт із доступною формою подання заявки на журі. Після релізу доробили інше, зокрема подання заявок для номінантів. Тепер вони приймаються швидше, ніж встигає відпрацювати анімація. Готові анкети відразу приходять організаторам у структурованому форматі й додаються в базу для розподілу на журі. У процес більше ніхто не втручається.

Щодо віжуалу вирішили декілька головних завдань.

1) На минулому сайті був чорний фон зоряного неба. Це грало на тематику «стань зіркою», але читати, наприклад, тексти навіть середнім шрифтом було складно. З іншого боку, ми хотіли зберегти послідовність. За декілька ітерацій прийшли до рішення: перший екран – темний із яскравими фіолетовими акцентами, далі – залежно від типу контенту.

Так перші екрани ставали темнішими й лаконічнішими

2) Стара форма подання заявки відлякувала потенційних учасників обсягом: десяток запитань, а потім ще й телефонне інтерв’ю. У діалозі з організаторами продуктовий дизайнер зробив анкету місткою.

3) Фото переможців, учасників та членів журі на старому сайті займали з десяток екранів. Ми вмістили їх у три блоки.

Так фотографії відображалися раніше

Ідею сортування даних ми втілили в оформленні розділів і мікроанімаціях. Наприклад, інтерфейс відгукується на кнопку подання заявки або на певні розділи. Упорядкували номінації, переможців минулих років і членів журі за категоріями.

Від ознайомлення з ТЗ до завантаження останніх логотипів пройшов місяць – звісно, паралельно з іншими проєктами. Зараз ми закінчуємо невеликі роботи, які не побачить відвідувач сайту. Наприклад, експорт заявок в PDF, а не тільки CSV.

Єдине, що залишилося від старого сайту – домен. Ми перенаправили запити. А поностальгувати над торішнім варіантом можна в архіві.

У проєкті брали участь:

• чотири графічні дизайнери
• Chief Product Technical Officer
• координатор проєкту
• продуктовий дизайнер
• фронтенд-лід
• фронтенд-розробник і HTML-кодер

Які складності ми вирішили

Було три головні складності.

Перша і відома всім – терміни. Незвичайних рецептів у нас немає. Ми оперативно перерозподіляли пріоритети і тримали в голові анекдот про ледачих людей – намагалися робити добре з першого разу, щоби не перероблювати.

Друга складність – вимоги до стилю. Потрібно було зробити його цікавим візуально, але водночас, простим і гнучким до змін, передбачити можливість нових номінацій, елементів, майданчиків і дизайнерів. Саме так з’явилися чіткі правила з опорою на «Модулор», а всі нюанси ми внесли в докладний гайд.

І третя складність – задоволення замовника. Перед тим, як пропонувати, ми ретельно досліджуємо ринок і оточення клієнта, щоби відразу бити в «десятку» концепціями, кольорами, логотипами, продуктами. Чітко дотримуємося установки, що дизайн – це насамперед не про «гарно», а про досягнення бізнес-цілей.

Telegraf.Design працює за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.