Дизайн и разработка сайта для Friday’s Games

Карантин карантином, а новыми проектами хочется делиться. Тем более, что это сайт разработчиков игр. А игры сейчас — вещь полезная и помогающая пережить домоседский режим. Digital-агентство «Атвинта» рассказывает, как разрабатывать сайт и выстраивать работу, когда вся команда заказчика тестирует дизайн и дает по нему замечания.

Заказчик — Friday's Games, студия разработки компьютерных игр из Новосибирска, основанная в 2007 году. Студия выпускает игры разных жанров, которые получают всероссийское и мировое признание.

Они обратились в «Атвинту» за «корпоративным сайтом с классным дизайном». Цель сайта — презентовать студию для профессионалов в разработке игр. Сайт рассказывает о компании и вакансиях, демонстрирует проекты и офисную жизнь.

Friday’s Games позиционирует себя как одного из лидеров на рынке мобильных игр. Дизайн нового сайта должен работать на репутацию компании, увеличить интерес со стороны профессионалов гейм-разработки и привлечь новых сотрудников.

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

Сотрудничество начали с разработки дизайн-концепции. Метазадача этого этапа — синхронизировать наши идеи с видением заказчика.

Еще на первых обсуждениях проекта с заказчиком мы выяснили: главная ценность новом в сайте — крутой дизайн. Это была ключевая метрика успеха проекта в глазах заказчика и основной запрос к команде «Атвинты»: покажите, какой дизайн вы можете сделать.

Нужна была концепция будущего сайта, которая визуально отразит сущность Friday’s Games и ценности их команды. Это важно, ведь студия хочет привлечь специалистов с близким мировоззрением, готовностью вливаться в проекты, улучшать существующие и разрабатывать новые игры в стиле Friday’s.

На старте мы договорились, что заказчик рассказывает нам принципиальные пожелания по дизайну и информацию, которая обязательно должна быть на сайте. А мы на основании этого разрабатываем и презентуем одну концепцию, которая на наш взгляд максимально отражает «дух Friday’s Games».

По результатам принимаем решение о дальнейшем сотрудничестве. Если видение дизайна Атвинты и Friday’s Games совпадают, продолжим развивать концепцию.

Задача — произвести впечатление на профессионалов в сфере разработки игр. Целевая аудитория, соответственно, — гейм-дизайнеры и разработчики игр, менеджеры продукта, аналитики, маркетологи этой сферы.

Целевая аудитория сайта схожа с аудиторией наших сотрудников. Различие в том, что «Атвинта» создает цифровые продукты для бизнеса, а Friday’s — для интертеймента.

Так родилась идея сделать фоном сайта видеоролики, демонстрирующие сотрудников за работой и их офис: как отрисовывают персонажей, обсуждают проекты, тестируют игры.

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

Подробнее о концепции

Заказчику понравился наш подход к работе и идеи. Студия выкупили эту концепцию, однако попросили переработать идею: сделать сайт более светлым и отказаться от иконок из их брендбука.

В первой концепции заказчику понравилась структура главной страницы и работа с типографикой — крупные заголовки на каждом экране. При этом они хотели визуально более воздушный сайт с использованием арта из их игр.

Во второй итерации мы презентовали несколько идей на основании комментариев к первой концепции.

Из предложенных вариантов выбрали третью концепцию: крупная типографика во весь экран, дополненная персонажами из игр студии.

Главный акцент в концепции — крупные заголовки и поэкранное представление разделов сайта. Причем заголовки как бы уходят за пределы экрана, транслируя идею масштабности проектов студии, выход за границы и развитие.

Структуру главной страницы сформировали исходя из анализа, что может заинтересовать специалистов геймдева в работе. Это крупные проекты, известные в среде гейм-разработчиков, комфортабельный офис, условия работы и атмосфера в команде. Исходя из этого выделили разделы «Проекты», «О нас», «Вакансии» и «Контакты».

Типографику заголовка для каждого раздела дополнили персонажами из проектов Friday’s Games.

На этом этапе мы досконально продумали логику взаимодействия с пользователями, структуру подачи информации, проработали интерактивные элементы. Все — в постоянном партнерстве с командой заказчика.

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

Особенность работы на проекте была в том, что паттерны взаимодействия и навигации в игровых интерфейсах отличаются от типичных для веб-интерфейсов. Заказчики и целевая аудитория сайта привыкли, что элементы ведут себя определенным образом. При проектировании навигации по сайту важно было понять и учесть их ожидания.

Нам повезло: вся команда Friday’s Games была вовлечена в тестирование интерактивного интерфейса. Сотрудники студии гейм-разработки проверяли удобство сайта, обсуждали с коллегами, после чего суммировали повторяющиеся замечания и передавали нам.

В итоге получился сайт, разработанный с учетом особенности аудитории — специалистов гейм-разработки, хоть это и увеличило сроки согласования.

На внутренних страницах мы развили идею с крупной типографикой и игровыми персонажами в заголовках.

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

Страница проектов презентует все игры, выпущенные Friday’s Games за 13 лет работы студии. Проекты расположены на таймлайне — временной шкале: от новейших до созданных несколько лет назад. По клику на название игры пользователь попадает на подробное описание проектов.

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

Разработку этих страниц начали со сбора контента: структура и дизайн этих страниц зависят от текста и изображений, которые необходимо разместить. Для этого составили детальный опросник, чтобы понять, какая информация об играх есть: арты, история и наброски поэтапного создания игровых миров и персонажей.

Изначально мы хотели для всех большинства проектов сделать уникальные страницы. Однако оказалось, что собирать достаточный контент для некоторых проектов долго и затратно. Тогда заказчики попросили сделать все страницы шаблонными. В итоге мы нашли баланс и договорились сделать уникальные страницы для топовых проектов студии, а для остальных разработать шаблон.

Шаблон для типовых проектов спроектировали с учетом контента, который будет легко генерировать самостоятельно: описание проекта, арты и скриншоты игрового интерфейса, награды, ссылки на App Store и Google Play.

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

Для начала спроектировали несколько вариантов страниц с разной компоновкой информации. Такое визуальное представление помогло команде Friday’s Games сориентироваться, что они хотят рассказать о своих самых любимых проектах и какой контент передадут нам для разработки дизайна.

Сайт разработан по технологии SPA (Single Page Application), когда контент сразу единожды загружается в браузер пользователя. Это решение позволяет ускорить работу сайта по сравнению с привычными технологиями.

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

Загрузка контента при переходе между разделами сайта производится под анимированным прелоадером-пламенем.

На каждом экране главной страницы мы реализовали анимацию заголовков.

По задумке наших дизайнеров буквы на экране не просто появляются, но еще и параллельно отрисовываются, как будто их дописывают в последний момент.

Моушн-дизайнер сделал анимацию двух половин заголовков, и уже анимированные изображения передали разработчикам. Теперь вместо большого количества элементов мы анимировали всего три: начало и конец слова, плюс персонаж между ними.

Анимацию заголовков и всех интерактивных элементов адаптировали под разные версии браузеров. Сайт определяет версию браузера пользователя при загрузке и в зависимости от этого включает подходящий алгоритм запуска.

Корпоративный сайт должен быть легко наполняем. Поэтому мы интегрировали систему управления контента, с помощью которой сотрудники Friday’s Games смогут легко самостоятельно добавлять новые вакансии, создавать страницы для новых проектов, дополнять информацию в разделе «О компании».

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

В результате получился сайт, который демонстрирует масштабность проектов студии и преимущества работы в их команде.

Такой сайт требует большого внимания к деталям и опытную команду не только дизайнеров, но и frontend-разработчиков, которые смогут воплотить все задумки: грамотно сверстают, настроят анимацию элементов, выверят все до пикселя.

Если вам нужен сайт, в котором важна имиджевая составляющая дизайна, то при выборе подрядчика обратите внимание на такие моменты:

#верстка #проектирование