Дизайн сайта: как поставить задачу и принять результат

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

Что подготовить до старта

Бриф

Чем занимается компания, кто клиенты, какие задачи решает сайт, чем вы отличаетесь от конкурентов, какие действия ждёте от посетителей.

Материалы бренда

Логотип в векторе, фирменные цвета и шрифты, брендбук, если он есть. Без них дизайнер будет угадывать, и результат может разойтись с остальными материалами компании.

Референсы

Несколько сайтов, которые вам нравятся, с пояснением, что именно нравится: подача фото, плотность информации, типографика. Отдельно — что не нравится. Это экономит больше времени, чем любое описание словами.

Контент

Реальные тексты, фото товаров, объектов и команды. Дизайн под настоящий контент получается точнее, чем под заглушки.

Этапы работы

1. Дизайн-концепция: главная или ключевая страница в одном-двух вариантах стиля
2. Утверждение направления
3. Дизайн остальных шаблонов страниц
4. Мобильные и планшетные версии
5. UI-кит: кнопки, поля, карточки, состояния элементов
6. Подготовка к передаче в вёрстку

Как оценивать макеты

Вместо «нравится или нет» задайте вопросы:

• Понятно ли за пять секунд на первом экране, что предлагают и кому?
• Видно ли главное действие на каждой странице?
• Удобно ли читать текст: размер шрифта, контраст, длина строк?
• Похож ли сайт на вашу компанию или на абстрактный шаблон?
• Как страница выглядит на телефоне с реальной длиной текстов?
• Согласован ли стиль на всех страницах?

Показывайте макеты нескольким людям из вашей аудитории, а не только руководству. Реакция клиентов важнее мнения коллег.

Как давать правки

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

Что принимать на выходе

• Макеты всех согласованных страниц в десктопной и мобильной версиях
• UI-кит и стили: цвета, шрифты, отступы
• Экспортированные иконки и изображения
• Описание анимаций и интерактивных состояний
• Исходные файлы с доступом для вашей компании

Типичные ошибки

Согласование дизайна большим кругом людей с противоположными вкусами. Трендовые эффекты, которые мешают читать и замедляют сайт. Дизайн только для большого экрана. Шрифты без поддержки кириллицы или узбекской латиницы с буквами o‘ и g‘ — проверьте, как они отображаются.

Связь с разработкой

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

Доступность и читаемость

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

Фотографии и иллюстрации

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