Трансляция турнира «Армагеддон»
Рассказывает Миша Нозик
Начинаем с экрана игры. Поначалу хочется отдать как можно больше места трансляции из зала. Пусть она занимает весь экран, а интерфейс будет накладывать поверх. Придумываем компактный виджет с игровой доской:
Развиваем идею в экране с представлением игроков — на фоне зал, а фотки и графика в несколько слоёв накладываются поверх:
Параллельно придумываем обложки. Хочется, чтобы композиция усиливала ощущение противостояния между игроками:
Показываем общее визуальное решение клиенту. Клиент просит сделать доску покрупнее, а физиологические показатели игроков (пульс, калории) — более спортивными на вид. Также выясняется, что давление игроков пока технически показывать не получится. Увеличиваем доску, а пульс и калории переносим в углы. Промежуточный макет, в котором мы ищем способ, как показать и сердечко, и график пульса:
Между делом появляется макет, который пригодится позже:
Придумываем сделать весь интерфейс полупрозрачным, пробуем усилить графики, добавляем график с историей изменения преимущества:
Примеряем всё на экраны с представлением игроков:
Клиент предлагает всё‑таки сильнее отделить игру от демонстрации зала и не экспериментировать с видимостью доски — её должно быть видно всем всегда. После долгих обсуждений договариваемся убрать график преимущества и — снова по техническим причинам — сжигаем калории. Вынимаем из ведра показанный ранее макет и развиваем:
Работаем над другими экранами:
На экране с игрой тем временем продолжает утрясаться вёрстка, увеличивается доска:
Спустя ещё несколько раундов согласований и доработок утверждаем дизайн основных экранов. Прорабатываем специальные состояния интерфейса, собираем ещё десяток вспомогательных экранов, придумываем и делаем перебивочные анимации, показываем цветовые гаммы для разных этапов шоу, готовим шаблоны обложек. Состояние Фигмы с картинками для демонстрации клиенту ближе к концу этапа дизайна:
Подкручиваем необходимые мелочи для передачи экранов с игрой в разработку, смотрим и комментируем результаты вёрстки, помогаем дизайнерам клиента советами по части дизайна и анимации, которые заранее было решено отдать им.