Сначала выясните, зачем человек открыл страницу
Посетитель из поиска обычно приходит с конкретным вопросом. Ему нужно узнать, ремонтируете ли вы его оборудование, работаете ли в его городе, сколько ждать и что потребуется для расчёта. Человек по рекомендации уже слышал название компании и проверяет, можно ли ей доверять. Одинаковый первый экран для этих ситуаций стоит хотя бы обсудить.
До макетов запишите несколько реальных сценариев. Например: «руководитель производства ищет подрядчика на обслуживание и должен понять состав работ, ограничения и порядок обращения». Здесь сразу появляются требования к странице: понятное название услуги, описание процесса, подтверждения опыта, форма с полезными полями. Слайдер с общими лозунгами этот маршрут не объясняет.
Спросите у продаж, какие вопросы постоянно задают по телефону. Посмотрите обращения и поисковые запросы. Если сайт уже работает, изучите страницы входа и моменты, где люди прекращают действие. Вкусы собственника тоже учитывают, но они не заменяют эти сведения. Дизайнеру нужен материал о покупателе, иначе он будет угадывать.
Прототип экономит деньги на спорах о цвете
Прототип показывает, какая информация находится на странице и как человек между ней перемещается. На этом этапе вполне хватает схемы без фотографий и декоративных деталей. Проверьте, можно ли пройти путь от первого вопроса до обращения. Если порядок блоков не работает, перекрашивание кнопки мало поможет.
Для учебного примера возьмём сайт монтажной компании. Перед формой посетителю нужны условия выезда, виды оборудования, порядок расчёта и подтверждения квалификации. Когда форму ставят раньше этих сведений, человека просят довериться компании вслепую. Прототип позволяет заметить такую просьбу до разработки.
Подготовьте содержание хотя бы для основных страниц. Заголовок из трёх слов и настоящий заголовок из двенадцати занимают разное место. Таблица характеристик ведёт себя иначе, чем красивый прямоугольник с надписью «таблица». Макет с реальными материалами показывает будущую страницу гораздо точнее.
Иерархия: куда смотреть и что делать дальше
Хорошая визуальная иерархия отвечает на простые вопросы: что здесь главное, какие сведения относятся друг к другу и какое действие доступно сейчас. Для этого работают размер текста, расстояния, контраст, положение элементов. Когда всё одинаково яркое, посетителю приходится самому назначать важность каждому блоку.
У страницы должен быть осмысленный основной шаг. Для дорогой услуги это часто запрос расчёта или разговор о задаче. Для товара, который покупают сразу, нужен ясный путь в корзину. Рядом допустимы дополнительные действия: скачать характеристики, посмотреть пример, задать вопрос. Но пять равнозначных кнопок заставляют разбираться в вашей внутренней логике.
Читать мелкий серый текст трудно даже человеку с хорошим зрением, особенно на улице. Проверьте контраст, длину строк и привычный размер шрифта на реальном телефоне. Аккуратность страницы не должна зависеть от того, что посетитель щурится. В этой части дизайн очень приземлённый: информацию нужно увидеть.
Мобильная версия заслуживает отдельного разговора
Уменьшенная картинка большого экрана редко становится удобным мобильным сайтом. На телефоне меняют порядок блоков, размещение меню, представление таблиц, длину формы. Важные условия должны читаться без постоянного увеличения и горизонтального скролла. Длинный заголовок нельзя обрезать только ради красивой композиции.
Попросите показать основные страницы на узком экране, включая длинные названия и неудобные случаи. Что происходит с карточкой, если название товара занимает несколько строк? Остаётся ли видимой подпись поля после ввода? Можно ли закрыть окно, когда клавиатура перекрыла половину экрана? Эти вопросы находят проблемы быстрее, чем фраза «всё адаптивно».
Состояния меню тоже входят в дизайн. Продумайте открытие, закрытие, возврат к странице и доступность вложенных разделов. Для сложного каталога полезно проверить поиск и фильтры отдельно. Люди пользуются сайтом пальцами, часто одной рукой и между другими делами. Макет должен выдерживать такую жизнь.
Форма: проверьте весь разговор с посетителем
Каждое поле должно иметь понятную причину. Для предварительного обсуждения проекта обычно достаточно контакта и описания задачи. Если вы просите бюджет, объясните, зачем он нужен и допустим ли приблизительный ответ. Длинная анкета подходит для подробного брифа, но на первом знакомстве её лучше предлагать осознанно.
Нужны макеты пустой формы, заполненной формы, ошибки и успешной отправки. При ошибке человек должен понять, что исправить, и сохранить уже введённое. После отправки ему нужны сведения о следующем шаге. Надпись «готово» оставляет слишком много догадок: дошла ли заявка, кто ответит, требуется ли ещё что-то?
W3C рекомендует связывать подписи с полями формы. Это помогает человеку понять назначение поля и делает интерфейс доступнее для вспомогательных технологий. Исчезающий пример внутри поля не заменяет всю эту работу. Если заявка важна для бизнеса, обсуждать форму стоит с той же внимательностью, что и первый экран.
Как связать дизайн сайта с SEO и GEO
Поисковым страницам нужны собственные адреса и содержание. Когда все услуги спрятаны в одном интерактивном блоке, у каждой темы нет самостоятельной страницы. Пользователю трудно поделиться нужным разделом, а команде сложнее развивать поисковый спрос. Поэтому структура и дизайн обсуждаются вместе.
Важные сведения должны существовать в текстовом виде. Изображение с ценами или условиями выглядит аккуратно, но его трудно обновлять и читать с помощью экранного диктора. Поисковым и ИИ-системам тоже нужен доступный материал. Заголовки, ссылки, понятные подписи и содержательные страницы закладывают до декоративной упаковки.
GEO касается того, как информация компании появляется в ответах ИИ. Дизайн помогает здесь через понятную подачу условий, фактов, сравнений и ограничений. FAQ из десятков пунктов мало поможет, если в нём нет вопросов покупателей. SEO на этапе разработки разбираем подробно в отдельной статье.
Что передать разработчику вместе с макетами
Одних изображений экранов недостаточно для устойчивой работы. Нужны правила повторяющихся элементов: кнопок, ссылок, полей, карточек, заголовков и расстояний. Стоит описать, какие элементы меняются на разных экранах, а какие сохраняют размер. Состояния наведения и фокуса тоже относятся к интерфейсу.
Отдельно перечислите поведение сложных блоков. Где открывается подробная информация? Меняется ли адрес при выборе раздела? Как ведёт себя длинный список? Какие поля обязательны? Если ответа в материалах нет, разработчик примет решение сам. Иногда удачно, иногда совсем иначе, чем представлял заказчик.
Зафиксируйте ограничения изображений и текста для будущего редактора. Человек, который добавляет новости, не должен угадывать допустимую длину заголовка и формат обложки. Хороший комплект передачи помогает сохранить качество страницы после десятой правки, когда дизайнер уже занят другим проектом.
Принимайте макет по задачам, а замечания делайте проверяемыми
Предложите человеку, который не участвовал в проекте, найти нужную услугу, условия и способ обращения. Понаблюдайте, где он остановился. Такой короткий разбор не заменяет исследование, но обнаруживает очевидную путаницу. Подсказка «там же кнопка справа» во время проверки портит результат: посетитель вашей подсказки не получит.
Замечание «слишком скучно» трудно превратить в действие. «Карточки услуг одинаковые, непонятно, чем они отличаются» уже указывает проблему. «Форма потерялась после длинного списка» позволяет обсудить порядок страницы и дополнительный переход. Описывайте затруднение, а затем выбирайте решение с командой.
В «Горячо!» разработку сайта начинаем с задачи бизнеса, структуры и содержания, затем готовим адаптивный дизайн и проверяем путь к обращению. Покажите сайт или расскажите о новом проекте: определим, какие страницы и сценарии нужно проработать. На первом разговоре полезнее обсудить покупателя и материалы компании, чем спорить, какой цвет сейчас модный.
Частые вопросы
Что входит в дизайн сайта?
Структура и прототипы, визуальная система, основные страницы, мобильные варианты, состояния форм и интерактивных элементов, материалы для разработки. Состав зависит от проекта и фиксируется в договорённостях.
Можно ли начать с дизайна главной страницы?
Да, если уже понятны аудитория, услуги, структура и содержание. Главная помогает выбрать визуальное направление, но по ней нельзя оценить удобство каталога, страницы услуги и формы.
Как понять, что дизайн готов к разработке?
Проверены основные сценарии, реальные тексты и узкие экраны, согласованы повторяющиеся элементы, ошибки и успешные действия. Разработчику понятны правила поведения интерфейса.
Проверить первоисточники
Креативная группа «Горячо!»
Направление обучения курирует Сергей Перекатнов, управляющий партнёр и доцент СГТУ имени Гагарина Ю. А. Программу для конкретной команды обсуждаем после знакомства с её задачей.
Обучение в «Горячо!»