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