Простые советы начинающему веб-дизайнеру. Принимаем макет

Привет. В результате работы с начинающими веб-дизайнерами прослеживаются повторяющиеся ошибки — общие вне зависимости от среды разработки (опыт с figma и photoshop).

Эти советы появились из критериев к макету при приёмке. Они простые и подойдут начинающим. Если вы опытный веб-дизайнер и знаете, например, что название рубрики заведомо ограничено в 8 символов, уже посылали шрифт, задумали ширину содержимого 1540px с пониманием дела, то вы большой молодец, а эта статья не для вас.

Советы

1. Ширина макета. Учтите, что устройства отображают разное число точек по ширине. Частый ориентир ширины основного содержимого 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%… число в теории может быть произвольным.
   *elite разработчик выходит из положения при помощи относительных единиц.

2. Шрифт. Учтите, что у верстальщика и пользователей нет вашего шрифта. Хороший тон — это послать шрифт вместе с макетом или сказать откуда его взять (напр. гугл фонтс).
   *Шрифт из figma и photoshop не экспортируется. Кроме того, так понятно что у вас есть лицензия.
   *elite разработчик выходит из положения вбив названия шрифта в поисковик.

3. Экспорт/сжатие картинок/иконок. Смотрите, чтобы картинки/иконки можно было экспортировать из макета либо пришлите их отдельно. Сжатие можете отдать на усмотрение верстальщика.

4. Объём текста. Если текст статичный, тогда нет проблем. Однако обычно при применении одного шаблона для нескольких объектов (товар, характеристики, превью статьи) число символов меняется. Лучше сразу иллюстрировать в макете различный объем текста.
   *elite разработчик уже не всегда может выйти из положения…

5. Изменчивость элементов. Аналогично предыдущему пункту, но не только текст, но и другие элементы могут иметь другие размеры/цвет или их может вовсе не быть: фото может иметь разные пропорций или черный фон вместо белого; скидки к цене может вообще не быть.
   Исходя из этого может быть несколько вариантов поведения элементов при их изменении. Если у вас есть определённая задумка, то можно оставить комментарий в макете или сообщить иным образом, а если нет, то пусть верстальщик решает сам.

6. *Эффекты при наведении. На начальных этапах можете пропустить: скажите, что отдаёте на видение верстальщика.

7. *Цвета. Если цвета выбираются «методом тыка», то рекомендую выбирать 12 битные цвета #aabbcc = #abc. Существенной разницы (кроме самых-светлых) в восприятии зачастую нет. На реальное отображение/восприятие цвета влияет множество факторов…

   *Такие цвета отлично подходят, если нет юридических ограничений.
   *В css можно задать цветовые переменные —text-normal-foreground-base (на основе логики), —mountain-mist (просто цвет). Переменная на основе логики: не всегда в макете можно сделать чёткую логику, потом её надо держать в голове на протяжении всей работы с макетом и помнить название, всё усложняется если их несколько. Для коротких проектов это излишне. Переменная на основе цвета: нужно запомнить некоторое искусственное название и его примерный цвет, вместо этого есть объективное и короткое название цвета #abc (вдобавок кросспроектное в отличии от переменных).

Принимаем макет

Критериями приёмки могу стать эти 3 совета, а в случае изменяющихся текстов/элементов 5 советов. Для опытных ещё 2 дополнительных момента.

P.S.

Следующий шаг — статья про сам дизайн, есть ли интерес обсудить такое? (спасибо за комменты, статья не предвидится)