Leadframe

Барбершоп рядом с домом

На районе.

Дизайн и разработка сайта барбершопа

Дизайн, который передаёт характер барбершопа и помогает перейти от знакомства к записи.

Открыть сайт
На районеПервый экран
Общий вид проекта «На районе»
Ниша
Красота и уход
Направления
ЛендингиДизайн
Участие студии
Дизайн и разработка сайта барбершопа

01 / Контекст

Понятный выбор.
Быстрая запись.

«На районе» — барбершоп в Красноярске. Для первого визита человеку важно быстро понять три вещи: где находится удобный филиал, сколько стоит услуга и как записаться. Эти вопросы стали основой структуры сайта.

Для кого

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

Взгляд посетителя

Три вопроса до записи

  1. Где ближайший филиал?
  2. Сколько стоит услуга?
  3. Как записаться?

Что должна решить страница

  1. Выбор филиала

    Сделать выбор филиала частью первого экрана.

  2. Услуги и цены

    Показать стоимость услуг до перехода к записи.

  3. Характер бренда

    Передать атмосферу заведения через собственную графику и работы мастеров.

02 / Дизайн и структура

У каждого решения
есть своя задача

От первого знакомства —
к следующему шагу.

01

Городская карта вместо случайного баннера

Первый экран связывает название «На районе» с реальным сценарием выбора: найти барбершоп рядом с собой. Карта с метками делает расположение частью предложения, а не информацией, спрятанной в подвале.

02

Характер через шрифт и фактуры

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

03

Цены и работы — перед решением о визите

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

состав нашей работы
Дизайн + код
выбор на первом экране
2 филиала
следующий шаг посетителя
Онлайн-запись

03 / Интерфейс

От общего — к деталям

Листайте экраны. Любое изображение можно открыть на весь экран.

Знакомство и выбор филиала

Карта, предложение для первого визита и два основных действия: выбрать филиал или посмотреть цены.

04 / Мобильный опыт

Та же задача.
Меньше экран.

Логику страницы выстроили вокруг короткого пути: филиал, услуга, знакомство с работами, запись.

  • Услуги сгруппированы по смыслу.
  • Основные действия доступны из ключевых блоков.
  • На странице сохранён единый визуальный язык.

Знакомство и выбор филиала

Путь пользователя

Интерфейс ведёт
к следующему шагу

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

  1. 01

    Узнать место

    Первый экран объясняет формат барбершопа и показывает расположение филиалов.

  2. 02

    Сравнить услуги

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

  3. 03

    Посмотреть работы

    Галерея показывает примеры стрижек и оформления бороды.

  4. 04

    Перейти к записи

    Кнопки обращения доступны в шапке и в ключевых блоках страницы.

Итог / Состав проекта

Что собрали
в одном решении

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

В составе проекта

  • Структура одностраничного сайта
  • Индивидуальный дизайн интерфейса
  • Разработка и адаптивная вёрстка
  • Первый экран с выбором филиала
  • Раздел услуг и стоимости
  • Галерея работ и переходы к записи

Десктопные изображения — сохранённые скриншоты сайта. Мобильные экраны — иллюстрации адаптации его дизайна.

Остался вопрос?

Расскажите о вашей задаче. Уточним детали и поможем выбрать подходящий формат работы.