Дизайн и разработка сайта для 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 была вовлечена в тестирование интерактивного интерфейса. Сотрудники студии гейм-разработки проверяли удобство сайта, обсуждали с коллегами, после чего суммировали повторяющиеся замечания и передавали нам.
В итоге получился сайт, разработанный с учетом особенности аудитории — специалистов гейм-разработки, хоть это и увеличило сроки согласования.
Внутренние страницы разделов
На внутренних страницах мы развили идею с крупной типографикой и игровыми персонажами в заголовках.
Структура каждой из этих страниц разработана с учетом информации, которая интересна пользователям в этом разделе. Например, рассказываем о корпоративной жизни и атмосфере в команде, публикуем описание вакансий для соискателей.
Страница проектов презентует все игры, выпущенные Friday’s Games за 13 лет работы студии. Проекты расположены на таймлайне — временной шкале: от новейших до созданных несколько лет назад. По клику на название игры пользователь попадает на подробное описание проектов.
Страницы проектов
Задача этого раздела презентовать проекты студии так, чтобы продемонстрировать их масштаб, сформировать у пользователей сайта представление о работах компании, показать по возможности процесс разработки.
Разработку этих страниц начали со сбора контента: структура и дизайн этих страниц зависят от текста и изображений, которые необходимо разместить. Для этого составили детальный опросник, чтобы понять, какая информация об играх есть: арты, история и наброски поэтапного создания игровых миров и персонажей.
Изначально мы хотели для всех большинства проектов сделать уникальные страницы. Однако оказалось, что собирать достаточный контент для некоторых проектов долго и затратно. Тогда заказчики попросили сделать все страницы шаблонными. В итоге мы нашли баланс и договорились сделать уникальные страницы для топовых проектов студии, а для остальных разработать шаблон.
Шаблон для типовых проектов спроектировали с учетом контента, который будет легко генерировать самостоятельно: описание проекта, арты и скриншоты игрового интерфейса, награды, ссылки на App Store и Google Play.
Страницы флагманских проекты сделали более масштабными. Здесь рассказываем не только общую информацию об игре, но и показываем персонажей, скетчи, историю создания. Дизайн каждой из этих страниц — уникальный и разработан с учетом той информации, которую заказчику важно было показать.
Для начала спроектировали несколько вариантов страниц с разной компоновкой информации. Такое визуальное представление помогло команде Friday’s Games сориентироваться, что они хотят рассказать о своих самых любимых проектах и какой контент передадут нам для разработки дизайна.
Веб-разработка и технологии
Сайт разработан по технологии SPA (Single Page Application), когда контент сразу единожды загружается в браузер пользователя. Это решение позволяет ускорить работу сайта по сравнению с привычными технологиями.
Когда пользователь переходит между разделами, ему больше не приходится ждать полной перезагрузки страницы. Сначала пользователю загружается страница, к которой он непосредственно обратился и в фоновом режиме остальная часть сайта, необходимая в данный момент.
Загрузка контента при переходе между разделами сайта производится под анимированным прелоадером-пламенем.
Анимация типографики
На каждом экране главной страницы мы реализовали анимацию заголовков.
По задумке наших дизайнеров буквы на экране не просто появляются, но еще и параллельно отрисовываются, как будто их дописывают в последний момент.
Моушн-дизайнер сделал анимацию двух половин заголовков, и уже анимированные изображения передали разработчикам. Теперь вместо большого количества элементов мы анимировали всего три: начало и конец слова, плюс персонаж между ними.
Анимацию заголовков и всех интерактивных элементов адаптировали под разные версии браузеров. Сайт определяет версию браузера пользователя при загрузке и в зависимости от этого включает подходящий алгоритм запуска.
Управление контентом
Корпоративный сайт должен быть легко наполняем. Поэтому мы интегрировали систему управления контента, с помощью которой сотрудники Friday’s Games смогут легко самостоятельно добавлять новые вакансии, создавать страницы для новых проектов, дополнять информацию в разделе «О компании».
В административной панели мы реализовали шаблоны для разных типов страниц, чтобы администраторам сайта было удобно править или создавать новые внутренние страницы, сохраняя общую структуру сайта.
Результат и рекомендации
В результате получился сайт, который демонстрирует масштабность проектов студии и преимущества работы в их команде.
Такой сайт требует большого внимания к деталям и опытную команду не только дизайнеров, но и frontend-разработчиков, которые смогут воплотить все задумки: грамотно сверстают, настроят анимацию элементов, выверят все до пикселя.
Если вам нужен сайт, в котором важна имиджевая составляющая дизайна, то при выборе подрядчика обратите внимание на такие моменты:
- Отдавайте предпочтение агентству или веб-студии, а не отдельным специалистам. Во-первых, командная работа позволяет придумывать более интересные и уникальные идеи. Во-вторых, в агентстве дизайнеры и разработчики уже сработались, а значит работа будет более слаженная, а загвоздок в процессе проекта будет меньше.
- Посмотрите портфолио команды, чтобы понять, насколько ваши вкусы совпадают с их подходом к дизайну.
- Заготовьте заранее контент в хорошем качестве: изображения, фотографии, текст. Ведь именно контент превращает дизайн сайта в инструмент бизнеса. И именно вокруг него строится структура сайта и каждой страницы. Кстати, еще одно преимущество студии или агентства — они помогут вам создать нужный контент.
- Крутой дизайн — это не только про изображение, но и про удобство для пользователя. Поэтому обратите внимание, есть ли в команде компетенции по проектированию пользовательского взаимодействия.
симпотно
спасибо :)
Были правки после бизнес-линча от Артемия Лебедева?
Пару моментов поправим, да
Интересно что сказал великий Артемий, но найти не могу, скиньте пожалуйста.
https://vk.com/video-170587775_456242740?t=2h17m48s
Лови, нашёл запись в вк
Сайт загружается долго. Надо оптимизировать скорость загрузки!
Отчет здесь: https://loading.express/?test_id=5e844c3202b95b1a639624b8.
Проверка из России.
Не расстраивайтесь из-за минусов. Сайт и правда летает медленнее, чем гугл)
И тут пара моментов:
1. В проекте использована технология SPA, а тесты скорости не умеют этого определять. В результате у реального пользователя нужная страница уже отобразилась. При этом параллельно продолжает фоново загружаться следующий контент. А тесты к такому сюрпризу не готовили.
2. Сайт оптимизирован до того уровня, чтобы найти баланс между "спецэффектами" и скоростью. С учетом того, что ЦА из сферы геймдева и пользуется достаточно мощными девайсами, этого достаточно.
_______________
Кстати, если проверить VC, тесты скорости тоже выдадут низкий результат. Однако это не мешает ресурсу развиваться и привлекать десятки тысяч пользователей :)
https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=vc.ru
https://loading.express/?test_id=5e84654502b95b1a639624e1
Да-да, минусите. Но сайт сделан не оптимально по производительности.
Загрузка медленная.
А новый пейджспид показывает вот что
https://lh6.loading.express/reports/1585756149.report.html
10 сек до взаимодействия и 13 секунд до отрисовки крупного контента.
ну такоооое
Название агенства атасс, вспомнил песню, пою сейчас
позитивно :)
Сайт клёвый, хоть местами и перегружен инфой, глаза разбегаются )
А вот текст статьи очень скучный. По сути в каждом абзаце одно и тоже, в конце только чуть больше интересно инфы.Замените в статьи заказчика (и макеты) с "игровой студии", на пример на "молочную ферму" и смысл тот же останется: делали сайт и сделали =) Как-то сам с такой проблемой сталкивался тоже )
P.S. работы и описания у вас классные, молодцы!
За комплимент сайту, работам и описаниям спасибо :)
Про текст - передадим автору. А то че он?
Выглядит классно!
Комментарий недоступен
На наш взгляд MODx - удобное кастомизированное и масштабируемое опенсонр-решение. А еще в нем наиболее понятная функциональность в панели управления контентом, что важно для владельцев сайта.
Комментарий недоступен
Почему не было отдельного концепта под мобайл? С учётом того, что это как минимум 50% трафика.
Конкретно у этой компании по статистике их старого сайта мобильный трафик сильно меньше 50%.
Кроме того, концепция - это про общую стилистику сайта. Мобильная версия выполнена в той же стилистике и реализована на этапе дизайна, когда разрабатывали адаптивы под разные разрешения.
с мобайлом плоховато получилось - вёрстка съезжает.
когда презентуете такой кейс (сам по себе хороший), на большую аудиторию, лучше делать всё идеально )
Подскажите, какое это устройство и разрешение экрана?
это 6 и 7 айфон
заходите в инструменты разработчика - правая кнопка мыши - посмотреть код - и выбираете мобильную ориентацию - дальше для всех устройств можно проверить
На Ultrawide мониторе у большинства персонажей плохое позиционирование
Вы удачно попали в небольшую выборку :)
По статистике старого сайта процент таких юзеров незначительный, поэтому сначала запустили на основных разрешениях экранов. Сайт выпущен в мир только в начале недели, развитие на очереди.
Ах, как я люблю вот эти перлы: "заголовки как бы уходят за пределы экрана, транслируя идею масштабности проектов студии, выход за границы и развитие". Все по классике: "А ты давай, бухти мне, как космические корабли бороздят большой театр"
Рады, что вам понравилось, хотя не совсем поняли, про что вы :)
У меня макбук про 2019 года включает все системы охлаждения, когда я открываю этот сайт... Но как мне ответили выше этот сайт для элитных компов, на которых это всё норм загружается.))
Весьма впечатляет 😮
Без скролла на главной было бы круче. Дизайн понравился
Это без которого? Изображения или самого эффекта?
при скролле у меня подлагивает анимация