Содержание
Работа над дизайном сайта начинается не с палитры, а с вопросов: кто придёт на страницу, что ему нужно сделать и что может помешать. Ответы превращаются в прототип, прототип — в концепцию первого экрана, концепция — в макеты всех шаблонов. Ниже — что можно сделать с вашей стороны, чтобы проект шёл быстрее и без переделок. Для магазинов, лендингов, корпоративных сайтов и отдельных отраслей есть свои страницы: там разобраны первый экран и типичные ошибки интерфейса.
Бриф: что обсудить до начала работы
Хороший бриф короче, чем кажется. Нам важны четыре вещи: кто ваши клиенты и чем разные группы отличаются друг от друга, какое действие на сайте главное, с кем вас сравнивают и что уже известно о поведении посетителей. Если сайт работает, последний пункт закрывают данные Метрики: на каких страницах уходят, где бросают формы, с каких устройств заходят. Список конкурентов нужен не для копирования: по нему видно, какие решения посетитель уже встречал и чем вы можете отличаться.
Заранее стоит собрать то, что станет содержимым страниц: список услуг или товаров, цены, фотографии, документы, ссылки на отзывы. Макет, нарисованный под настоящий контент, почти не приходится перекраивать при вёрстке, а спорные места видны ещё на прототипе.
Что такое шаблон и почему считают по ним
Стоимость и сроки считают не по числу страниц, а по числу уникальных шаблонов. Шаблон — это тип страницы: главная, услуга, статья, контакты. Если у компании сорок услуг, их страницы собирают из одного-двух шаблонов, и рисовать сорок отдельных страниц не нужно. Предложения по услугам дизайна сайтов удобнее сравнивать по одинаковому списку шаблонов: так видно, за что именно просит деньги каждый исполнитель.
Список шаблонов составляем на брифе и уточняем на прототипе. Часто выясняется, что редкие страницы можно собрать из блоков уже нарисованных шаблонов, а одной странице нужен собственный макет — например, калькулятору или сравнению тарифов.
Как выбрать стиль и не утонуть в примерах
Подборки красивых сайтов вдохновляют, но выбирать по ним рискованно: чужое решение работало на другой контент и другую аудиторию. Вместо «сделайте как здесь» полезнее объяснить, что именно нравится: крупные заголовки, много воздуха, фотографии людей, спокойные цвета. Так мы поймём направление и не станем копировать чужую работу.
С названиями стилей та же история. Минимализм, брутализм или стекло с размытием удобны, чтобы договориться о настроении, но не отвечают на главный вопрос: помогает ли оформление прочитать предложение и нажать нужную кнопку. Модный приём, который мешает читать, уходит первым.
Стиль складывается из нескольких решений: пара шрифтов, основной и акцентный цвет, характер фотографий и иллюстраций, форма кнопок и карточек. Их фиксируем на концепции первого экрана и дальше без причины не пересматриваем. Если фирменный стиль уже есть, переносим его в интерфейс.
Черновые варианты иллюстраций иногда получаем с помощью нейросетей. Это инструмент, а не автор: итоговую графику рисует и проверяет дизайнер, права на неё передаём вам вместе с исходниками.
Редизайн без лишнего риска
Если сайт уже приводит посетителей из поиска, редизайн затрагивает не только внешний вид. Поисковые системы оценивают страницы по содержанию и адресам, поэтому до прототипа составляем список страниц, которые нельзя потерять, и сохраняем их тексты и заголовки. Новые разделы проектируем так, чтобы старые адреса можно было перенаправить на близкие по смыслу страницы.
Второй риск — привычки постоянных клиентов. Если люди годами заказывают через одну форму, её не стоит прятать ради новой идеи. В прототипе отмечаем, какие сценарии остаются на прежних местах, а какие меняем и почему. Иногда разумнее обновлять сайт частями: сначала первый экран и формы, потом каталог и статьи. Перед запуском старую и новую версии сверяют по списку: все ли страницы на месте, работают ли формы и цели в Метрике.
Под какую платформу рисуем
Разработка дизайна сайта зависит от того, на чём его соберут. На Tilda часть блоков берётся из библиотеки, а нестандартные экраны делают в Zero Block. Готовая тема CMS задаёт сетку и набор модулей, и макет выгоднее строить внутри этих ограничений. Собственная разработка даёт свободу, но требует полного UI-кита со всеми состояниями элементов.
Платформу лучше знать до прототипа. Если её выберут позже, закладываем решения, которые одинаково переносятся на любую систему, а спорные места обсуждаем с разработчиком ещё до передачи.
Дизайн, который не мешает продвижению
Мы SEO-агентство, поэтому смотрим на страницы ещё и глазами поисковой системы. Несколько решений закладываем с самого начала:
- заголовки и цены — текстом, а не частью картинки;
- на страницах услуг и категорий есть место для описания, а не только для баннера;
- хлебные крошки и понятное меню показывают, где находится страница;
- фото и шрифты подобраны так, чтобы страница быстро загружалась на телефоне;
- важный текст виден сразу, а не спрятан в свёрнутые вкладки.
Такие решения не делают продвижение автоматическим, но убирают препятствия, которые иначе пришлось бы исправлять после запуска.
Контраст и размеры: проверка цифрами
Удобство для людей со слабым зрением проверяется не на глаз. Критерий уровня AA стандарта WCAG 2.2 требует контраста обычного текста и фона не меньше 4,5:1, крупного — не меньше 3:1. Российский ГОСТ Р 52872-2019 опирается на рекомендации WCAG 2.1 и задаёт тот же порог 4,5:1. Бледно-серые подписи на белом фоне, привычные для модных интерфейсов, эту проверку обычно не проходят.
Размеры тоже считаются: по WCAG 2.2 цель для нажатия — не меньше 24 на 24 CSS-пикселя, если рядом нет достаточного свободного места. Контраст каждой пары цветов проверяем в UI-ките, а кнопки для телефона рисуем с запасом.
Что происходит после сдачи дизайна
Пока сайт не свёрстан, работа дизайнера не закончена. У разработчика появляются вопросы: как ведёт себя меню при длинном названии, что показать, если у товара нет фото, как выглядит ошибка в форме. Чем полнее UI-кит и спецификация, тем их меньше, но совсем без вопросов не обходится.
Поэтому по договорённости подключаемся к вёрстке: отвечаем разработчику и сверяем свёрстанные страницы с макетами на разных экранах. Расхождения собираем списком с пометкой, что критично, а что можно поправить позже. Так решения, за которые вы заплатили, доходят до сайта без упрощений.
Как принимать макеты
Приёмка — отдельная работа, и её удобно разложить по шагам:
- телефонную версию смотрите с телефона, а не на мониторе;
- проверяйте страницы на настоящих текстах и ценах, а не на заглушках;
- пройдите главный сценарий целиком — от первого экрана до отправленной заявки;
- отметьте, что трудно прочитать: мелкий шрифт, бледный текст, кнопки, которые не похожи на кнопки;
- собирайте замечания в одном месте и от одного человека, чтобы правки не противоречили друг другу.
Адаптивный дизайн сайта проверяют так же внимательно, как компьютерную версию: на маленьком экране меняется порядок блоков, и то, что было заметно справа, может уехать далеко вниз.
Тем, кто хочет заказать дизайн сайта в Екатеринбурге, не обязательно ездить на встречи: бриф, показы этапов и сбор правок проходят онлайн, а макеты лежат в общем файле Figma.
