WebValley Studio

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

Между игровым и реальным миром огромная разница. Так же как и между сайтом для разработчиков игр и сайтом среднестатистической компании. Обычный, заурядный веб-сайт просто не зайдет геймерам и участникам игровой индустрии. Раскрываем секреты, каким должен быть сайт геймдева, чтобы пользователь всегда возвращался в игровые миры.

Целевая аудитория сайта производителя игр

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

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

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

Какой тип сайта нужен разработчику игр

При выборе типа сайта нужно исходить из задач: для чего он создаётся? Знакомство с game‑студией? Промоушн новой игры? Или публикация обзоров и новостей? От этого будет зависеть, какой сайт выбрать.

Корпоративный сайт разработчика игр

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

Пример многостраничного корпоративного сайта игровой студии REMEDY. Навигация по разделам аккуратно разведена в меню: О студии, Игры, Вакансии, Магазин, Комьюнити, Инвесторам.

Лендинг под конкретную игру

Одностраничный сайт для презентации или анонса игры.
разработать сайт игровой студии

Пример лендинга компьютерной игры DIABLO IV от студии Blizzard. Сюжет, знакомство с персонажами, игровые режимы — всё, чтобы заинтересовать геймера и заставить его считать дни до даты выхода.

Игровой портал

Информационный сайт с обзорами игр, анонсами, новостями. Единственный тип игрового сайта, который не требует мощного упора на визуал. Во главу угла поставлен контент и юзабилити.
разработать сайт компании по разработке игр

Пример сайта игрового портала VG Times. Простой минималистичный дизайн. Удобная навигация: Новости, Даты выхода игр, Гайды, Информация о скидках и бесплатных тест-драйвах и т. д. Красочные превью статей.

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

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

Главная

Цепляющий дизайн игрового веб-сайта — это часть маркетинговой стратегии гейм-разработчика. Первое впечатление об игре формируется через сайт. А первое впечатление о сайте — по его главной странице.

Сайт геймдева должен быть визуально насыщенным. С первых секунд пользователь должен погрузиться в особую атмосферу, которую творит разработчик игр.
Главная страница сайта студии CD Project Red. С первых секунд внимание пользователя захватывается и удерживается на одном дыхании. Благодаря динамическому фону, показаны фрагменты геймплея из лучших игр студии, творческий процесс разработчиков, гейм-дизайнеров, сценаристов, публичные выступления и презентации, жизнь компании. Создаётся атмосфера технологий и творчества.
В большей степени главная страница на игровом корпоративном сайте является разводящей. Она часто не содержит обособленных информационных блоков, как бывает на большинстве сайтов (Преимущества, Для кого, FAQ, Отзывы, блоки доверия и прочие), а несёт в себе навигационную функцию: обозначает основные разделы сайта и переводит пользователя на них.

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

Прекрасная реализация блока с информацией о компании на сайте российского разработчика игр ALTERNATIVA GAMES. Чистейший воздушный дизайн, интересные коллажи, ёмкий неперегруженный текст.

разработать сайт gamedev

Блок о компании на сайте игровой студии Bethesda. Небольшой текст, подкреплённый видео шоурилом.

Либо представить информацию о компании в цифрах:
разработать сайт gamedev разработчика

Блок о компании на главной странице студии Activision Blizzard Media. Призывы и слоганы подкрепляются цифрами.

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

Блок с играми студии Saber Interactive на главной странице сайта.

Либо разместите здесь самые ожидаемые новинки:
разработать сайт gamedev компании

Будущие новинки на главной разработчика игр Blizzard.

Пригласите потенциальных соискателей перейти на страницу Вакансий. Это можно реализовать, разместив несколько актуальных предложений:
разработать сайт геймдева

Аккуратный блок Карьера, выполненный в эстетике минимализма, на сайте game-разработчика Bethesda. С точки зрения дизайна, для навигационного блока здесь многовато вакансий, можно было оставить только первые 4 и не загромождать главную страницу. Но, вероятно, у компании серьёзная необходимость в этих специалистах, если все эти вакансии вынесены на главную.

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

Призыв стать частью команды на главной странице игровой студии HeroCraft.

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

Важно: убедитесь, что копирайтер погружен в тему и понимает геймерский сленг. Говорить с пользователем нужно на его языке. Это формирует доверие и лояльность, помогает налаживать коммуникацию. «Пропатчили аддон и пификсили баги» будет звучать куда приятнее уху целевой аудитории, чем «Внесли изменения в файлы игры в части дополнения и исправили возникающие ошибки». Конечно, доходить до крайностей не стоит, чтобы текст не приходилось читать со словарём, но художественный стиль изложения из серии «Это лишь вершина айсберга её достоинств» — на игровом сайте просто неуместны.

О компании

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

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

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

Пример отличной страницы О компании на сайте разработчика игр Blizzard: видна творческая составляющая команды, так как страница оформлена в стиле игр студии, чётко донесён масштаб компании, её цели, ценности, которые разделяют сотрудники (при наведении на карточки появляется подробная информация), ощущается командный дух. Передана забота о сотрудниках и признание их ценности для компании. Очень мощно выглядит блок с наградами за стаж, когда отработав 5 лет в команде, получаешь меч, а 10 лет — щит и т. д. — для людей, увлечённых играми, такие ачивки — дополнительный стимул. Это всё отражает сильную корпоративную культуру.

разработать сайт game дизайнера

Аккуратная лаконичная страница О компании на сайте game-студии Wargaming. Чёткое позиционирование компании, как разработчика легендарных онлайн игр, способных сделать человека счастливым. Есть достижения команды, информация о сотрудниках, ценности. Хорошо передана атмосфера в коллективе и корпоративная культура.

Интересное решение с представлением информации о компании на сайте студии разработки игр Alternativa Games. Анимированный блок привлекает внимание, последовательно выдаёт информацию. В окошке, в форме логотипа компании, сменяются фотографии. Информация подана ёмко, понятно, компактно, залипательно.
Готовы создать сайт прямо сейчас. А вы?

Выпущенные игры

Портфолио — это сердце сайта разработчика игр. Это самый важный раздел, от которого зависит впечатления пользователей и успех сайта. Мы говорили, что у сайта геймдев студии 3 ЦА: геймеры, инвесторы, потенциальные сотрудники. И раздел портфолио одинаково важен для каждого сегмента аудитории. Это ваш шанс, продемонстрировать на что вы способны. Это поможет составить представление о работах студии, оценить стилистику и жанры, показать возможности дизайна и разработки, уровень скиллов команды, масштабность студии в целом и каждого проекта в отдельности.

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

Если игр не много, имеет смысл их представить максимально красочно, крупными блоками:
разработать сайт игровой индустрии

Портфолио игровой студии CD Project Red. Игры делятся на несколько серий, каждой из которых посвящён отдельный блок на всю ширину страницы.

Портфолио на сайте студии Bethesda, разработчика легендарных серий игр The Elder Scrolls и Fallout, выполненное в формате галереи из полноэкранных изображений.
Портфолио невероятной студии FromSoftware, подарившей миру шедевры серии Dark Souls, Demon’s Souls, BloodBorne, Sekiro и многие другие. Для студии, оставившей серьёзный след как в игровой индустрии, так и в сердцах геймеров, при оформлении портфолио был выбран вариант с таймлайном: игры расположены в обратном хронологическом порядке по годам выхода. Такой подход, с одной стороны, позволяет показать, что студия много лет в игровой индустрии, с другой — наглядно продемонстрировать, как рос уровень разработчиков, как сменялись технологии, как эволюционировала студия и игровой мир вместе с ней.
Если же в портфолио разработчика игр много проектов, то стоит задуматься о фильтрах и сортировке, чтобы упростить навигацию для пользователя:
создать сайт геймдев компании

Портфолио игр на сайте студии Blizzard рассортировано по игровым платформам: игры для PC, консолей, мобильных устройств.

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

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

Разместите трейлеры и тизеры к игре:
создать сайт game дизайнера

Трейлеры к игре Demon’s Souls от FromSoftware на одноименном лендинге.

Добавьте кадры с геймплеем и игровой механикой:
Кадры геймплея из игры God of War Ragnarök от разработчика Sony Interactive Entertainment и Santa Monica Studio.
Кратко расскажите сюжет, избегайте спойлеров:
создать сайт игровой индустрии

Буквально в двух словах рассказ о сюжете игры FAR CRY 5 от Ubisoft.

сделать сайт игр

Подробное описание сюжета на лендинге компьютерной игры The Last of Us Part II от студии Naughty Dog и Sony Interactive Entertainment.

Познакомьте пользователя с героями игры и персонажами:
Список героев с описанием их умений, демонстрацией внешнего вида и геймплея на сайте компьютерной игры DIABLO IV от Blizzard.
Расскажите, в чём фишка игры, какие отличительные особенности. Можно сражаться верхом на лошади? Можно приручать животных, и они будут сражаться на вашей стороне? В игровом мире можно взаимодействовать абсолютно со всеми предметами? Удивите пользователей, им будет интересно об этом узнать:
сделать сайт gamedev студии

Особенности игры Assassin’s Creed Mirage от Ubisoft. Отличный лендинг, выдержанный в стилистике игры, подчёркивает возвращение к истокам — первой игре Assassin’s Creed, действие которой происходило также в Багдаде. Лендинг апеллирует к ностальгическим чувствам игроков, но в то же время обещает новые игровые механики, более совершенный игровой мир, живо реагирующий на каждое наше движение, максимальный арсенал оружия, улучшенный паркур. После такого, всё, что хочется сделать, это начать отсчитывать дни до даты выхода.

сделать сайт gamedev компании

Особенности игры EVIL DEAD от разработчика Saber Interactive. Всего один блок, и мы уже знаем, что в игре есть сетевой режим, что играть можно как за героев, так и за злодеев, что снова с нами будет красавчик Эш, с его чёрным юмором и легендарными фразочками про палку-стрелялку и Клато‑Пилато‑Ни…кхм-кхм-кхм…

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

Сравнительные характеристики изданий игры God of War Ragnarök от студии Sony Interactive Entertainment и Santa Monica Studio.

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

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

Блок новостей на лендинге игры DIABLO IV от Blizzard. Игра ещё не вышла, и разработчики выкладывают отчёты, чтобы оповестить игроков, на каком этапе находится разработка.

сделать сайт геймдев компании

Блок новостей на лендинге игры FAR CRY 6 от Ubisoft, оформленный в стилистике игры, в виде бейсбольных карточек, приклеенных к деревянной доске на бумажный скотч. Чтобы поддерживать интерес игроков, студия публикует новости о распродажах, промокодах, выходах дополнений.

Вакансии

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

Классная страница с вакансиями на сайте разработчика игр Blizzard. Оформление и копирайтинг выполнены так, как будто мы начинаем новую игру: «Герои, выбирайте себе роли! Аналитик, Гейм‑дизайнер, Разработчик и т. д.»

сделать сайт дизайнера игр

Страница вакансий на сайте игровой студии OWLCAT, оформленная аватарками, отрисованными гейм‑дизайнерами компании.

Инвесторам

На сегодня самая дорогая игра в мире — Cyberpunk 2077. Её разработка обошлась в 314 млн долларов. Конечно, компьютерные игры имеют разный масштаб, степень проработки и детализации, сложность геймплея и реалистичность физики. Поэтому, далеко не все игры требуют многомиллионных бюджетов. Но, как правило, разработка компьютерной игры — это дорого. Студиям не всегда хватает собственных средств и ресурсов для реализации проекта, поэтому к разработке привлекаются партнёрские студии, и тогда в заставке к игре мы видим логотипы нескольких студий-разработчиков, либо привлекаются сторонние инвесторы, готовые профинансировать этот проект.

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

Страница для инвесторов на сайте разработчика игр Ubisoft. Страница полностью состоит из документов для скачивания. Есть вся отчётность для аналитики и построения инвестиционной финмодели.

Магазин и мерч

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

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

Для таких приятностей предусмотрите на сайте интернет-магазин. Пользователь будет уверен в подлинности продукции:
сделать сайт game дизайнера

Коллекционное издание трилогии Dark Souls. Эксклюзивно на сайте разработчика FromSoftware.

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

Официальный мерч по игре Ведьмак 3: Дикая Охота в магазине на сайте студии CD Project Red.

Контакты

На сайте разработчика игр не всегда уместны прямые контакты. Есть упоротые пользователи, которым очень хочется пообщаться. Они просто сломают рабочий процесс студии постоянными звонками, письмами, сообщениями. Вы удивитесь, как много людей лучше вас знают, как надо выпускать ваши игры.
Интересный факт: на сайте Ubisoft есть документ под названием «Политика Ubisoft в отношении непрошенных идей». Суть документа в том, что Ubisoft ценит энтузиазм, время и энергию, которые пользователи тратят на их игры. Но политика компании не позволяет принимать или рассматривать какие-либо непрошенные идеи, предложения, комментарии или материалы, чтобы избежать потенциальных недоразумений или споров, если продукты, услуги или функции, разработанные или опубликованные Ubisoft, могут показаться похожими или идентичными идеям, которые могли прийти вам в голову. Если, несмотря на просьбу Ubisoft, вы всё равно присылаете свои идеи, то соглашаетесь с тем, что материалы считаются неконфиденциальными и не являющимися вашей собственностью.
На первый взгляд всё выглядит так, как будто студия использует защитительную оговорку, чтобы после выпуска очередной игры на горизонте не появлялся герой, который бы утверждал, что компания наглым образом использовала его идеи, которыми он поделился 2 года назад, написав письмо. Но задача этого правила более глобальна — вообще избавиться от таких доброхотов, которым не терпится поделиться своим бесценным мнением. Поэтому, для более спокойной и контролируемой работы компании, предусмотрите в контактах формы обратной связи. В идеале, разные формы под разные запросы: одна — для соискателей, вторая — для инвесторов, третья — для СМИ и издательств, четвёртая — для поддержки пользователей и сбора предложений.
разработка сайта игр

Отдельные формы для разных категорий пользователей на сайте разработчика игр Blizzard.

Блог

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

  • Подогреваете и удерживаете интерес пользователей;
  • Расширяете семантическое ядро сайта, благодаря чему охватываете больше запросов, по которым можно найти вас и ваши игры;
  • Становитесь официальным источником, откуда будут черпать информацию СМИ, игровые порталы, стримеры и летсплейщики, делающие обзоры на игры. В своих материалах, они будут размещать ссылку на ваш сайт, как на источник, что мощно скажется на ссылочном продвижении и добавит вашему сайту авторитетности в глазах поисковых систем.
разработка сайта игровой студии

Пример классического оформления блога в виде плитки изображений с заголовками и ссылками на статью на сайте разработчика игр Bethesda.

разработка сайта компании по разработке игр

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

Поддержка

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

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

В этом разделе должна быть возможность оставления заявок, а также статьи и видео с разъяснениями по часто задаваемым вопросам. Ведь если баг возник у одного пользователя, вероятно, он возникнет и у других. Чтобы не решать проблему один на один с каждым пользователем, стоит сразу публиковать решение, которым смогут воспользоваться и другие игроки:
разработка сайта разработчика игр

Страница поддержки на сайте game-разработчика Bethesda. Здесь можно задать вопрос по конкретной игре, а также найти ответы на свои вопросы в статьях.

Сообщество

В игровой индустрии комьюнити-менеджмент — один из самых мощных способов продвижения. Формируйте сообщества из лояльных игроков, пускай они обмениваются опытом и делятся интересными находками не на сторонних форумах, а на ваших площадках. Это позволит вам удерживать и прогревать аудиторию, повышать реиграбельность игр, совершать допродажи, оперативно узнавать о проблемах, делать эти процессы более управляемыми.
разработка сайта gamedev

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

Мультиязычность сайтов разработчиков игр

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

Частый недочёт на сайтах разработчиков игр — перевод только главной страницы, без локализации внутренних:
разработка сайта gamedev разработчика

Главная страница сайта геймдев-студии Ubisoft полностью на русском языке. Однако стоит копнуть чуть глубже, и окажется, что найти ещё страницы в русской локализации на сайте практически невозможно. Это ухудшает юзабилити.

Крутые фишки дизайна сайта геймдева, которые заставят пользователя возвращаться в игровые миры

Геймеры — особенно искушённая аудитория, которая любит, чтобы её удивляли, восхищали, дарили впечатления. Им нравится элемент неожиданности, непредсказуемости, экшн. Поэтому дизайн игрового сайта должен отвечать этим требованиям. Обилие сложной анимации, моушн‑дизайн, lottie, 3D-сцены. Но только на этом выехать не получится. Если всё будет летать и мелькать, как в калейдоскопе, это перегрузит мозг пользователя и рассеет внимание. Задача веб-дизайнера, наоборот, это внимание фокусировать и удерживать. Мы покажем мощные тренды, которые сделают дизайн сайта разработчика игр впечатляющим и удобным.

Следование стилистике оригинальной игры

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

Шикарный лендинг игры Assassin’s Creed Valhalla от студии Ubisoft. Великолепный дизайн, повторяющий элементы и паттерны игрового мира: северное сияние, варяжская вязь, древние руны, персонажи и кадры из игры, цветовые решения.

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

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

Обратите внимание, что данный приём хорошо работает, если у компании есть выдержанная стилистика. Если студия работает в разных жанрах, стилях, направлениях, отрисовывает игровые миры в милом мультяшном стиле, в гротескном 3D, в гиперреализме, так, что игру не отличить от кино, в пиксельном ретро 2D формате — это всё тоже можно использовать на сайте разработчика, главное — не смешивать. Иначе сайт будет узнаваемым, сможет продемонстрировать ваше разностороннее творчество, но веб-дизайн будет просто выглядеть неаккуратно, как будто картинки из разных наборов:
разработка сайта геймдева

Дизайн сайта игровой студии Kuuasema: мультяшный Дональд Дак со своей смешной щербатой пушкой из игры The Duckforce Rises никак не вяжется с реалистичным гонщиком из Dirt Bike Unchained. Не создаётся единая композиция, картинки выглядят неуместно.

разработка сайта геймдев студии

Парочка из крышелётной игры It Takes Two, выполненной в гротескном 3D не сочетается с трансгуманистическим персонажем из Apex Legends, за счёт чего сайт студии Electronic Arts выглядит странно и неаккуратно.

Футуризм и технологичность

Для игровой индустрии отлично заходит стиль веб-дизайна футуризм. Он передаёт впечатление технологий, творчества, фантастики — всех тех вещей, с которыми ассоциируются компьютерные игры.
Чистый премиальный дизайн сайта геймдев студии ALTERNATIVA GAMES в футуристичном стиле. Обратите внимание на профессиональную работу с цветом и прозрачностью, благодаря которым создаётся эффект проектора, направленного на чёрно-белые снимки. Большое количество воздуха и минималистичная цветовая гамма делают дизайн аккуратным и дорогим, вызывают ассоциации с профессионализмом и скрупулёзным подходом компании.

Технологичные шрифты

Спорный момент — использовать ли на игровом сайте технологичные шрифты. Ответ — однозначно, да! Другое дело, что нужно чётко понимать, что относится к технологичным шрифтам, поскольку в этом вопросе всегда много мифов и заблуждений. Например, агрегатор лицензионных шрифтов Font Space предлагает нам вот такую подборку techno-шрифтов:
разработка сайта игровой индустрии

Массивные грубые акцидентные шрифты с агрессивными штрихами. Идеально для банки с энергетиком, но никак не для игрового сайта.

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

Обложка игры Resident Evil Village от разработчика Capcom. Тяжёлый брутальный шрифт для тяжёлой брутальной игры.

Проскроллим лендинг далее и посмотрим, каким шрифтом оформлена типографика:
создание сайта игровой студии

Текст на сайте оформлен эстетичным тонким шрифтом Cinzel. Аккуратные изящные засечки добавляют атмосферу таинственности, ассоциируются с хорошей фантазией авторов игры.

Вот тут кроется важный инсайт: современные технологичные шрифты, особенно, что касается высоких технологий — это довольно тонкие хорошо читаемые гарнитуры. Загляните на официальный сайт Apple, почувствуйте технологичность и интеллектуальность, которую передаёт каждая буква. И это настроение невозможно создать массивностью и космической формой, которую нам предлагают различные подборки, по типу продемонстрированной выше. Это очень примитивно. Это грубая ассоциация первого уровня.
Технологичности добиваются за счёт необычных пропорций шрифта, например, более вытянутых в длину букв, а также за счёт смягчения жёстких форм: так называемый эффект soft square form — «мягкий квадрат».
создание сайта компании по разработке игр

Пункты меню и наборный текст на сайте игровой студии FromSoftware выполнены тонким технологичным шрифтом Noto Sans JP. Выглядит строго, премиально, соответствует нише, передаёт правильные ассоциации.

создание сайта разработчика игр

Технологичный шрифт TT Supermolot Neue на сайте игры Warhammer Rogue Trader от OWLCAT. Очертания гарнитуры разработаны в технике мягкий квадрат: несмотря на чётко прослеживаемую геометричность, шрифт не выглядит агрессивно, за счёт мягко скруглённых углов.

Ещё один важный момент, относительно псевдотехнологичных шрифтов — читаемость, точнее её отсутствие:
Шрифт Anurati на сайте разработчика игр Strider Joomla By Codelayer. Красиво, футуристично, нечитаемо.
Исключение составляют кастомные художественные шрифты в стиле игры. Их назначение — не в лёгком считывании и передаче смыслов, а в создании особой атмосферы, погружении в игровой мир:
создание сайта gamedev студии

Лендинг игры God of War Ragnarök от студии Sony Interactive Entertainment и Santa Monica Studio. Использован кастомный шрифт, стилизованный под древние варяжские руны. Конечно, применять такой шрифт на всём сайте было бы избыточно, но для выделения некоторых важных мыслей или заголовков — вполне обоснованное решение.

Крупные заголовки

Современный тренд веб-дизайна, который великолепно подходит для сайтов игровой индустрии. Как правило, в этой нише не много текстового контента. Но смыслы, которые передаёт текст — чрезвычайно важны. Радикально крупная типографика позволяет буквально впечатывать смыслы в мозг пользователя, а также даёт возможность использовать заголовки как самостоятельные элементы дизайна.
создание сайта gamedev компании

Крупная типографика в заголовках на сайте игры God of War Ragnarök от студии Sony Interactive Entertainment и Santa Monica Studio. Заголовки во много раз крупнее наборного текста. Чётко выстроенная визуальная иерархия, наиболее важные мысли отпечатываются в сознании.

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

Радикально крупная типографика в заголовках сайта мобильного разработчика игр SAGE. Сайт выполнен в стиле минимализм. При таком большом количестве воздуха в дизайне крупные заголовки выглядят особенно выигрышно.

создание сайта геймдев разработчика

Крупная типографика с ярко выраженной визуальной иерархией на сайте Activision Blizzard Media.

Сайт инди гейм-студии Bad Turtle. Крупная типографика с эффектом маски. Сквозь «выбитые» буквы просматриваются фоны из игр компании.
Полноэкранные заголовки на сайте российского разработчика игр Friday’s. Крупная типографика задаёт тон: сразу чувствуется размах.

Пасхалки на сайте разработчика игр

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

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

Страница О компании разработчика игр Ubisoft. Первая студия Ubisoft открылась в Париже, именно этот пейзаж мы и видим на странице. И это могла быть простая сентиментальная картинка, если бы не одно но: в небе, высоко над Эйфелевой башней, кружат орлы. Охрененная отсылка к легендарной серии Assassin’s Creed.

дизайн сайта игровой студии

Ещё одна милая Пасхалка на сайте Ubisoft в разделе вакансий. Вместо стандартного «Если хотите у нас работать — заполните форму», мы видим фразу, с которой начинается большинство компьютерных игр «Каким будет твоё следующее приключение?» и предлагается выбрать миссию: программист, художник‑аниматор, гейм‑дизайнер и т. д.

Обсудить проект

Видеообложки и динамические фоны

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

И если в случае с игрой есть определённые ограничения и договорённости, то в случае с веб‑дизайном, мы можем дать пользователю то, что ему нужно. Видеообложки и динамические фоны погрузят в атмосферу игры с первых секунд на сайте.
Игра Метро от студии 4A Games. Мы только зашли на сайт — и уже в игре. Надеваем противогаз, пробираемся через разрушенные города, боремся с мутантами. 100% погружение, благодаря видеообложке.
Атмосферная видеообложка с кадрами из игры Alan Wake 2 на главной странице game-студии Remedy. Короткое, но очень залипательное видео: выбран момент, когда Алан оборачивается на камеру и поднимает лицо из темноты, чтобы мы могли рассмотреть его при свете фонаря. Пользователь до последнего ждёт этого момента.
Но если вы решили использовать этот приём, позаботьтесь о том, чтобы не загромождать видеофон, чтобы пользователь видел, что там происходит.
Крайне неудачный пример использования видеообложки на сайте игры BIOHAZARD Resident Evil 2 от Capcom. Обратите внимание, сколько всего навалено на экран: заголовки, подзаголовки, плашки с другими играми, переключатели — за всеми этими объектами уже и не разглядеть, что там происходит, а значит, смысл видеофона теряется. Просто какая-то мельтешня. Та же ошибка повторяется ещё через пару блоков, только там более крупные плашки, поэтому ситуация выглядит ещё хуже.

Анимированные эффекты изображений

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

В этих случаях отлично зайдёт техника частичной анимации изображений: картинка остаётся статичной, но отдельные элементы — подвижны. Горит огонь, идёт снег, трескается лёд и т. д.:
Пример частичной анимации изображений на сайте игры God of War Ragnarök от студии Sony Interactive Entertainment и Santa Monica Studio. Картинка статична, но у героев идёт пар изо рта на морозе, колышется плащ на ветру, время от времени на заднем плане ударяет молния. Такой приём помогает объединить преимущества обоих решений: отсутствие резкой смены фона, которое даёт статичное изображение, и эффект глубины, динамики, реализма, погружения, которые может дать видео.
Обложка с анимированным изображением на сайте игры Demon’s Souls от FromSoftware. Анимирован только горящий огонь и плывущие по небу облака, а картинка сразу выглядит живой.

Полноэкранные изображения

Для аудитории сайта игровой индустрии характерно графодроч@#?&ство. Поэтому использование впечатляющей графики на игровом сайте — мастхев. Но не ограничивайтесь крошечными картинками. Полноэкранные изображения работают лучше. Давайте посмотрим на примере франшизы Assassin’s Creed:
дизайн сайта компании по разработке игр

Портфолио проектов game-студии Ubisoft. Кейс по игре Assassin’s Creed ODYSSEY оформлен на шаблоне, как и все более ранние игры серии. Небольше картинки и рядом текст на плашке, слегка внахлёст изображению.

дизайн сайта разработчика игр

Новое оформление портфолио Ubisoft — лендинг с индивидуальным дизайном и полноэкранными изображениями для игры Assassin’s Creed Вальгалла. Обратите внимание, насколько эффектнее смотрятся в дизайне полноразмерные изображения в отличие от небольших плашек.

Анимация по скроллу

Сайт разработчика игр должен быть эффектным. В этом помогает анимация. Чтобы вовлечь пользователя, погрузить его в контент, побудить к взаимодействию с сайтом, используйте анимацию по скроллу. Она не даст заскучать и будет подогревать пользователя долистать страницу до конца. При этом эффекты, запущенные по скроллу, могут быть любыми:
Великолепная реализация анимации по скроллу в портфолио студии Sony Interactive Entertainment и Santa Monica Studio, компьютерная игра God of War Ragnarök. Обратите внимание как эффектно раскрывается нам сюжет игры: по мере скролла, пальчики пробегают по корешкам древних книг, стоящих на полке, и, когда отыскивают сагу о Кратосе, книга раскрывается, и мы видим текст и иллюстрации, рассказывающие нам красивую легенду. В такие моменты хочется скроллить без конца, лишь бы узнать, что будет дальше.
Шикарная реализация анимации по скроллу в портфолио студии Ubisoft, сайт компьютерной игры Far Cry 6. Изображение сменяется по мере скролла на такую же картинку, но слегка состаренную и добавляющую гнетущей, отчаянной атмосферы. Это позволяет проникнуть в самую суть игры, понять, что вещи часто не те, чем кажутся, что если посмотреть на ситуацию под другим углом, если снять розовые очки, то реальность окажется очень жестокой.
В примерах — одна и та же анимация по скроллу, но при помощи неё реализованы совершенно разные эффекты, которые вызывают разные ощущения у пользователя. Но какого эффекта вы бы ни хотели достичь, анимация по скроллу сделает их максимально вовлекающими и залипательными.

Визуальное оформление при помощи артов

Гейм-арт — это изобразительное искусство, вдохновлённое компьютерными играми. Арты бывают фанатскими, отрисованными художниками после выхода игры, а бывают официальными: каждый персонаж, локация, моб, прежде чем обретёт компьютерную жизнь, отрисовывается на бумаге. Это глубокая проработка образа, десятки гипотез и вариантов. Пользователи, как правило, увидят только один окончательно утверждённый вариант. Но чтобы увековечить работу художника и выказать уважение его работе, создаются арт-буки:
дизайн сайта gamedev

Арт-бук, который по игре Ведьмак 3: Дикая Охота от CD Project Red, который можно было получить, только купив коллекционное издание игры. Слева на странице — привычный всем игровой образ Цири, тот самый окончательный вариант, который был утверждён разработчиками. Но Цирилла могла выглядеть совсем иначе. Справа на странице — арты с альтернативными образами.

Но артам можно найти и другое практическое применение: использовать их в дизайне сайта. Такой приём добавит сайту игровой студии оригинальности, креативности, подчеркнёт глубокую творческую составляющую компании. Получится необычный проект в редком рисованном стиле веб-дизайна:
Великолепный сайт игровой студии ArenaNet, где каждая страница оформлена анимированными артами по выпущенным компанией играм GUILD WARS и GUILD WARS 2. Очень эффектное и запоминающееся решение.

Дорисовка объектов на фото

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

Пример дорисовки объектов на фото на сайте студии геймдева ArenaNet. Концептуальный эффект дополнительно усиливается тем, что фотография чёрно-белая, а дорисованный объект — цветной и яркий. Это передаёт мысль о том, что реальный мир — это серые будни, а игровые миры — красочные, волшебные, прекрасные.

RGB-подсветка на сайте геймдева

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

Механическая клавиатура с разноцветной подсветкой — мечта любого геймера.

Геймерам вид такой подсветки привычен и приятен. Так почему бы не использовать подобное свечение в дизайне сайта разработчика игр?
Сайт Ubisoft Connect, выполненный в технике RGB-подсветки. Обратите внимание на шикарную профессиональную работу с цветом: дизайнеру удалось добиться тёплого мягкого свечения. Цвета яркие, но не кричащие, не раздражающие. Подобно динамической RGB-подсветке цвета последовательно сменяют друг друга при переходе с блока на блок. Это выглядит естественно, эстетично, приятно глазу. Нет ощущения цыганской свадьбы, даже не смотря на несколько акцентных цветов на странице.

Подсказки скролла, наведения, клика

Отношение к подсказкам в интерфейсе — неоднозначное. Вообще они должны быть, чтобы упростить взаимодействие пользователя с интерфейсом. Но дело в том, что интерфейс — как шутка. Если вы пошутили, а никто не понял, и шутку пришлось пояснять, значит не такая-то она и хорошая. Так и интерфейс. Хороший интерфейс должен быть интуитивно понятным, чтобы лишний раз не пришлось ничего пояснять.

Но сайт разработчика игр — это другое. Тут без подсказок не обойтись вообще. Это связано с:

  • Особенностями целевой аудитории: в играх действует совершенно другая механика взаимодействия с интерфейсом, не похожая на стандартные веб-паттерны. Как часто в компьютерных играх приходится что-то скроллить? Крайне редко. А если и приходится, то это действие нужно чтобы приблизить или отдалить карту, либо быстро сменить экипированное оружие. Но никогда, чтобы пролистать страницу. То есть далеко не всегда скролл — это очевидное действие для геймера;
  • Сложностью визуальных решений на сайтах разработчиков игр: необычная анимация, нестандартные сценарии взаимодействия и т. д.
изготовление сайта разработчика игр

Обложка главной страницы сайта разработчика игр ALTERNATIVA GAMES. Обложка полноэкранная, представляет собой маску с выбитыми буквами, сквозь которые просматриваются изображения. При любом малейшем движении мыши анимация сменяется и фоновая картинка внутри букв становится другой. Первая мысль — что перед нами какая-то заставка и надо ждать. Скролл при такой интерактивной обложке — неочевиден, поэтому добавлена подсказка: «Покрутите колёсико мыши».

изготовление сайта gamedev

Главная страница сайта студии Rovio Entertainment Corporation, создателей несравненных Angry Birds. Скролл не работает вообще, сайт выглядит, как одноэкранник. Чтобы получить больше информации, сайт нужно листать вбок, о чём нам подсказывает стрелочка и пояснение «Explore».

изготовление сайта gamedev разработчика

Атмосферная обложка на лендинге компьютерной игры The Last of Us Part II от студии Naughty Dog и Sony Interactive Entertainment не была бы настолько атмосферной, если бы не оригинальный саундтрек под гитару. Подсказка о том, что нужно включить звук, позволила пользователям насладиться задумкой авторов в полной мере.

Мокапы для разработчиков игр на мобильных устройствах

Игры создаются не только для компьютера, есть студии, которые занимаются разработкой игр только на мобильных устройствах на Android и iOs. Отличительной фишкой таких студий может стать использование мокапов телефонов в дизайне сайта:
изготовление сайта gamedev студии

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

Заказать разработку сайта для игровой индустрии в WebValley Studio

WebValley Studio — это команда разработчиков, среди которых есть увлечённые геймеры, экспертные не только в трендах веб-дизайна, но и знающие все новинки игровой индустрии. Мы понимаем потаённые желания вашей целевой аудитории, поскольку от части сами ей являемся. Сможем учесть особенности игровой студии, чтобы создать сайт в вашей неповторимой стилистике.
Автор статьи
Вероника Юдина
Руководитель SEO
28.10.2022
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.