Когда к тебе приходит мастодонт геймдева и просит «просто обновить» сайт, сделав небольшие корректировки по структуре и слегка освежив дизайн — ты не можешь вот так просто взять и следовать брифу. Просто потому что это же Alawar — тот самый разработчик игр из махровых 2000-х, в которые рубились днями и ночами миллионы людей (да, тех, кто теперь носит строгие костюмы с галстуками или руководит большими бизнесами). Поэтому мы всё сделали не так, как просил заказчик, — а лучше, и не прогадали :)

Все видеоигры условно делятся на три группы:

1. Хардкорные — игры с высоким уровнем сложности, требующие навыков и терпения. Это могут быть сложные RPG и стратегии, платформеры или экшен-игры, где важна точность и реакция.
2. Мидкорные — игры с более доступным, но увлекательным геймплеем, рассчитанные на игроков, готовых уделять время освоению механик, но без чрезмерной сложности.
3. Казуальные — простые и интуитивно понятные игры, не требующие глубокого вовлечения. Сюда относятся match-3 игры, пасьянсы, тетрис и фермы.

Для каждого типа подходят свои платформы. Хардкорные и мидкорные игры чаще всего публикуются в Steam, на консолях и других цифровых площадках, казуальные в основном распространяются через Google Play, App Store и специализированные сторы типа Big Fish Games. Игры Alawar представлены сразу на нескольких площадках: большинство выпускается в Steam, часть на казуальных порталах, ещё часть портируется на мобильные. Выбор платформы зависит от целевой аудитории и жанра игры.

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

• рассказать о компании: показать её как опытного разработчика (девелопера) и как знаменитого издателя игр (или, как оно принято в гейминге — паблишера);
• двигать HR-бренд, чтобы привлекать в команду новых людей;
• отразить информацию о работе с партнёрами (в основном, это сторонние разработчики со своими гейм-проектами, которые хотят издавать игры с Alawar).

Старый сайт Alawar, по словам заказчика, в полной мере не отражал всю деятельность компании, поэтому у нового было сразу несколько задач:

И всё это — на английском языке, потому что сайт нацелен на международную аудиторию.

На этапе аналитики мы выяснили, что основное преимущество Alawar — его игры. Но не только они. Заказчик гордится репутацией и многолетним опытом компании: сотрудники знают все нюансы разработки и паблишинга и готовы делиться этим с партнерами и разработчиками. А это дорогого стоит на столь конкурентном рынке.

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

Но у Alawar здесь — большая экспертиза: ребята и тестируют игры, и с разработкой, продвижением и публикацией помогают. И в этом ещё одно большое преимущество компании перед другими паблишерами, которое важно было отразить на сайте.

Что в брифе, что в референсах заказчик просил интуитивный дизайн без каких-то особых изысков. Интерфейсы — отрисовать простыми и понятными, а основной акцент сделать — на кей-артах (обложках игр).

Для вау-эффекта на альтернативной версии с первого экрана пользователя встречает НЕ слайдер, на котором крупно — НЕ одна игра, а сразу несколько (а по скроллу — ещё, ещё и ещё несколько).

За счет этого мы создаем эффект узнаваемости «ого, это всё сделал Alawar?!», цепляя и тех, кто компанию знает давно и ностальгирует по классике (как мы), и тех, у кого хорошая насмотренность в игровой индустрии. Ну и конечно, кроме кей-артов с играми, с первых секунд пользователя встречает мощное позиционирование гейм-разработчика. В общем — убиваем всех зайцев разом :)

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

Важный для заказчика блок на главной — СТА (Call to Action — призыв к действию), призывающий предложить игру. С его помощью сторонний разработчик может рассказать о своем проекте и, если повезет, Alawar возьмет его под своё крыло, помогая с разработкой, тестированием и публикацией. Кстати, анимированный кот в этом блоке — это маскот из игры Necrosmith, которую тоже сделал Alawar.

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

Когда и если пользователь окажется на странице 404, его ждет идеально подобранная сцена из игры Beholder, где сначала глаза следят за тобой, потом появляется огонек от зажженной спички, а после — рубильник, который повергает во тьму.

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

Сложности переходов между экранами — это полбеды. Есть же еще адаптивная версия :) Обычно адаптацию под разные размеры экрана мы реализовывали по точкам излома, используя классическую 12-колоночную верстку. Такая верстка подразумевает, что при достижении точек излома (на определённой ширине экрана) блоки сайта перестраиваются.

Но на этом проекте такой подход работал плохо: результат адаптации под разные размеры не всегда был предсказуемым. Поэтому мы применили «верстку на REM’ах» — она подразумевает, что все фиксированные размеры на странице (а это величина шрифтов, отступов и прочее) задаются не в пикселях, а в единицах под названием rem.

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

На сборке — настоящий фуллхаус разработчика: фулстек, Laravel с удобнейшей админкой Orchid, параллельная верстка со сборкой и классические спринты.