Как мы делаем сайт: от брифа до запуска.

Работа над сайтом закипает задолго до того, как кто-то договорится, зачем он нужен. Нужно собрать референсы, обсудить макеты, оценить функции. Нам помогает начать с вопроса попроще: что посетитель сможет сделать, когда сайт заработает?

В 3tf исследование, дизайн, разработка и маркетинг идут одним процессом. Ниже — как мы превращаем его в бриф на сайт и какие решения стараемся принять, пока разработка не набрала ход.

Сначала задача, потом бриф

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

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

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

Пропишите решения, которые принимает посетитель

Прежде чем решать, сколько будет страниц, выпишите вопросы, на которые клиент ищет ответ. Что это за услуга? Для кого она? Что в неё входит? Почему ей можно доверять? Что будет дальше?

Наш проект для SolTech — пример того, как контент задаёт структуру. Сайт объясняет три коммерческие модели установки солнечных панелей на крыше. Когда варианты стоят рядом, посетителю проще понять, о чём говорить с компанией. Структура страницы повторяет реальный выбор, который предлагает бизнес.

Для своего брифа попробуйте дописать для каждой задуманной страницы фразу: «После этой страницы посетитель сможет…» Если у двух страниц продолжение одинаковое, проверьте, нужны ли обе.

Проектируйте на реальном контенте

Макет, заполненный «рыбой», прячет все сложности. Настоящие названия услуг длиннее. Настоящие фотографии неудобно кадрируются. Сравнение, которое на эскизе выглядит простым, может потребовать пояснений, когда дойдёт до формулировки условий.

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

Мобильную версию смотрите одновременно с десктопной. Длинному заголовку или плотному сравнению нужно отдельное решение для телефона — простого уменьшения почти никогда не хватает.

Продумайте путь целиком

Сайт не заканчивается на нажатии кнопки. Форме нужны понятные подписи, сообщения об ошибках, которые объясняют, что пошло не так, и подтверждение, что заявка получена. А тем, кто её получает, нужно достаточно контекста, чтобы ответить.

В руководстве W3C по формам объясняется, почему подписи, инструкции и обратная связь важны для доступности форм. Для нас эти детали так же важны для удобства сайта, как и визуальный дизайн.

Перед запуском мы проходим сайт глазами посетителя: навигация, описание услуг, заявка, подтверждение и то, как заявку принимают внутри компании. Ещё проверяем управление с клавиатуры, узкие экраны, ссылки и загрузку. Работающая страница даёт для проверки гораздо больше, чем один скриншот.

Запускайте сайт с планом, что делать дальше

Ещё до запуска решите, по каким данным вы поймёте, что сайт справляется со своей задачей. Количество отправленных форм — только начало. Подходит ли бизнесу каждая заявка — отдельный вопрос, и кто-то должен фиксировать ответ.

Договоритесь, кто отвечает за обновления, как сообщать о проблемах и когда пройдёт первый разбор. А следующее улучшение выбирайте по тому, что на деле делают посетители и отдел продаж.

С этим у нас будет конкретная основа для работы. Можно посмотреть, как мы работаем, или заполнить бриф проекта, опираясь на те же вопросы.