{"id":7016,"title":"\u0423\u0433\u0430\u0434\u0430\u0439\u0442\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0437\u0432\u0443\u043a\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u0438\u0432\u0430 \u0438 \u043f\u0435\u043d\u0438\u044e \u043a\u0438\u0442\u043e\u0432","url":"\/redirect?component=advertising&id=7016&url=https:\/\/vc.ru\/special\/sound&placeBit=1&hash=6ca24c77fedb0a01bd41595a6fbd498b5375a294c2e3b54a129aa318671b77a3","isPaidAndBannersEnabled":false}

Дизайн и разработка сайта для 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-разработчиков, которые смогут воплотить все задумки: грамотно сверстают, настроят анимацию элементов, выверят все до пикселя.

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

  • Отдавайте предпочтение агентству или веб-студии, а не отдельным специалистам. Во-первых, командная работа позволяет придумывать более интересные и уникальные идеи. Во-вторых, в агентстве дизайнеры и разработчики уже сработались, а значит работа будет более слаженная, а загвоздок в процессе проекта будет меньше.
  • Посмотрите портфолио команды, чтобы понять, насколько ваши вкусы совпадают с их подходом к дизайну.
  • Заготовьте заранее контент в хорошем качестве: изображения, фотографии, текст. Ведь именно контент превращает дизайн сайта в инструмент бизнеса. И именно вокруг него строится структура сайта и каждой страницы. Кстати, еще одно преимущество студии или агентства — они помогут вам создать нужный контент.
  • Крутой дизайн — это не только про изображение, но и про удобство для пользователя. Поэтому обратите внимание, есть ли в команде компетенции по проектированию пользовательского взаимодействия.
{ "author_name": "Digital-агентство Атвинта", "author_type": "self", "tags": ["\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","\u0432\u0435\u0440\u0441\u0442\u043a\u0430"], "comments": 33, "likes": 23, "favorites": 77, "is_advertisement": false, "subsite_label": "design", "id": 116705, "is_wide": true, "is_ugc": true, "date": "Wed, 01 Apr 2020 07:14:39 +0300", "is_special": false }
0
33 комментария
Популярные
По порядку
Написать комментарий...

симпотно

7

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

3

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

0

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

0

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

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

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

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

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

2

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

0

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

0

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

2

позитивно :)

1

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

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

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

2

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

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

0

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

1
Пышный Абдужаббор

Сайт сделан на MODx я так понимаю? Подскажите пожалуйста, почему выбрали эту CMS под этот проект? 

1

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

0
Пышный Абдужаббор

Не тестировал сам MODx просто, посмотрю потом, спасибо!

0

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

1

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

0

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

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

1

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

0

это 6 и 7 айфон

0

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

0

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

1

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

0

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

1

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

0

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

1

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

0

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

0

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

0

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

0
Читать все 33 комментария
Дизайн-джем #42: мифы и легенды о русалках, японские рассказы, космические приключения и азы точных наук

В красочном дайджесте, посвящённом детским книжным иллюстрациям, от Futura by red_mad_robot.

Исследование: сотрудники хотели бы иметь комнату отдыха, бесплатный сок, а работодатели уже готовы покупать ЗОЖ-снеки

Онлайн-сервис доставки продуктов и товаров СберМаркет и исследовательское агентство Research Me спросили сотрудников, как они хотели бы питаться в офисе и что в нем видеть. В опросе приняли участие более 1500 работающих людей по всей России. Сервис также спросил работодателей – В2В-клиентов СберМаркета: что они покупают в офис, что точно никогда…

Почему «без ТЗ результат ХЗ». Разбираем на примере CRM-систем

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

Пример нотации согласовательного уровня Библиотека примеров BPMN
Робот повысил конверсию продаж в B2B

В изменчивой реальности (для которой даже придумали специальной термин «VUCA-мир») компании ищут свои точки опоры. Важно не просто следовать трендам, но и предугадывать их. Особенно когда клиентское поведение и бизнес-процессы трансформируются так стремительно.

Курс доллара упал ниже 70 рублей впервые с лета 2020 года после повышения ключевой ставки Статьи редакции

Евро подешевел до 81,3 рубля впервые за год.

«Сбер» научил свой ИИ-сервис определять возможные признаки рака на ранних стадиях по снимкам лёгких Статьи редакции

Это может помочь врачам при диагностике заболевания.

ПСБ запустил личный кабинет для предпринимателей. Там можно следить онлайн за каждым своим терминалом

Сервис предоставляется бесплатно.

Как не попасть в карьерную ловушку тимлида: личный опыт

Кажется, что тимлиду просто некуда расти: дальше надо либо идти в менеджмент, либо наоборот, становиться узконаправленным разработчиком. По просьбе «Лаборатории Касперского» Евгений Мацюк, который прошел в компании неординарный путь, рассказал о своих карьерных развилках во время и после тимлидства, а также поделился опытом горизонтального роста.

Сооснователь «Кухни на районе» Олег Козырев покинул компанию Статьи редакции

Но сохранил долю в бизнесе.

«Яндекс.Маркет»: в моем заказе вместо наушников оказалась бутылка из-под водки

Я давно хотела беспроводные наушники и наконец заказала себе Apple AirPods. Оформила заказ 15.10.2021 через Яндекс.Маркет в магазине Superbia.ru

Шпаргалка для инвестора: сделки РЕПО

Рассказываем об одном из важнейших инструментов рынка ценных бумаг — сделках РЕПО.

null