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

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

О проекте

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

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

Проблема и задача

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

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

Дизайн-концепция

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

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

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

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

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

Итерация 1

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

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

Наши дизайнеры задались вопросами: «А что привлекает таких, как мы, на сайте работодателя? О чем мы бы хотели узнать, если бы искали работу в компании?»

Ответ: нам было бы интересно, над какими проектами работают сотрудники, а еще — подсмотреть за процессом.

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

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

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

Итерация 2

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

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

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

Финальная концепция

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

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

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

Проектирование и дизайн

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

Структура сайта и навигация

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

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

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

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

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

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

Алексей Нибо, арт-директор digital-агентства «Атвинта»

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

Внутренние страницы разделов

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

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

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

Страницы проектов

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

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

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

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

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

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

У Friday’s Games есть два флагманских проекта, для которых мы разработали отдельные страницы с уникальным дизайном: Gods and Glory, завоевавший мировое признание, и Farmscapes — новая игра, релиз которой назначен на 2020.

Один проект существует давно, другой — новый. Соответственно про Gods and Glory мы получили очень много контента, наша задача была — структурировать его. Farmscapes — это совсем другая история. Игра еще в разработке, некоторые арты менялись, например, внешний вид персонажа. Поэтому мы несколько раз актуализировали дизайн этой страницы с учетом изменений в игре.

Ирина Жукова, дизайнер digital-агентства «Атвинта»

Веб-разработка и технологии

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

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

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

Анимация типографики

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

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

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

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

Екатерина Мурая, менеджер проекта, digital-агентство «Атвинта»

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

Анимацию продумали на этапе дизайн-концепции

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

Управление контентом

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

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

Результат и рекомендации

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

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

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

  • Отдавайте предпочтение агентству или веб-студии, а не отдельным специалистам. Во-первых, командная работа позволяет придумывать более интересные и уникальные идеи. Во-вторых, в агентстве дизайнеры и разработчики уже сработались, а значит работа будет более слаженная, а загвоздок в процессе проекта будет меньше.
  • Посмотрите портфолио команды, чтобы понять, насколько ваши вкусы совпадают с их подходом к дизайну.
  • Заготовьте заранее контент в хорошем качестве: изображения, фотографии, текст. Ведь именно контент превращает дизайн сайта в инструмент бизнеса. И именно вокруг него строится структура сайта и каждой страницы. Кстати, еще одно преимущество студии или агентства — они помогут вам создать нужный контент.
  • Крутой дизайн — это не только про изображение, но и про удобство для пользователя. Поэтому обратите внимание, есть ли в команде компетенции по проектированию пользовательского взаимодействия.
0
33 комментария
Написать комментарий...
ivan ivanoff

симпотно

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо :)

Ответить
Развернуть ветку
Трапезников Михаил

Были правки после бизнес-линча от Артемия Лебедева?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Пару моментов поправим, да

Ответить
Развернуть ветку
Богдан Щербаков

Интересно что сказал великий Артемий, но найти не могу, скиньте пожалуйста.

Ответить
Развернуть ветку
Трапезников Михаил

https://vk.com/video-170587775_456242740?t=2h17m48s
Лови, нашёл запись в вк

Ответить
Развернуть ветку
Алексей из LOADING.express

Сайт загружается долго. Надо оптимизировать скорость загрузки!
Отчет здесь: https://loading.express/?test_id=5e844c3202b95b1a639624b8.
Проверка из России.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Не расстраивайтесь из-за минусов. Сайт и правда летает медленнее, чем гугл)

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

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

_______________
Кстати, если проверить VC, тесты скорости тоже выдадут низкий результат. Однако это не мешает ресурсу развиваться и привлекать десятки тысяч пользователей :)

https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=vc.ru  
https://loading.express/?test_id=5e84654502b95b1a639624e1 

Ответить
Развернуть ветку
Алексей из LOADING.express

Да-да, минусите. Но сайт сделан не оптимально по производительности.
Загрузка медленная.

Ответить
Развернуть ветку
Алексей из LOADING.express

А новый пейджспид показывает вот что
https://lh6.loading.express/reports/1585756149.report.html
10 сек до взаимодействия и 13 секунд до отрисовки крупного контента.
ну такоооое

Ответить
Развернуть ветку
Doktor BArbaris

Название агенства атасс, вспомнил песню, пою сейчас 

Ответить
Развернуть ветку
Атвинта digital agency
Автор

позитивно :)

Ответить
Развернуть ветку
Dmitriy Nikitin

Сайт клёвый, хоть местами и перегружен инфой, глаза разбегаются )

А вот текст статьи очень скучный. По сути в каждом абзаце одно и тоже, в конце только чуть больше интересно инфы.Замените в статьи заказчика (и макеты) с "игровой студии", на пример на "молочную ферму" и смысл тот же останется: делали сайт и сделали =) Как-то сам с такой проблемой сталкивался тоже )

P.S.  работы и описания у вас классные, молодцы! 

Ответить
Развернуть ветку
Атвинта digital agency
Автор

За комплимент сайту, работам и описаниям спасибо :) 

Про текст - передадим автору. А то че он? 

Ответить
Развернуть ветку
Игорь Петров

Выглядит классно!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Атвинта digital agency
Автор

На наш взгляд MODx - удобное кастомизированное и масштабируемое опенсонр-решение. А еще в нем наиболее понятная функциональность в панели управления контентом, что важно для владельцев сайта.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Анатолий Чупин

Почему не было отдельного концепта под мобайл? С учётом того, что это как минимум 50% трафика.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Анатолий Чупин

с мобайлом плоховато получилось - вёрстка съезжает.

когда презентуете такой кейс (сам по себе хороший), на большую аудиторию, лучше делать всё идеально )

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Подскажите, какое это устройство и разрешение экрана?

Ответить
Развернуть ветку
Анатолий Чупин

это 6 и 7 айфон

Ответить
Развернуть ветку
Анатолий Чупин

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

Ответить
Развернуть ветку
Антон Добронравов

На Ultrawide мониторе у большинства персонажей плохое позиционирование

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Mikhail Stroev

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Рады, что вам понравилось, хотя не совсем поняли, про что вы :)

Ответить
Развернуть ветку
Алексей из LOADING.express

У меня макбук про 2019 года включает все системы охлаждения, когда я открываю этот сайт... Но как мне ответили выше этот сайт для элитных компов, на которых это всё норм загружается.)) 

Ответить
Развернуть ветку
Асхаб Кудзаев

Весьма впечатляет 😮

Ответить
Развернуть ветку
Doktor BArbaris

Без скролла на главной было бы круче. Дизайн понравился

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Это без которого? Изображения или самого эффекта?

Ответить
Развернуть ветку
Doktor BArbaris

при скролле у меня подлагивает анимация

Ответить
Развернуть ветку
30 комментариев
Раскрывать всегда