suhooy

Не оттуда пляшете.

Давайте я вам как девочка девочке всё объясню. На примере джинсов.
Есть такая штука мода. Сейчас в обтяжку, раньше клеш или широченные. Но при этом всегда остаются люди предпочитающие классику или консерваторы, которые предпочитают даже слегка устаревшую классику.

Так вот, с сайтами аналогичная история.
10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

Кроме этого есть аспекты адаптивности.
И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

Поэтому, хороший дизайнер либо сопровождает работу верстальщика, либо пишет сопроводительное письмо с указанием зависимостей, либо и то и другое.

И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.

Не соглашусь с оратором-садистом который, предлагает какие то извращенные пытки из своего мрачно-красного воображения, методом отрыва рук.
1) Дизайн это творчество, а не уголовный кодекс. Иногда дизайнеры любят нарушать правила.
2) Бутстрап это всего лишь фреймворк, это не данность и не святые скрижали. Его можно использовать, а можно выкинуть на йух или на мороз. Или на мороз и на йух одновременно.
3) Бутстрап гибок. Он настраивается. Его колонки тоже.
4) Натягивать дизайн под какие-то колонки и догмы это натягивать сову на ежа.
5) Если дизайнер слепо следует диктату колонок он не дизайнер, а школьник.
6) Слепо диктату колонок следовать нельзя, но так же не следует забывать про элементарное здравомыслие. Например дизайнер может натыкать на глаз иконки с разной высотой по 2-3 пикселя. Тут стоит включить голову и сделать все выровненным по одной линии, если не оговорено иное.
7) Из здравомыслия следует так же, что дизайн должен быть создан под популярные разрешения. Пожалуй это единственное требование из жанра уголовного кодекса к дизайнеру.
Ну и решать, что правильно, а что нет только вам. Но лично я посоветую не загонять себя в рамки, а то придете к творческому вырождению и ступору в жанре "соцреализм", а когда вам будут присылать нестандартные макеты, будете стучать ботинком по столу и кричать:
-- "Вы художники или п#%#сы проклятые? У меня внук лучше макеты делает!".

вы должны хоть что-то уметь, иначе будете ненужной обузой, а не рабом.

галеры - прекрасный способ для прокачки скилов. и технических, и социальных.

Коротко об инструментах:

Figma - кроссплатформенный инструмент, работает где угодно, когда угодно и на чем угодно:
Плюсы:
- Бесплатный
- Возможность работать над одним проектом, целой командой, с одной большой библиотекой компонентом.
- Доступна где угодно, даже качать ничего не нужно, главное чтобы было устройство, с которого можно зайти.
- Легкая передача верстки программисту
- Постоянные обновления, быстрый саппорт.
- Большое сообщество, очень востребован среди компаний.

Минусы:
- Ресурсоемкая к большим макетам.
- Нет плагинов.

Adobe XD - хороший инструмент, но работает пока только на windows 10 и Mac OS, имеет легкий инструмент для легкой анимации.

Плюсы:
- Анимация
- Есть на windows
- Входит в подписку Adobe, сейчас кстати уже бесплатный.
- Легкий, но уже немного затруднительный инструмент для верстальщика.

Минусы:
- Плохо заботятся о пользователях (UX вообще мало продуман, часто можешь сбеситься при работе с ним).
- На мой взгляд, плохо работает с Frame, нельзя внутри Frame создать еще один Frame, группировка вообще отстает от других инструментов.
- Иногда прослеживаются баги.

Sketch - классический инструмент, самый старый на рынке, с очень большим сообществом.

Плюсы:
- Очень большое сообщество, которое пишет всяческие плагины, паттерны, UI-kit.
- Интеграция с большим количеством инструментов, большая гибкость в этом плане.
- Удобный по функционалу, очень похож на Figma.

Минусы:
- Только на Mac
- Сложно передавать верстальщику макет
- Сложно передавать дизайнеру-коллеги макет, если он работает на Windows.
- Дорогой