Дизайн промо-сайта Gymnizer: макеты под экраны от 320 до 2560 px

О сервисе

Gymnizer – сервис для бронирования тренажёрных залов. Залы небольшие, на одного-двух человек: прийти можно одному, с другом или с тренером. Зал выбирают по расположению, бронируют на удобное время и дальше пользуются им через мобильное приложение.

Приложение здесь главный продукт, а у сайта другая роль: показать сервис тем, кто ещё ничего не установил. Интерфейс самого приложения мы тоже проектировали, о нём отдельный кейс: мобильное приложение Gymnizer.

Задача

Основная цель промо-сайта: презентовать продукт и рассказать об основных возможностях и преимуществах сервиса. Вокруг неё мы собрали структуру. Главная состоит из шести экранов, в меню четыре раздела («О сервисе», «Залы», «Помощь», «Контакты»), а ещё есть страница зала, инструкция по приглашению друга, формы и страницы ошибок.

Главная из шести экранов

Главная страница не листается сплошной лентой. Она разбита на шесть полноэкранных слайдов, у каждого своя тема. Номер слайда повторяется крупными контурными цифрами на фоне, так что посетитель всегда видит, где находится.

• 01 «Твой личный тренажёрный зал»: залы рядом с домом или работой, бронирование в любое удобное время, кнопки Google Play и App Store.
• 02 «Сервис для бронирования залов»: площадь и комплектация рассчитаны на одного-двух человек.
• 03 «Запланируй первую тренировку»: ближайший зал на карте или в списке и полная информация о нём, то есть режим работы, оборудование и стоимость.
• 04 «Выбери удобное время и забронируй»: зал бронируют на любую продолжительность в любой день месяца, а тренировкой можно поделиться с другом.
• 05 «Начни тренировку».
• 06 «Контакты»: телефон, почта, кнопка «Связаться с нами» и подписка на рассылку.

Слайды с третьего по пятый работают как короткая презентация основного сценария: найти зал, выбрать время, прийти и заниматься.

Переходить между слайдами можно по-разному. На десктопе слева стоит вертикальная навигация из штрихов: она показывает текущий экран и быстро переносит на любой другой. На планшете и смартфоне слайды листаются свайпом, а на нижней панели есть стрелки и счётчик «1/6».

Приложение вместо иллюстраций

Ничего не расскажет о приложении лучше, чем его интерфейс. Поэтому на главной нет абстрактных картинок: в каждом слайде стоят макеты приложения, развёрнутые под углом. Ещё до установки посетитель видит экраны выбора зала, таймера и бронирования времени.

Цвета были заранее определены в брендбуке сервиса: почти чёрный фон, графитовый серый и жёлтый #D9D714 для акцентов. Шрифт Montserrat в четырёх размерах (39, 28, 20 и 14) с межстрочным интервалом 150%. Макеты собраны на сетке из 24 колонок и 12 рядов: слева логотип и навигация, по центру заголовок и текст, справа экраны приложения, наверху меню и кнопки скачивания.

Адаптивность

Чтобы сайт корректно отображался на всех устройствах, мы отрисовали макеты под все популярные разрешения. Получилось четыре диапазона ширины экрана: 2560–1920, 1920–768, 768–375 и 375–320 px.

На планшете меню прячется за кнопку-гамбургер и открывается поверх страницы, а рядом с логотипом остаётся жёлтая кнопка «Скачать». В мобильной версии каждый слайд перестраивается в колонку: сверху заголовок и пара строк текста, ниже макет приложения.

Залы ещё до установки приложения

Раздел «Залы» открывается картой, на которой жёлтыми точками отмечены все залы. Слева панель с фильтрами «Есть душ», «24/7» и «Рядом со мной» и карточка выбранного зала: расстояние, адрес и кнопка «Подробнее». Так ещё до установки приложения можно посмотреть, где находятся залы, какая у них комплектация и что в них есть.

Страница зала

Страница зала условно поделена на два экрана. На первом основная информация: галерея с кнопкой «Смотреть все фото», цена за час (на макете от 159 ₽), отметки о душе и круглосуточной работе и короткий текст о том, что доступно во время тренировки.

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

О сервисе: преимущества в иллюстрациях

В разделе «О сервисе» мы рассказываем о Gymnizer через преимущества с иллюстрациями. Их шесть: территориальная доступность, личный комфорт, продуманная комплектация залов на все группы мышц, экономия времени, современное оборудование и инвентарь, продезинфицированные помещения. Иллюстрации нарисованы в палитре интерфейса: серые круги, жёлтые акценты и иконки.

Рядом короткие подписи о том, как проходит визит в зал. Можно подключить телефон и заниматься под свою музыку, перекусить и сходить в душ после тренировки, выбрать любой день и время, привести друга или тренера.

Помощь и приглашение друга

В разделе «Помощь» собраны популярные вопросы. Сверху список с якорными ссылками на ответы ниже на той же странице, а рядом кнопка «Связаться с нами» для тех, кто не нашёл ответа.

Отдельная страница объясняет реферальную систему в четыре шага: найти свой код в приложении в разделе «Баланс счёта», поделиться им с другом, дождаться, когда друг применит промокод и забронирует тренировку, и получить рубли на баланс.

Форма обратной связи открывается со страниц «Контакты» и «Помощь»: имя, телефон и e-mail, а менеджер обещает связаться в ближайшее время. После отправки посетитель видит экран «Твоя заявка успешно отправлена».

Страницы ошибок

Даже страницу ошибки 404 мы оформили в стиле сайта. По кругу идёт крупная надпись «Страница не найдена», в центре текст «Не волнуйся! Такое случается с каждым» и жёлтая кнопка «На главную». Для ошибки 500 сделали экран «Что-то пошло не так», через который наискосок протянута жёлтая сигнальная лента с надписью «Ошибка сервера».

Результат

Мы сделали дизайн промо-сайта Gymnizer: главную из шести экранов, разделы «О сервисе», «Залы», «Помощь» и «Контакты», страницу зала, инструкцию по реферальной системе, формы и страницы ошибок. Каждая страница отрисована для четырёх диапазонов ширины, от 2560 до 320 px. С приложением сайт говорит на одном визуальном языке: те же цвета и шрифт, а экраны интерфейса работают как иллюстрации.

Нужен сайт для вашего продукта? Посмотрите разработку веб-дизайна сайта и UI/UX-проектирование: продумаем структуру и сценарий и отрисуем макеты для всех экранов.