Дизайн — статьи о сайтах
На сайт пекарни обычно заходят с конкретной целью: найти, где купить хлеб рядом, заказать торт к празднику или проверить, открыта ли точка сегодня. Первый экран главной страницы, то есть всё, что видно без прокрутки, должен ответить на эти вопросы сразу.
Какой выбор должен сделать посетитель на первом экране
Первый экран нужен не для рассказа о себе, а для выбора следующего шага. У пекарни таких шагов обычно три: прийти в точку, оформить предзаказ или посмотреть ассортимент. Решите, какой из них важнее для вашего бизнеса. Если основной доход дают торты на заказ, главной будет кнопка заказа. Если вы живёте за счёт потока покупателей, на первый план выходят адрес и часы работы.
Шаги, которых у вас нет, лучше не показывать. Если доставки нет, кнопка «Доставка» только создаст ожидание, которое сайт не оправдает.
Из чего собрать первый экран пекарни
- Заголовок с продуктом и местом. «Хлеб на закваске и свежая выпечка в Заречье» говорит больше, чем «Добро пожаловать».
- Настоящее фото. Покажите свою витрину, разрез буханки или лоток из печи. Стоковые колосья ничем не отличают вас от других пекарен.
- Статус на сегодня. Строка вроде «Сегодня открыто до 20:00» избавляет от поиска раздела с контактами.
- Адрес или район. Достаточно одной строки, полный список точек можно вынести на отдельную страницу.
- Одна главная и одна второстепенная кнопка. Например, «Заказать на завтра» и «Как добраться».
Условный пример: как это может выглядеть
Возьмём вымышленную пекарню «Колос и соль» с одной точкой и приёмом предзаказов. Это иллюстрация, а не реальный проект.
- Заголовок: «Хлеб на закваске и круассаны из утренней печи».
- Подзаголовок: «Ул. Садовая, 12. Сегодня открыто с 7:00 до 20:00».
- Кнопки: «Заказать на завтра» (заметная) и «Как добраться» (контурная).
- Фон: фото полки с буханками, снятое в самой пекарне.
- Под кнопками: строка «Торты и большие заказы: условия и сроки — в разделе заказа».
- Нижний край экрана: видна полоска карточек «Хлеб», «Сладкая выпечка», «Торты». Она подсказывает, что ниже есть ассортимент.
В этом примере каждый элемент отвечает на отдельный вопрос: что продаёте, где вы, открыто ли сейчас, что нажать. Рассказ о семье основателей уходит ниже, где его прочтёт тот, кому это интересно.
Что лучше не ставить на первый экран
- Слайдер с автопрокруткой. Нужная информация может пролистнуться раньше, чем её заметят.
- Видео со звуком или тяжёлый фон. Он замедляет загрузку, особенно на мобильном интернете.
- Всплывающую форму подписки. Человек ещё не понял, что у вас можно купить.
- Длинный текст об истории и ценностях.
- Полный прайс. Для него есть каталог.
Уведомление о cookie тоже занимает место на экране. Сделайте его компактным, чтобы оно не закрывало кнопки.
Как проверить первый экран на телефоне
С телефона люди часто заходят по дороге или уже рядом с пекарней. Высота экрана там меньше, и красивое фото легко вытесняет кнопки вниз. Откройте сайт на реальном устройстве, а не только в уменьшенном окне браузера. Проверьте, что телефон нажимается и открывает звонок, адрес открывает карту, а кнопки достаточно крупные для пальца.
Проверочный список для главной страницы
- Из заголовка понятно, что вы печёте и в каком районе или городе.
- Фото сделано в вашей пекарне, а не взято из банка изображений.
- Часы работы и адрес видны без прокрутки.
- Главная кнопка соответствует главной цели бизнеса.
- Кнопок не больше двух.
- Кнопки доставки или заказа есть только там, где такая услуга действительно работает.
- На телефоне кнопки видны без прокрутки и не перекрыты баннерами.
- Ниже по странице угадывается ассортимент.
- Текст на фото читается, а фон не отвлекает от заголовка.
Если хотя бы на три пункта ответ «нет», начните с главной кнопки и строки с режимом работы: эти правки обычно самые быстрые.
