Сайт Серьёзных игр

Новый сайт «Серьёзных игр» — это большое Редакс‑приложение. Я спроектировал архитектуру приложения, настроил серверный рендеринг, собрал набор интерфейсных элементов и основные страницы.

Главная

На главной мы рассказываем о компании и квестах, приглашаем посмотреть расписание и забронировать игру.

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

Список квестов

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

Попап бронирования

Время и дату можно изменить. В списке мы показываем только свободные игры, а также цену в определённое время:

Список сободных дат

В разделе с контактной информацией мы рассказываем, где находятся клубы, показываем их на карте. Если клуб работает круглосуточно, обозначаем это наклейкой «24 часа».

Список клубов

На странице расписания мы сделали фильтры по подборкам, времени и цене. Дату можно выбрать в календаре под фильтрами.

Квесты занимают строчки ниже. Игры собраны по ценам в группы, цена — в подвале группы.

Расписание

Множественный фильтр подборок и времени помогает точнее выбрать квест. Кнопка «Сбросить» стирает все настройки фильтра.

Фильтры

Расписание квестов таскается и скроллится по горизонтали. На мобильных устройствах работает свайп.

Свайп в расписании

При нажатии на свободное время открывается попап бронирования. Язычок в нём указывает, какую игру бронирует пользователь. А дата и время фиксируются на этой игре.

Бронирование из расписания

На странице квеста мы рассказываем об игре и показываем фотографии локации, отзывы и фотографии игроков.

Карточка квеста

Рассказываем легенду игры, показываем, где находится клуб, как до него добраться.

Контакты клуба

В конце выводим расписание квеста на две недели вперёд. Из фильтров оставляем цену и время суток.

Галерея

Для телефонов упрощаем вёрстку.

Главная на телефоне

Контакты клубов перестраиваем и выводим горизонтально с картой под ними.

Контакты на телефоне

Попап брони разворачиваем на весь экран и выводим по центру.

Бронь на телефоне

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

Фильтры на телефоне

Слоты игр также свайпаются влево‑вправо.

Расписание на телефоне

На странице квеста выводим кнопку «Забронировать» внизу страницы.

Кнопка «забронировать» на телефоне

Расписание на странице квеста группируем по дням, при тапе на день расписание разворачивается.

Группировка в расписании телефоне

О том, насколько объёмным получился этот проект, и чему я научился, работая над ним, я написал в блоге.

request.ru

← ЦРМ‑система для Серьёзных игр Страница участия в тендере →