Дизайнер и верстальщик — это одна команда. Но часто между ними возникает конфликт: дизайнер сдал макет, верстальщик получил головную боль. В этой статье разберём типичные ошибки дизайнеров, которые усложняют вёрстку, и покажем как их избежать.
1. Неправильный цветовой профиль
Самая коварная ошибка, которую замечают только когда сайт уже свёрстан. Дизайнер создаёт макет в Adobe RGB, а верстальщик нарезает картинки в sRGB — и цвета «плывут».
Почему так происходит: Photoshop по умолчанию использует Adobe RGB с широким цветовым охватом. Браузеры работают в sRGB. При экспорте через «Save for Web» цвета автоматически конвертируются — и выглядят иначе, чем в макете.
Как исправить: Всегда начинайте работу с правильным профилем. В Photoshop: Edit → Color Settings → Working Spaces → sRGB IEC61966-2.1. Это гарантирует, что цвета в макете совпадут с цветами на сайте.
2. Направляющие «между пикселями»
Дизайнер ставит направляющую «на глаз» — и она попадает между пикселями. Верстальщик не понимает: левее или правее должна быть граница блока? Возникает неоднозначность, которая тормозит работу.
Как исправить: Сначала выделите область (Selection), а затем ставьте направляющую — она автоматически привяжется к пиксельной сетке. В Photoshop CC включите View → Snap to → Pixel Grid.
3. Беспорядок в слоях и группах
Верстальщик открывает макет и видит: 200 неименованных слоёв, скрытые элементы, вложенные группы в группы. На поиск нужного элемента уходит втрое больше времени.
Что нужно сделать перед сдачей макета:
- Проименуйте группы и слои латиницей по назначению:
header,nav,hero-banner,cta-button - Группируйте логически: шапка, контент, подвал — а не хаотично
- Удалите скрытые слои, которые не несут смысловой нагрузки
- Используйте маски вместо destructive-обрезки изображений
- Холст — максимальная ширина дизайна (обычно 1440px или 1920px)
4. Разные цвета для одинаковых элементов
Кажется: «Ну очевидно же, что этот заголовок и тот — одного цвета!» Но когда один отличается на полтона, верстальщик видит два разных значения в коде и не знает, какое правильное.
Как исправить: Используйте палитры (Color Swatches) в Figma или Photoshop. Определите базовые цвета проекта и применяйте только их. В Figma это делается через Variables — один раз задали, используете везде.
5. Сломанные скругления и трансформации
Дизайнер скруглил прямоугольник, а потом трансформировал его — пропорции изменились, и углы стали «овальными». Верстальщик не может воспроизвести это через border-radius.
Другая проблема — нечёткие границы. Фигура стоит «между пикселями», и при увеличении видно размытие. Верстальщик не может определить точную ширину блока.
Как исправить:
- Скругления задавайте через параметры прямоугольника, а не через Transform
- Включите «Align to Pixel Grid» (Figma) или «Snap to Pixels» (Photoshop)
- Проверяйте координаты и размеры — они должны быть целыми числами
6. Дробные размеры шрифтов
Дизайнер изменил текст через Transform, и кегль стал 14.5px. Верстальщик ставит 14 или 15? Оба варианта «не то».
Как исправить:
- Используйте только целые значения размеров: 12, 14, 16, 18, 20, 24, 28, 32px
- Задавайте типографику через стили текста, а не через трансформацию
- Межстрочный интервал (line-height) тоже должен быть целым
- Выравнивание текста — только по левому краю, по правому или по центру. Justify в браузерах работает иначе, чем в Photoshop
7. Стили слоёв, которые нельзя сверстать
Дизайнер наложил на текст градиент, обводку, тень и свечение — в Photoshop выглядит шикарно. Верстальщик открывает — и понимает, что половину эффектов невозможно воспроизвести на CSS.
Что реализуется на CSS без картинок:
- Тени:
box-shadow(для блоков),text-shadow(для текста) - Обводка:
border,outline - Заливка:
background-color, градиентыlinear-gradient(),radial-gradient() - Прозрачность:
opacity,rgba(),hsla() - Скругление:
border-radius - Размытие:
filter: blur() - Трансформации:
transform: rotate/scale/translate
Что НЕ реализуется: сложные наложения слоёв (Blend Modes кроме multiply, screen), нестандартные паттерны обводки, 3D-эффекты. Если используете такие эффекты — предупредите верстальщика и предоставьте альтернативный вариант.
8. Отсутствие адаптивных макетов
Дизайнер делает макет только для десктопа (1440px) и говорит: «А адаптив верстальщик сам придумает». Это неправильно — адаптивность должна продумываться на этапе дизайна.
Как исправить:
- Делайте макеты минимум для 3 точек: мобильный (375px), планшет (768px), десктоп (1440px)
- Используйте Figma Auto Layout — он автоматически подсказывает как элементы будут вести себя при изменении размера
- Продумывайте поведение навигации, карточек товаров, форм на мобильных
9. Неиспользование компонентов и стилей
Каждая кнопка нарисована отдельно. Каждый заголовок — своя текстовая стилистика. При изменении стиля кнопки нужно править 15 копий вручную.
Как исправить:
- В Figma: создавайте Components для повторяющихся элементов (кнопки, карточки, формы)
- Используйте Text Styles для типографики
- Используйте Color Variables для цветовой палитры
- Это ускоряет и дизайн, и вёрстку — верстальщик берёт стили из дизайн-системы
10. Передача макета без спецификации
Дизайнер скинул PSD-файл и ушёл в закат. Верстальщик открывает — и не понимает: какие отступы, какие hover-состояния, что происходит при скролле, как выглядят ошибки в формах.
Что должно быть в спецификации:
- Размеры и отступы всех элементов
- Состояния: default, hover, active, focus, disabled
- Анимации и переходы (длительность, easing)
- Поведение при наведении, клике, ошибке
- Адаптивные версии
- Иконочный шрифт или SVG-иконки
Заключение
Хороший дизайн — это не только красивая картинка, но и грамотно подготовленный макет. Когда дизайнер понимает ограничения вёрстки и готовит проект с учётом верстальщика — результат получается быстрее, качественнее и без нервов с обеих сторон.
Главное правило: если вы не уверены, можно ли это сверстать — спросите верстальщика. Лучше до сдачи макета, чем после.
Читайте также наши статьи по WordPress и WooCommerce:
Добавить комментарий