ru ua en

Створення повнофункціонального сайту, розробка UI/UX дизайну

Клієнт

Comic Con Ukraine – фестиваль популярної культури, конвент фанатів коміксів і косплеєрів.

Старт роботи з Comic Con Ukraine

Метою організаторів Comic Con Ukraine було проведення великого, повномасштабного і різнопланового фестивалю поп-культури, який зумів би при цьому підняти загальний рівень подібних тематичних заходів в Україні. Словом, створити фестиваль, який стане брендовим для країни, і в майбутньому, можливо, зможе вийти на міжнародний рівень. Таким, який зможе позмагатися за програмою і рівнем організації з найбільшими світовими конвентами, як San Diego Comic Con, New York Comic Con і MCM London Comic Con.

Визначення завдання

На перших етапах обговорення проекту Clock Creative Lab поставили ​​єдине завдання – створити ефективний Landing Page для продажу квитків на фестиваль. Але в процесі оцінки цілей з клієнтом ми з'ясували, що Landing Page не зможе задовольнити усі завдання фестивалю. Для цього потрібен повноцінний сайт.

Підготовка до розробки сайту

Клієнт прийшов до нас не лише зі своїм баченням сайту, але і з уже готовою унікальною ілюстрацією для нього. Спеціально для Comic Con Ukraine її створив художник Денис Штанько. На ній був зображений цілий всесвіт героїв коміксів, що складається з космосу, світу на поверхні землі, підводного світу та навіть пекла. У кожній з її частин були присутні, впізнавані фанатами коміксів персонажі.

Проектування UI/UX структури сайту

При проектуванні структури веб-ресурсу з UI/UX дизайном ми взяли за основу ілюстрацію, запропоновану замовником. Використали її на головній сторінці та у футері сайту. При розробці дизайну решти сторінок і функціональних елементів Clock Creative Lab надихалися ідеями коміксів Marvel та DC. Орієнтирами стали веб-ресурси наймасштабніших світових фестивалів подібної тематики.

Нашою метою було перетворити класичний інформаційний веб-ресурс на інтерактивний ігровий простір. Щоб заходячи на сайт, користувачі потрапляли у своє звичне середовище та відчували улюблену атмосферу. Ми постаралися зробити так, щоб кожна деталь дизайну залучала до своєрідної гри та стверджувала: Comic Con Ukraine по-справжньому розуміє і поділяє інтереси своїх учасників.

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

Основні інструменти UI/UX дизайну для сайту Comic Con Ukraine

При розробці UI/UX дизайну сайту Comic Con Ukraine важливо було розвинути основну ідею: «оживити» дизайн, зробити його більш інтерактивним, таким, що одразу запам'ятовується. Для цього ми відібрали відповідні технічні інструменти і візуальні рішення. Серед них паралакс - особливий вид анімації з рухом об'єктів різної швидкості. У перших версіях сайту він був більш виражений і надавав дизайну видовищності. При скролінгу сторінки та наведенні курсору на більшість об'єктів - будівлі, монстрів і супергероїв - вони рухалися. Пізніше за бажанням клієнта ми скоротили кількість подібних проявів і залишили тільки деякі з них. Також як технічні інструменти застосували слайдери, hover-ефекти й анімаційні елементи.

Завдяки адаптивній верстці унікальний дизайн сайту Comic Con Ukraine однаково вдало відображається на усіх видах пристроїв - планшетах, мобільних телефонах, ноутбуках та більшій мультимедійній техніці.

Реалізація дизайну сайту Comic Con Ukraine

Головна сторінка відображає найбільш актуальну мету замовника на момент запуску сайту - рекламу майбутнього фестивалю. На ній вказано його назву, дату та місце проведення. Місто, у якому буде проходити захід, добре впізнаване на ілюстрації. У відображенні на водній гладі Дніпра помітні невіддільні атрибути Києва: Північний (Московський) та Парковий мости, пам'ятник Богдану Хмельницькому, монумент «Батьківщина-мати», Софійський і Михайлівський собори, Арка Дружби народів. У «реальному» світі, на поверхні, столиця постає інший - такою, якою її бачать фанати коміксів, і якою вона насправді стане завдяки організаторам Comic Con Ukraine на час проведення фестивалю. Таємничі замки, вежі з електричними розрядами, що миготять на даху, монстри і чудовиська, які прагнуть захопити владу над містом, і, звичайно, супергерої, що протистоять їм. Над усім цим у небі кружляють вертольоти, а по підсвіченій Арці Дружби народів скачуть чарівні єдинороги.

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

Юзабіліті сайту Comic Con Ukraine

При розробці сайту Comic Con Ukraine вкрай важливо було забезпечити його повну адаптивність та ефективність компонування на усіх видах пристроїв. Це необхідна умова для максимального охоплення цільової аудиторії.

Наша команда продумувала усі можливі сценарії поведінки користувача при створенні кожної сторінки, щоб забезпечити: інтуїтивно зрозумілу і просту навігацію, логічне розташування інформаційних блоків, доступно подати зміст. На сайті Comic Con Ukraine відповідно до принципів UI/UX дизайну основна інформація розміщена на головній сторінці, а додаткова - виведена на інші сторінки меню.

На веб-ресурсі користувач одразу отримує можливість:
  • Купити квиток на фестиваль за допомогою пульсуючої червоної кнопки «Buy tickets». Крім того, кнопка «Купити квиток» доступна на кожному екрані при скролінгу сторінки;

  • перейти на сторінки Comic Con Ukraine у соціальних мережах;

  • дізнатися про переваги фестивалю та головні події програми;

  • ознайомитися з новинами Comic Con Ukraine;

  • отримати більш детальну інформацію про умови участі для відвідувачів, косплеєрів, танцювальних команд K-pop Cover Dance, преси, стендів і магазинів з можливістю подати заявку;

  • побачити за допомогою відеоогляду і фотографій локацію, на якій буде проходити фестиваль;

  • ознайомитися з переліком партнерів заходу.

Підсумки співпраці з Comic Con Ukraine

Будемо об'єктивні, нам вдалося розробити стильний, ефективний, конкурентоспроможний і функціональний веб-сайт, який повністю відповідає потребам його цільової аудиторії. Грунтовно занурившись у тему, команда Clock Creative Lab зуміла створити по-справжньому конкурентоспроможний тематичний сайт, що дозволяє забезпечити стабільне зростання популярності фестивалю у майбутньому.

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

Веб-ресурс Comic Con Ukraine відповідає загальній філософії бренду, зручний для відвідувачів і вирішує всі завдання заходу, покладені на "онлайн-сегмент" просування фестивалю.

Потрібен сайт, який допоможе вирішити завдання вашого бізнесу, завоювати довіру клієнтів і лідерство у своїй ніші?

Ми готові обговорити реальні можливості розвитку вашого бізнесу!