Создание полнофункционального сайта, разработка 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 структуры сайта

Описанная выше иллюстрация была взята за основу при проектировании структуры сайта Comic Con Ukraine, украсив главную страницу и футер портала. В остальных случаях 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 cумела создать по-настоящему конкурентоспособный тематический сайт, позволяющий обеспечить стабильный рост популярности фестиваля в будущем.

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

Веб-ресурс Comic Con Ukraine соответствует общей философии бренда, удобен для посетителей и решает все задачи мероприятия, возложенные на “онлайн-сегмент” продвижения фестиваля.

Нужен сайт, который поможет решить задачи вашего бизнеса, завоевать доверие клиентов и лидерство в своей нише?

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