Разработка
С чего начать создание сайта: бриф, структура и SEO до дизайна
Подготовьте список страниц, один полный пример содержания и сценарии работы сайта. Добавьте ответственных и критерии готовности — с этим комплектом проще обсуждать дизайн и разработку.
До начала дизайна полезно подготовить не длинное описание желаемого сайта, а несколько конкретных материалов: список страниц, содержание для них и сценарии работы. С ними проще оценить объем проекта, выбрать функции и согласовать результат.
Ниже — практический комплект для владельца бизнеса. Его можно собрать в общей папке и таблице, а затем передать дизайнеру и разработчику. Примеры относятся к условной мастерской по ремонту кофемашин.
Опишите, какую работу сайт должен выполнять
Представьте обычное обращение клиента. Человек хочет узнать, ремонтируете ли вы его модель, как передать технику и что потребуется для оценки. Сайт должен помочь получить эти ответы и связаться с мастерской.
Запишите три наиболее частых сценария. Для каждого укажите начало, нужную информацию и завершающее действие. Например: «найти ремонт своей модели → прочитать условия диагностики → отправить модель и описание неисправности». Это уже основа для страницы и формы.
Отдельно перечислите действия команды после обращения. Если заявки принимает администратор, ему должны приходить нужные сведения. Если стоимость рассчитывает специалист, посетителю стоит объяснить, когда и как он получит ответ.
Составьте таблицу будущих страниц
Начните с реальных направлений работы. Необязательно сразу продумывать каждый экран: достаточно понять, какие самостоятельные предложения и полезные разделы будут на сайте.
| Страница | Содержание | Действие посетителя |
|---|---|---|
| Ремонт кофемашин | Типы оборудования, прием техники, диагностика, условия ремонта. | Отправить модель и описание проблемы. |
| Обслуживание для офисов | Формат обслуживания, выезд, состав работ, параметры расчета. | Обсудить обслуживание оборудования. |
| Приемный пункт | Адрес, часы работы, маршрут и контакт. | Построить маршрут или позвонить. |
| Подготовка к передаче техники | Что взять с собой и какие сведения сообщить. | Подготовиться к визиту. |
Добавьте к таблице четыре рабочих столбца: ответственный за материал, текущая готовность, предполагаемый адрес страницы и ссылки на исходники. Так сразу видно, какие разделы можно проектировать, а где еще нужно собрать информацию.
Учтите поисковые задачи до макета
Для каждой коммерческой страницы выпишите формулировки, которыми клиент описывает услугу. Сопоставьте их с предложением компании. Страница ремонта и инструкция по очистке оборудования отвечают на разные потребности; им могут понадобиться разные содержание и действие.
Планируйте навигацию вместе со страницами. Важная услуга должна быть доступна из понятного раздела сайта. Согласно документации Google о ссылках, ссылки в виде элемента a с адресом в href помогают поисковику находить страницы. Название ссылки должно объяснять, куда она ведет.
В таблице страниц можно сразу оставить поле для title и короткого описания. Окончательную формулировку удобнее написать после подготовки содержания. Тогда название в поиске будет соответствовать тому, что человек увидит на странице.
Подготовьте материалы в удобном для работы виде
Разделите исходники по страницам и дайте файлам понятные имена. Вместо нескольких архивов из переписки создайте одну папку с актуальными версиями. Для каждого изображения подпишите, что на нем показано и где оно должно использоваться.
- Тексты: описание услуг, условия, контакты и ответы на частые вопросы.
- Фотографии: исходные файлы достаточного размера, включая вертикальные и горизонтальные варианты.
- Фирменные материалы: логотип, доступные начертания шрифта, цвета и примеры оформления.
- Данные: перечень товаров или услуг, характеристики, цены и правила их обновления.
- Рабочие сообщения: текст после отправки формы, уведомление сотруднику и ответ клиенту, если он предусмотрен.
Проверьте содержание на одном полном примере. Если есть каталог, подготовьте один товар со всеми характеристиками и фотографиями. Если есть услуги — одну страницу с реальными условиями. На таком материале проще заметить, чего не хватает в остальных разделах.
Опишите функции через проверяемые сценарии
Слово «форма» может означать разные задачи. Уточните, какие поля нужны, куда поступает сообщение, можно ли приложить фотографию и что видит посетитель после отправки. То же относится к записи, поиску по каталогу, оплате и личному кабинету.
| Функция | Вопросы для задания | Как принять работу |
|---|---|---|
| Обращение с фотографией | Форматы и размер файла, обязательные поля, получатель. | Сообщение и изображение доходят, посетитель видит результат отправки. |
| Запись на время | Откуда берутся свободные интервалы, как подтверждается запись. | Выбранное время корректно появляется у клиента и администратора. |
| Редактирование цены | Кто меняет цену и где она повторяется. | Сотрудник обновляет данные по инструкции, связанные страницы показывают актуальное значение. |
Выбор системы управления делайте после этого списка. Важны обычные операции команды: добавить услугу, заменить фотографию, обновить цену, посмотреть обращение. Попросите показать эти действия на примере вашего содержания.
Заранее определите готовность к запуску
Составьте короткий приемочный список по пользовательским действиям. В него должны попасть чтение условий на телефоне, переходы между страницами, отправка форм и получение сообщений. При редизайне дополнительно составьте соответствие старых и новых адресов для технической настройки переходов.
Для удобства чтения проверьте контраст, масштабирование текста и управление клавиатурой. У полей формы должны быть понятные подписи: руководство W3C объясняет, как связать подпись с элементом ввода. Это помогает посетителю понимать назначение каждого поля.
На финальной проверке откройте сайт на телефоне и компьютере. Убедитесь, что картинки загружаются подходящего размера, текст не обрезан, кнопки доступны, а форма сообщает об ошибках понятным языком. Скорость загрузки тоже стоит включить в критерии приемки, а не откладывать до рекламной кампании.
Что получить вместе с готовым сайтом
Сохраните доступы к домену, хостингу, системе управления и аналитике у ответственного со стороны бизнеса. Добавьте инструкцию по обновлению контента и список настроенных интеграций. Назначьте человека, который будет поддерживать цены, контакты и условия в актуальном состоянии.
В результате подготовки у вас будет понятный комплект: сценарии, список страниц, материалы, функциональное задание и критерии приемки. С ним можно обсуждать разработку сайта предметно. Для содержания отдельного раздела используйте план страницы услуги.
Вопросы перед разработкой
Можно начать, если готова только часть текстов?
Да. Для старта подготовьте один полноценный пример каждого важного типа страницы и договоритесь, кто собирает оставшиеся материалы. План запуска должен учитывать готовность содержания.
Нужен ли большой сайт сразу?
Размер первого выпуска зависит от задач бизнеса. Можно начать с основных услуг и необходимых контактов, предусмотрев понятное расширение структуры. Отложенные разделы внесите в отдельный список.
Что важнее в референсах?
Подпишите, что именно вам нравится: размер заголовков, работа меню, карточки, фотографии или подача условий. Такие пояснения полезнее общей просьбы сделать похожий сайт.
Когда подключать SEO-специалиста?
Когда обсуждаются страницы, их адреса, содержание и навигация. Эти решения влияют на последующую работу с поиском, поэтому их удобно согласовать до окончательных макетов.
Поделиться статьей