Что подготовить до старта
Бриф на одну-две страницы экономит недели переписки. В нём должно быть: чем занимается компания, кто покупает, какое действие вы ждёте от посетителя (заявка, звонок, заказ через Telegram, оплата через Click или Payme) и чем вы отличаетесь от конкурентов. Фраза «современно и минималистично» почти ничего не говорит дизайнеру, а «много воздуха, два цвета, крупные фото» — уже ориентир.
Контент важнее, чем кажется. Если макет рисуют под заглушки, то реальный заголовок на русском или узбекском окажется длиннее, и композиция поплывёт. Под настоящие тексты дизайн получается точнее.
- Логотип в векторе, фирменные цвета и шрифты, брендбук, если он есть
- Три-пять сайтов, которые нравятся, с пояснением, что именно: подача фото, плотность блоков, типографика
- Один-два сайта, которые не нравятся, и причина
- Черновики текстов хотя бы для главных страниц
- Реальные фото продукции, объектов, команды
- Список действий посетителя по важности
Разработка дизайна сайта: из каких этапов она состоит
Нормальный процесс идёт от общего к частному, и каждый этап закрывается вашим согласием. Менять структуру после утверждения дорого: вместе с ней приходится переделывать все страницы.
Количество кругов правок и порядок их передачи лучше прописать в договоре заранее. Это защищает и вас, и исполнителя.
- Концепция: главная или ключевая страница в одном-двух стилевых вариантах
- Утверждение направления
- Остальные шаблоны: каталог, карточка товара или услуги, контакты, блог
- Мобильная и планшетная версии
- UI-кит: кнопки, поля, карточки, состояния элементов
- Подготовка файлов для передачи в вёрстку
Как оценивать макеты, а не гадать «нравится или нет»
Вопрос «красиво?» ведёт к спору вкусов. Надёжнее пройти по короткому списку критериев.
- Понятно ли за пять секунд на первом экране, что вы предлагаете и кому
- Заметно ли главное действие на каждой странице
- Удобно ли читать: размер шрифта, контраст, длина строк
- Похож ли сайт на вашу компанию, а не на абстрактный шаблон
- Как страница выглядит на телефоне с настоящей длиной текстов
- Одинаково ли оформлены одинаковые элементы на всех страницах
Как давать правки
Собирайте комментарии в одном документе или прямо на макете и назначьте одного ответственного. Когда макет обсуждают пять человек с разными вкусами, получается компромисс, который не нравится никому. Покажите его нескольким людям из вашей аудитории: реакция клиента важнее мнения коллег.
Формулируйте задачу, а не решение. «Телефон в шапке не замечают» лучше, чем «сделайте телефон красным»: дизайнер выберет способ, который не сломает композицию. Правки вида «мне так больше нравится» без связи с целью сайта — главная причина затянувшихся проектов.
Фото, шрифты и читаемость
Дизайн держится на изображениях. Стоковые кадры узнаются, а настоящие фото могут оказаться хуже по качеству, и после запуска сайт будет выглядеть иначе, чем на согласовании. Запланируйте съёмку офиса, команды, продукции или объектов параллельно с дизайном и как можно раньше подставляйте реальные кадры в макеты.
Проверьте, что шрифты поддерживают кириллицу и узбекскую латиницу: буквы o‘ и g‘ нередко отображаются неверно. Следите за контрастом текста и фона, размером шрифта на телефоне, удобными для пальца кнопками. Не передавайте важное только цветом: ошибка в форме должна сопровождаться текстом.
Анимации оправданы, когда несут смысл: показывают нажатие или появление нового блока. Эффекты ради эффектов мешают читать и тормозят сайт на недорогих телефонах.
Что принять на выходе
Покажите макеты разработчику до утверждения. Он заметит решения, которые дорого реализовать или которые будут медленно работать, и не придётся упрощать дизайн уже на этапе вёрстки.
- Макеты всех согласованных страниц в десктопной и мобильной версиях
- UI-кит и стили: цвета, шрифты, отступы
- Экспортированные иконки и изображения
- Описание анимаций и состояний: нажатие, ошибка, пустой список
- Исходные файлы (например, Figma) в аккаунте вашей компании или с доступом для неё
- Сведения о лицензиях на шрифты и изображения
С чего начать
Если нужен сайт под ключ, дизайн и разработку удобнее вести в одной связке: тогда макеты не расходятся с реальностью. Если хотите обсудить свою задачу, напишите в markdev: разберём бриф, поможем определить объём работ и подскажем, с чего начать.
Частые вопросы
Зачем бриф, если у меня уже есть логотип?
Логотип показывает стиль, но не цели. Бриф объясняет, кто ваши клиенты, какое действие нужно от посетителя и чем вы отличаетесь от конкурентов. Без этого дизайнер угадывает приоритеты.
Сколько человек должны согласовывать макет?
Лучше один ответственный, который собирает комментарии в одном месте. Большой круг с противоположными вкусами превращает согласование в компромисс без чёткой логики.
Можно ли использовать стоковые фото в макетах?
На этапе концепции можно, но реальные фото стоит планировать сразу и подставлять в макеты как можно раньше, иначе готовый сайт будет отличаться от утверждённого.
Какие файлы нужно получить после завершения дизайна?
Макеты всех страниц для десктопа и телефона, UI-кит со стилями, иконки и изображения, описание анимаций и состояний, исходники с доступом для вашей компании.
Разберём вашу задачу бесплатно
Оставьте контакт — за 15 минут созвона покажем, где теряются заявки и что сделать в первую очередь.