Саша Беспоясов
Это я.

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

Главная
Главная

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

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

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

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

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

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

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

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

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

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

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

Расписание
Расписание

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

Фильтры
Фильтры

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

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

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

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

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

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

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

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

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

Галерея
Галерея

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

request.ru

ЗадачникCRM для Серьёзных Игр