Сайт «Серьёзных игр» ноябрь 2016

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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