Лендинг для студии растяжки: от брифа до восьмой версии

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

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

Задача

лендинг студии растяжки и пилатеса с записью в Telegram

Раздел

Сайты, «Лендинг», уровень «Оптимум»

Наш вклад

бриф, ответы на четыре вопроса и одна правка словами

Результат

адаптивный лендинг из 10 разделов, 8 версий в истории

Бриф и вопросы

Мы рассказали о студии, как рассказали бы верстальщику: название и город, групповые и индивидуальные занятия, первое занятие бесплатно, запись в Telegram и по телефону, «светлый, воздушный, женственный стиль». Под полем ввода выбрали «Лендинг».

Веб-дизайнер уточнил аудиторию и направления — четыре вопроса с вариантами:

• «Для кого в первую очередь занятия?» — «Для женщин любого уровня» и «Для начинающих».
• «Какие направления важно показать на сайте?» — «Все перечисленные».
• «Какое действие сделать главным на сайте?» — «Написать в Telegram».
• «Есть ли важные детали, которые стоит сообщить гостям?» — «Опыт тренеров» и свой ответ с ценами разового занятия и абонемента.

Структура до оплаты

Перед сборкой веб-дизайнер показал план: девять разделов от первого экрана до контактов, «молочные фоны, пудрово-розовый акцент», шрифты Cormorant Garamond и Manrope и четыре картинки с описанием каждой. Всё это можно поменять в «Структуре» ещё до оплаты.

После кнопки «Утвердить и собрать сайт» студия нарисовала картинки и через несколько минут показала готовую страницу.

Правка словами: новый цвет и расписание

Потом мы попросили сменить акцент и добавить расписание:

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

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

Из меню при этом пропал пункт «Атмосфера». Это не сбой — в меню лендинга помещается шесть пунктов, и код оставляет первые пять и последний, обычно «Контакты». Сам раздел с фото остался на странице.

На телефоне

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

Что не так и как поправить

Картинок в плане было четыре, а мест под фото на странице — шесть. Поэтому в галерее «Атмосфера» повторяются фото первого экрана и блока о подходе к занятиям, а справа внизу сетки осталось пустое место.

Для живого сайта лучше поставить свои снимки зала: включите «Править», кликните по картинке и нажмите «Своё фото» или «Из библиотеки». Замена бесплатная и сохраняется новой версией. Пустой угол — повод для правки блока словами, например «галерея без пустых мест»; её цена — на кнопке «Сделать».

Так же, кликом, мы потом переписали заголовок первого экрана и текст кнопки, а в «Структуре» ещё раз сменили акцент, подпись в меню и телефон — тоже без оплаты. Каждая такая правка — отдельная версия: у сайта их восемь, и любую можно открыть в списке версий над превью.

Второй пример: отзывы, которых не было

Для веломастерской «Спица» мы дали подробный бриф с припиской «Вопросов не задавай» и выбрали уровень «Эконом». Веб-дизайнер сразу собрал план и лендинг из семи разделов.

Потом мы попросили: «Добавь раздел с тремя короткими отзывами клиентов перед контактами». Отзывов у нас не было. Веб-дизайнер просьбу выполнил, но честно предупредил: «тексты будут нейтральными примерами без указания имён и неподтверждённых деталей».

Что дальше с сайтом

Кнопка «Скачать» отдаёт архив для любого хостинга статики: страницы, стили, скрипт, картинки и README с инструкцией. Публикации на домене Seaframe пока нет — файлы загружают на свой хостинг. Если на сайте есть форма заявки, она показывает «Спасибо», но заявки никуда не отправляет: после выгрузки её подключают к сервису форм.

1. Расскажите о бизнесе

   Что делаете, для кого, город, контакты, главное действие посетителя и настроение. Выберите «Лендинг», «3 стр.», «5 стр.» или «Сколько нужно».

2. Ответьте на вопросы

   Варианты — кнопками, детали вроде цен — своим текстом.

3. Проверьте структуру и смету

   Разделы, стиль и картинки видны до оплаты; уровень — «Эконом», «Оптимум» или «Максимум».

4. Соберите сайт

   «Утвердить и собрать сайт» — цена в кредитах видна на кнопке до запуска.

5. Правьте

   Новые разделы и общий вид — словами в разговоре, тексты и фото — кликом в режиме «Править». Цвета и шрифты меняются бесплатно.

6. Скачайте архив

   и загрузите файлы на свой хостинг.