Ресторан "Фон-Барон" — стильное заведение, ориентированное на аудиторию средних лет с высоким уровнем платежеспособности. Заказчик стремился выделиться среди конкурентов, подчеркнуть премиальный статус ресторана и сделать сайт важным инструментом привлечения новых гостей
Задача
Создать современный и модный сайт, который сочетает визуальную привлекательность с функциональностью. Основной упор был сделан на использование видео и анимации для создания впечатляющего визуального опыта. Дополнительно требовалась SEO-оптимизация для увеличения органического трафика и привлечения целевой аудитории.
Решение
Разработан свежий дизайн с использованием динамических элементов, включая видео и легкие анимации, чтобы подчеркнуть стиль и атмосферу ресторана. Была создана удобная структура с акцентом на ключевые разделы: меню, бронирование столиков и контактную информацию. Проведена SEO-оптимизация, включая подбор ключевых слов, прописание мета-тегов и создание уникального контента для улучшения позиций в поисковых системах.
Исходный сайт До редизайна
Разбор исходной версии сайта
Перед редизайном важно выявить недостатки, чтобы понять их влияние на пользователей и определить направления для улучшения.
Главная страница
Неподходящая цветовая палитра
Винный цвет и черный создают слишком тяжелое и негармоничное сочетание.
Недостаток отступов
Меню на странице лишено отступов, что делает его неудобным для восприятия. Также отсутствуют боковые отступы в кнопках, из-за чего они выглядят сжато.
Отсутствие акцентов
Описание ресторана неконсистентно, ключевые акценты не расставлены, из-за чего теряется уникальность заведения.
Неправильное расположение блоков
Раздел "О нас" расположен последним, хотя логичнее поставить его первым для знакомства посетителей с рестораном.
Неудачная вставка о парковке
Врезка о парковке визуально выглядит громоздкой и занимает слишком много места, отвлекая от основного контента.
Проблемы с текстовой читабельностью
1.Текст на карточках с фотографиями сложно читать из-за плохой контрастности. 2.Основной текст о ресторане выровнен по центру, не разделен на абзацы, что усложняет восприятие.
Страница Меню
Слишком громоздкий вид
Меню выглядит слишком большим на экране, что затрудняет восприятие и навигацию. Возможно, стоит рассмотреть другие варианты его представления.
Недостаток информации в галерее
В нижней части страницы представлена галерея блюд без подписей. Это создает неопределенность — либо стоит добавить подписи, либо отказаться от подобного формата.
Страница с Акциями
Плохая видимость кнопки бронирования
Кнопка "Забронировать" практически незаметна из-за отсутствия четкой обводки, что снижает ее кликабельность.
Отсутствие отступов внутри блоков
Контент внутри блоков слипается, из-за чего страдает восприятие информации.
Неделимые тексты
Тексты в блоках не разделены на абзацы, что затрудняет их чтение и восприятие.
Неудачный выбор фона
Малиновый цвет фона слишком насыщенный и отвлекает внимание от содержания страницы, включая выгодные предложения.
А пользователь кто?
Чтобы понять, какие инструменты дизайна использовать, я обратилась к фреймворкам "метод персон" и "job story".
Прежде чем что-то рисовать, нужно было понять, для кого это все. Ведь дизайн – это не про красивые картинки, а про то, чтобы людям было удобно и приятно. Я составила портреты целевой аудитории ресторана, представив, кто эти люди: что они ценят, как выбирают место для ужина и какие детали для них важны.
На основе "метода персон" я выделила основные группы пользователей: активные деловые люди, ищущие место для делового ужина, и пары, которые хотят провести романтичный вечер в красивой обстановке.
А вот "job story" помогла мне понять, зачем эти люди заходят на сайт и какие задачи пытаются решить. Одним нужен удобный способ забронировать столик, другим – быстро просмотреть меню, а третьим – убедиться, что ресторан соответствует их ожиданиям. Этот подход позволил мне точно определить, какие элементы дизайна должны быть на сайте и как их лучше представить, чтобы каждый пользователь нашел то, что ему нужно.
Бенчмарк
1. Что было сделано
Я провела анализ 15 сайтов ресторанов, среди которых были как прямые конкуренты, так и популярные заведения с интересными концепциями. Цель бенчмарка заключалась в сравнении функционала, структур и выявлении уникальных элементов дизайна, которые могли бы вдохновить на создание запоминающегося и удобного сайта для "Фон-Барон".
2.Основные выводы
Успешные сайты акцентируют внимание на уникальности заведения через визуальные элементы, такие как анимации и профессиональная съемка блюд.
Большинство ресторанов уделяют особое внимание удобству навигации: простая структура и доступные CTA (призывы к действию).
Интересные находки: динамичные галереи, интерактивные элементы, встроенные видео о ресторане, минималистичный дизайн с использованием акцентов в цвете.
Для привлечения аудитории 30–45 лет с хорошей платежеспособностью сайты должны быть стильными и уникальными, чтобы вызывать эмоции и запоминаться.
3. Как это повлияло на проект
На основе бенчмарка были сформированы идеи для редизайна:
Структура сайта была упрощена, чтобы пользователи могли быстро находить нужную информацию.
Добавлены динамичные элементы, такие как видео и анимации, чтобы подчеркнуть атмосферу ресторана.
Разработан запоминающийся визуальный стиль, который помогает выделить "Фон-Барон" среди конкурентов.
Одной из уникальных фишек стала главная страница с минималистичным концептом: только видео стейка на гриле, которое сразу погружает в атмосферу ресторана. На странице также присутствуют три ключевых элемента — кнопки "Позвонить", "Бронь" и "Меню".
Выявленные концепции протестированы с пользователями, чтобы убедиться, что предложенный функционал удобен для целевой аудитории.
Выбор цветовой палитры
Изначально заказчику был предложен темно-серый цвет, отражающий элементы интерьера ресторана и подчеркивающий его элегантность. Однако заказчик выразил желание использовать более "уютный" оттенок, чтобы создать теплую и гостеприимную атмосферу. В итоге основным цветом был выбран коричневый, ассоциирующийся с натуральностью и комфортом. Акцентным цветом стал желтый, добавляющий яркости и привлекающий внимание к ключевым элементам дизайна, таким как кнопки и важные блоки. Такой выбор создал баланс между уютом и стилем, полностью соответствующий концепции ресторана.
#715946
#F4F09B
#FDFDFC
Выбор шрифтовой пары
Для заголовков я выбрала Cormorant Garamond — элегантный и классический шрифт, который словно создан для того, чтобы передать премиальную атмосферу ресторана. Он добавляет изысканности и помогает сразу же обратить внимание на ключевые акценты страницы. А вот для основного текста я остановилась на Gilroy. Этот современный, лаконичный шрифт легко читается и отлично подходит для подачи информации. Мягкие линии и сбалансированный стиль делают его идеальным выбором для удобного чтения. Вместе эти два шрифта создают гармоничный дуэт: заголовки впечатляют, текст читается легко, а общее впечатление — стильное и комфортное. Именно это и нужно было для такого проекта.
Сомнения и правки
Если с выбором цветов и шрифтов все прошло гладко, и мы быстро пришли к консенсусу, то с user flow возникли настоящие дискуссии. Мой провокационный вариант главной страницы — это всего один блок с видео и тремя кнопками: "Звонок", "Бронь" и "Меню". Никаких привычных прокруток вниз, никакой традиционной структуры. Да, такой подход мог бы вызвать неприятие у более консервативной аудитории, но мы решили рискнуть и протестировать.
Сначала я провела опрос в фокус-группе, чтобы проверить, правильно ли пользователи понимают назначение кнопок. Вопрос был прост: "Посмотрите на экран. Как вы думаете, что произойдет, если нажать на 'Звонок' или 'Бронь'?" Все 7 участников без труда поняли назначение кнопок, что подтвердило мою гипотезу.
Далее я сосредоточилась на восприятии концепта в целом. Из 7 опрошенных пятеро отметили, что вначале возникает желание прокрутить страницу, как будто чего-то не хватает. Но спустя минуту это ощущение сменяется приятным удивлением и интересом, как будто они увидели что-то действительно необычное.
Да, нарушить привычный user experience — это риск, но он оказался оправданным. Уже через месяц после запуска нового сайта все сомнения развеялись. Пользователи либо сразу выполняют целевое действие — "Звонок" или "Бронь", либо беспрепятственно перемещаются по страницам, исследуя сайт вдоль и поперек. Такой нестандартный подход помог выделить сайт "Фон-Барон" и сделать его запоминающимся, сохранив при этом удобство для посетителей.
Заключительный этап и выводы.
После трех кругов правок макета, включая адаптивные версии для всех устройств, я завершила редизайн сайта. Сайт был сверстан на платформе Tilda, выполнены все необходимые настройки и SEO-оптимизация.
Одной из главных задач редизайна было сохранить существующий трафик, чтобы не потерять уже привлеченную аудиторию. Это требовало тщательной проработки всех технических деталей, и результат оправдал усилия. Уже через месяц после запуска сайт оказался на первой странице поисковой выдачи Яндекса по запросу «стейки в Красноярске» — ключевое направление, на котором заказчик хотел сфокусироваться.
Кроме того, мы добились значительного роста трафика без дополнительных затрат на рекламу: количество сессий увеличилось с 1800 до 2200 в месяц. Конверсия заявок также показала впечатляющий результат, поднявшись с 2% до 4.4%.
Этот проект стал отличным примером того, как правильно реализованный редизайн может не только улучшить внешний вид сайта, но и дать ощутимый рост бизнес-показателей.
75% пользователей используют мобильную версию сайта.
Спасибо за внимание!
КОНТАКТЫ
Обсудим ваш проект? Заполните форму ниже и я свяжусь с вами в ближайшее время.