Требования к дизайн-макету сайта: полное руководство 2026
Как изменились требования к дизайн-макетам
2025 год кардинально изменил подход к созданию макетов сайтов. Мы в студии Павла Сайка начинали работу с Photoshop, как и большинство веб-студий. Но индустрия не стоит на месте — сейчас мы полностью перешли на Figma, и вот почему.
Что изменилось:
| Было (Photoshop) | Стало (Figma) |
|---|---|
| Статичные макеты PSD | Интерактивные прототипы |
| Ручная нарезка элементов | Автоматический экспорт |
| Отдельные файлы для версий | Версионность в облаке |
| Сложная передача разработчику | Developer handoff в 1 клик |
| Работа по очереди | Совместная работа в реальном времени |
Почему это важно для заказчика:
- Быстрее видите изменения.
- Можете оставлять комментарии прямо в макете.
- Доступ к макету 24/7 с любого устройства.
- Прототип показывает, как будет работать сайт.
- Экономия времени = экономия бюджета.
Эволюция требований: от PSD к компонентному подходу
Исторический контекст (для интересующихся)
Как мы работали в Photoshop (2010–2020):
- Слои и группы вместо компонентов.
- Размеры макета: 420px, 980px, 1200px, 1440px+.
- Save for Web для каждой картинки
- Отдельные PSD для каждой страницы.
- Гайды и линейки для выравнивания.
Что было сложно:
- Изменить элемент на 50 страницах.
- Показать интерактивность.
- Синхронизировать работу команды.
- Поддерживать консистентность.
Современные требования 2025–2026
Теперь мы работаем по новым стандартам, которые делают процесс прозрачным и эффективным...
1. Современные технические требования
Основные параметры:
- Сетка: 12-колоночная система (1920px, 1440px, 1280px, 768px, 375px).
- Отступы: кратные 8px для консистентности.
- Типографика: системные шрифты + веб-шрифты с fallback.
- Цветовая схема: HEX/RGB + переменные для тёмной темы.
- Экспорт ассетов: SVG для иконок, WebP/AVIF для изображений.
Адаптивность и доступность:
- Mobile-first подход.
- Touch-friendly элементы (минимум 42x42px).
- Контрастность по WCAG 2.1 (AA минимум).
- Состояния элементов (hover, active, focus, disabled).
2. Работа в Figma
Организация макета:
📁 Project Name ├── 🎨 UI Kit / Design System │ ├── Colors & Typography │ ├── Components │ └── Icons & Assets ├── 📱 Mobile (375-767px) ├── 💻 Desktop (1440px) └── 🔄 Prototypes & Flows
Обязательные настройки:
- Auto Layout для всех компонентов.
- Компонентная система с вариантами.
- Правильная иерархия слоёв.
- Консистентное именование.
- Использование стилей (цвета, текст, эффекты)
3. Чек-лист для дизайнера
Перед началом работы:
Компоненты и элементы:
Страницы (минимум):
4. Чек-лист для разработчика
Проверка макета:
Техническая готовность:
5. Чек-лист для заказчика
Что проверить в макете:
Вопросы дизайнеру:
6. SEO-требования к макету
Структура и иерархия:
- Чёткая иерархия заголовков (H1-H4).
- Breadcrumbs на внутренних страницах.
Контент и элементы:
- Место для SEO-текстов (минимум 300 слов).
- Внутренняя перелинковка.
- Кнопка «Поделиться».
- Кнопка «Наверх».
- Телефон.
- Email.
- Мессенджеры.
- Время/график работы.
- Иноформация о юрлице.
7. Передача макета в разработку
Figma Developer Handoff:
- Предоставить доступ с правами просмотра.
- Настроить экспорт ассетов.
- Добавить комментарии к сложным элементам.
- Создать интерактивный прототип.
- Подготовить UI Kit отдельным файлом.
Дополнительные материалы:
- Гайдлайн по использованию компонентов.
- Таблица с типографикой.
- Палитра цветов с применением.
- Описание анимаций и переходов.
Частые ошибки и как их избежать
Почему в макете обязательно показывать все состояния кнопок и ссылок?
Ошибка: Дизайнер показывает только базовое состояние элементов.
Последствия: Разработчик придумывает hover и active состояния сам, что приводит к несоответствию ожиданиям и дополнительным правкам.
Решение: В Figma создавайте компоненты с вариантами для каждого состояния: Default, Hover, Active, Focus, Disabled, Loading. Это займёт 30 минут, но сэкономит дни на правках.
Можно ли использовать Lorem ipsum в макете?
Ошибка: Использование идеального placeholder-контента вместо реальных данных.
Последствия: Дизайн ломается при добавлении длинных заголовков, карточки "едут" при разном объёме текста, изображения нестандартных пропорций не помещаются.
Решение: Запросите реальный контент у клиента. Тестируйте макет с текстами разной длины. Используйте Auto Layout в Figma для гибких компонентов. Предусмотрите состояние "Нет изображения".
Достаточно ли сделать макет для десктопа и мобильной версии?
Ошибка: Макет только для 1920px и 375px без промежуточных состояний.
Последствия: Сайт плохо выглядит на планшетах и ноутбуках, появляется горизонтальная прокрутка, пространство используется неоптимально.
Решение: Создавайте макеты для основных breakpoints: 375, 768, 1024, 1440, 1920px. Используйте Constraints в Figma. Документируйте поведение элементов между breakpoints.
Почему нельзя делать слишком кастомные UI-элементы?
Ошибка: Создание уникальных элементов там, где подошли бы стандартные (например, кастомный календарь или селект).
Последствия: Стоимость разработки увеличивается в 2-3 раза, возникают проблемы на мобильных устройствах и с доступностью, пользователи путаются в интерфейсе.
Решение: Используйте проверенные UI-паттерны. Кастомизируйте стандартные элементы стилями, а не функционалом. Каждое отклонение от стандартов должно быть обосновано.
Можно ли просто отправить ссылку на макет в Figma?
Ошибка: Макет передаётся без документации и пояснений.
Последствия: Разработчик интерпретирует дизайн по-своему, теряются микровзаимодействия, возникает множество правок на финальных этапах.
Решение: Добавьте комментарии к сложным элементам прямо в Figma. Создайте страницу с UI Kit. Опишите все анимации. Проведите онбординг для разработчика. Будьте на связи.
Влияет ли дизайн на скорость загрузки сайта?
Ошибка: Использование тяжёлых изображений и множества декоративных элементов без учёта производительности.
Последствия: Медленная загрузка (особенно на мобильных), плохие показатели Core Web Vitals, потеря позиций в Google, высокий показатель отказов.
Решение: Оптимизируйте изображения на этапе дизайна. Используйте SVG для иконок. Минимизируйте декоративные элементы. Предусмотрите lazy loading. Тестируйте на слабых устройствах.
Что делать, если заказчик настаивает на плохих решениях?
Ошибка: Молча выполнять все пожелания без объяснения последствий.
Последствия: Неэффективный сайт, недовольные пользователи, репутационные риски для студии.
Решение: Аргументируйте с цифрами и примерами. Покажите, как решение повлияет на конверсию. Предложите А/Б тестирование. Зафиксируйте свои рекомендации письменно. Иногда лучше отказаться от проекта, чем делать заведомо плохой продукт.
Полезные ресурсы:
- Figma Community (шаблоны и UI киты).
- Google Material Design Guidelines.
- Apple Human Interface Guidelines.
- Checklist Design (чек-листы компонентов).
- A11y Project (доступность).
А как же ширины от 1200px 1979px - как будет смотреться дизайн на таких экранах?
"Каждый элемент должен находитЬся в одном слое, названнОм … именем"
"Важно: ширина макета – 1980 пикселей. 1000, 980 пикселей и другие размеры не принимаются." — вот этот пункт поясните, пжлста. Откуда число 1980? Почему?
"для элементов, содержащих текст" (запятую пропустили)
"Для текстовых элементов обязательно указывать шрифт и его размер". Размер шрифта у пунктах в «Фотошопе» не коррелируется с пунктами, пикселями или em в верстке. Это только наглаз
2. Исправим
3. Потому что это для тех дизайнов, где фон не паттерн или моноцвет, а иллюстрация или фотография
4. Исправим
5. Надо поправить, конечно в макете размер шрифта должен быть в px
трасформаций - трансформаций
следуюших - следующих
:)
Где-то видел примочки типа выдели ошибку и нажмите Ctrl-D или еще как и админ получи сообщение об ошибке.
Тем более, сделать это ему не сложно