ЗАДАЧИ ПРОЕКТА
Сайты детских лагерей часто оформляют ярко и красочно, чтобы создать атмосферу радости и веселья. Но студия фехтования «Гарсар» отличается от традиционного детского лагеря с его развлекательными программами, вечеринками и подростковыми понтами.
Это походные ролевые программы с погружением в мир фэнтези, занятия фехтованием, крафтингом и ремёслами. Но главное — это школа жизни, где формируется личность, способная принимать решения и отвечать за свои поступки. Здесь подростки получают безопасный, но реальный опыт. Ведь цена ошибки высока лишь в рамках игры, а полученный опыт ценен для дальнейшей жизни.
Заказчику было необходимо, чтобы сайт отражал эту философию, а не типичные лагерные истории. С первого экрана пользователь должен был погрузиться в атмосферу сказки и средневековья, ощутив дух приключений. Вдохновлённые этим амбициозным проектом, мы создали сайт, при переходе на который пользователь мгновенно оказывается в Империи Гарсарис.
МАРКЕТИНГОВАЯ АНАЛИТИКА
При создании сайта для летнего лагеря нужно иметь в виду, что он предназначен для двух групп пользователей — детей и их родителей. Мы провели маркетинговое исследование, чтобы определить основные потребности, опасения и предпочтения каждой группы. Эти данные были учтены при формировании структуры сайта и наполнении разделов информацией.
Отдельно разработали версию для детей, которая увлекает их в мир фэнтезийного приключения и рассказывает о том, чем они будут заниматься во время смены. Также создали страницу для родителей, где акцент сделан на условиях пребывания, безопасности, комфорте и развитии, а также профессионализме педагогов.
Дети ориентируются на красочные картинки и эмоции, а взрослые — на ценность предложения. Поэтому структура страниц создавалась с учётом этих особенностей.
СТРУКТУРА САЙТА
Одной из интересных задач было создание удобной для пользователей навигации по сайту. Ведь изначально клиент хотел создать два одноуровневых лендинга: один для родителей, другой — для детей.
Создание главной страницы с возможностью выбора версии сайта для детей или родителей было бы простым решением, но это могло бы затруднить продвижение сайта. Такая страница содержала бы основное меню и переключатель между версиями, что делает её бесполезной для поисковых роботов и снижает шансы на высокие позиции в результатах поиска. Поэтому мы отказались от этого варианта (см. вариант № 1).
С точки зрения SEO-оптимизации, наиболее эффективной была бы структура с одной информативной главной страницей, от которой ответвляются две отдельные страницы: одна для детской аудитории, другая — для родителей (см. вариант № 2).
Создание такой структуры увеличивало стоимость проекта, поэтому было решено, что одна из двух страниц станет основной. На этой странице нужно разместить информацию о существовании второй версии для другой аудитории и кнопку для перехода на неё.
Так как решение о покупке принимают родители, и они же оплачивают путёвку, мы сделали главной версию сайта для родителей.
ПРОТОТИПЫ
Чтобы улучшить навигацию, мы добавили дополнительную информацию на обложку сайта о существовании второй страницы и элементы интерфейса, которые позволяют перейти на эту страницу.
Чтобы облегчить восприятие и создать простой функционал, мы отказались от скрытого контента, который появляется при наведении курсора или нажатии. Это позволило сосредоточиться на основных элементах и анимации, которые погружают посетителей в фэнтезийную атмосферу.
Весь текст доступен для чтения сразу, без дополнительных действий со стороны пользователя. Дизайн помогает обыграть контент и делает его более привлекательным.
Заказчик работал над двумя программами с несколькими сменами в каждой. Нам нужно было создать решение, позволяющее заказчику самостоятельно добавлять новые смены, сохраняя при этом эстетичный вид карточек. В результате мы создали карточки, занимающие всю ширину сетки и расположенные друг под другом, содержащие необходимую информацию.
ДИЗАЙН
В процессе визуального исследования и сбора референсов мы узнали от клиента, что ему требуется веб-сайт, передающий атмосферу средневековья. Пользователь должен мгновенно погрузиться в этот вайб и захотеть посетить лагерь. На основе этой информации начала формироваться концепция будущего сайта.
Мы отрисовали уникальные иллюстрации, подобрали подходящие изображения для каждого раздела и эффектную анимацию. В качестве темы иллюстраций были выбраны рыцари в различных походных ситуациях.
Также были созданы иллюстрации для технических страниц:
Кроме того, мы предложили разместить на сайте реальные фотографии лагеря, его территории, участников предыдущих смен и педагогов. Это укрепит доверие родителей, а яркие образы заинтересуют детей.
Мы выбрали нестандартный платный шрифт Bazhanov, который соответствует стилю сайта, и дополнили его легко читаемым шрифтом Manrope.
Для сайта мы выбрали необычный текстурный фон, стилизованный под старинный средневековый пергамент. В оформлении контента также использовали элементы, создающие атмосферу той эпохи. Даже слайдеры, всплывающие окна и карту оформили нестандартно:
Повествование выстроено в формате скроллителлинга: интересная история, которая ведёт пользователя по странице по мере скролла.
Для проекта создали подробную и детализированную карту лагеря с указанием маршрутов и всех баз:
Для главных экранов разработали крутую анимацию, в которой нарисованное изображение постепенно сгорает, превращаясь в пепел, а под ним проявляется реальная фотография. На ней можно увидеть тот же пейзаж и юных рыцарей, что были на иллюстрации.
ВЁРСТКА САЙТА
Платформа Tilda идеально подошла для реализации проекта, так как она позволяет создавать уникальные сайты с использованием нулевых и стандартных блоков. Заказчик получил возможность самостоятельно обновлять информацию в разделах отзывов и галереи, без привлечения программистов. Для разделов, выполненных с использованием нулевых блоков, мы предоставили подробные инструкции по изменению дат, цен и другого контента.
© WebValley Studio 2024
Made in: https://web-valley.ru
Education: https://web-valley.ru/academy
Instagram: @alexwhite_mzk
VK: vk.com/webvalley
Telegram news: @webvalley_news
Telegram community: @webvalley_community
↑ Ready to make a great project :)