Привет. В результате работы с веб-дизайнерами прослеживаются повторяющиеся ошибки — общие вне зависимости от среды разработки (опыт с figma и photoshop). Речь идёт не про сам дизайн как таковой, а скорее его технические моменты.
Эти советы появились из критериев к макету при приёмке.
Советы
Ширина макета. Устройства отображают разное число точек по ширине. Частый ориентир ширины основного содержимого 1200px. Но это не правило, отклонения допустимы. По бокам смотрите, что места может остаться много или мало в зависимости от устройства.
Размеры элементов будут копироваться из макета. Поэтому макет следует делать в масштабе 1 к 1 либо перед сдачей конвертируйте в 1 к 1.
*У экранов есть 2 хар-ки: разрешение и масштабирование + занимает место скроллбар.
пример: разрешение ширина 1920px, дефолт масштабирование 125%, скроллбар на windows 17px, т.е. имеем реальную ширину содержимого 1920/1.25 - 17 = 1519.
*Статистика экранов в стим, выбрать строку Primary Display Resolution. На данный момент доминируют 2 разрешения 1920 x 1080 и 2560 x 1440. И на них сверху накладывается scaling 100%, 125%, 150%, 175%... число в теории может быть произвольным.
*разработчик выходит из положения при помощи относительных единиц.Шрифт. Учтите, что у верстальщика и пользователей нет вашего шрифта. Хороший тон - это послать шрифт вместе с макетом или сказать откуда его взять (напр. гугл фонтс).
*Шрифт из figma и photoshop не экспортируется.
*Что с лицензией?
*разработчик выходит из положения вбив названия шрифта в поисковик.Экспорт/сжатие картинок/иконок. Смотрите, чтобы картинки/иконки можно было экспортировать из макета либо пришлите их отдельно. Сжатие можете отдать на усмотрение верстальщика.
Объём текста. Если текст статичный, тогда нет проблем. Однако при применении одного шаблона для нескольких объектов (товар, характеристики, превью статьи) число символов меняется. Сразу иллюстрируйте в макете различный объем текста. Причём по возможности разные комбинации заголовка и описания например.
*разработчик уже не всегда может выйти из положения...Изменчивость элементов. Аналогично предыдущему пункту, но не только текст, но и другие элементы могут иметь другие размеры/цвет или их может вовсе не быть: фото может иметь разные пропорций или черный фон вместо белого; скидки к цене может вообще не быть.
Исходя из этого может быть несколько вариантов поведения элементов при их изменении. Если у вас есть определённая задумка, то можно оставить комментарий в макете или сообщить иным образом, а если нет, то пусть верстальщик решает сам.*Эффекты при наведении. Можете просто отдать на видение верстальщика. Старайтесь, чтобы у разных действий был разный эффект (скрол вниз и переход по ссылке лучше иметь разные эффекты).
*Цвета. Если цвета выбираются "методом тыка", то рекомендую выбирать 12 битные цвета #aabbcc = #abc. Существенной разницы (кроме самых-светлых) в восприятии зачастую нет. На реальное отображение/восприятие цвета влияет множество факторов...
*В css можно задать цветовые переменные --text-normal-foreground-base (на основе логики), --mountain-mist (просто цвет). Переменная на основе логики: не всегда в макете можно сделать чёткую логику, потом её надо держать в голове на протяжении всей работы с макетом и помнить название, всё усложняется если их несколько. Для коротких проектов это излишне. Переменная на основе цвета: нужно запомнить некоторое искусственное название и его примерный цвет, вместо этого есть объективное и короткое название цвета #abc (вдобавок кросспроектное в отличии от переменных).**OLED дисплей. Если повидаете такой, то поймёте в чём проблема белого фона. Но делать две темы: светлую и тёмную это трудо-ёмко/затратно. Возможно стоит разрабатывать сразу тёмную или среднюю тёму. Но эта информация для продвинутых только, т.к. в гугл переводчике тёмной темы до сих пор нет.
Принимаем макет
Критериями приёмки могу стать эти 3 совета, а в случае изменяющихся текстов/элементов 5 советов. Для опытных ещё 2 дополнительных момента. Для продвинутых ещё 1.
P.S.
Следующий шаг - статья про сам дизайн, есть ли интерес обсудить такое? (спасибо за комменты, статья не предвидится)
