1.

Консистентность отступов (padding - border -

margin) + кратность 4px
Улучшим жизнь разработчиками и сохраним хорошие отношения с
ними.

Расстояния задаем не засчет растягивания текстового блока.

Разработчики:

Разные отсупы у одинаковых блоков.

При перестроении на разные вьюпорты не соблюдается схема(например, есть

5 похожих блоков на десктопе, отступы между всеми по 100px, а в планшете
между всеми 80px, но один почему-то имеет отступ 60, например, или 100).

2. ВСЕ цвета и ВСЕ шрифты должны быть

определены в соответствии с ПАЛИТРОЙ и
ТИПОГРАФИКОЙ!
P.S.: Каждая иконка и буковка.

Разработчики:

Типографика не совпадает с реальностью, не весь текст в макетах ссылается

на реальную типографику.

Цветов в UI ките 100, а используется максимум 5.

3. Пограничные состояния (в частности, MAX&MIN
стейты)
Всегда рассчитывать для каких языков и культуры проектируется
продукт (пример: блок будет по-разному выглядеть для
английского и китайского текста).

Если даже не рисовать доп экраны, то такой момент хорошо

описать.

Разработчики:

В блоке есть текст от пользователя, в дизайне три строки, но что будет если
пользователь введёт 5 строк? Если текст обрежется, то появится кнопка
“показать полностью”? Как будет выглядеть вариант полностью?

Есть список элементов высотой в 1000 пикселей, на дизайне туда влезет 5

элементов, но что если элементов будет 6, 8, 10 и т.д.? Добавляется пагинация
или бесконечный скролл, или просто блок растягивается вниз?

Есть отправка запроса или формы, есть success экран, но что случится, если
форма не будет успешно отправлена? Будет ошибка, то какой текст? Как она
будет выглядеть? Уведомлением, появится ниже-сверху-справа-слева от
элемента?

Часто не хватает состояний ховеров на интерактивных элементах, и эроров,

где они могут быть.

Есть место, где отображаются данные, которые ввёл пользователь, в нем есть
поля, но есть вероятность, что пользователь заполнил не все, как это
отображать? Потому что иногда пустые места выглядят не очень.

5. Всегда держать команду разработки в курсе

ВСЕХ изменений.
Делать это напрямую ИЛИ через бизнес-аналитика.

Разработчики:

Когда внезапно появляется новая кнопка, Которой раньше не было

6. Четкая система иконок со всеми возможными

размерами и в одном цвете.
Назначать цветовые стили непосредственно в макетах.

7. Все иконки в SVG

Разработчики:

Когда идет много иконок часть в свг, а часть в пнг

8. Все графические элементы должны быть

готовы к экспорту.
Проверив обязательно экспорт всех используемых эффектов,
цветов, наложений и т.д.
Разработчики:

Картинки с размытием фона не подготовлены к экспорту.

9. Учитывать, что реальный продукт будет

отображаться в браузере или на экране с
панелями, которые имеют свою высоту.
Минимальная высота десктопного макета - 800px. Для таблета и
мобилки -100px для всех разрешений.

10. Грамотное использование групп, фреймов,

автолайаутов
P.S. Use auto-layout CAREFULLY!!!

Разработчики:

Из минусов думаю самое не очень, когда дизайнер плодит сущности по самой

малой необходимости.

Был случай когда у нас было 12 разных форм однотипных.

И парень в одной из них уменьшил размер шрифта текста всего контента, чтоб
влезло))

Заметили несоответствия уже на проде.

11. Начинаем с юайкита
P.S. не все и сразу!

По мере убывания важности: типографика и палитра, кнопки,

инпуты, тултипы, иконки, лого, контролс (тоглы, радиобаттоны,
чекбоксы), табы, теги (чипсы), бекграунды, эффекты - скримы
(затемнения), блюр, свечение, тени (внутренние и внешние),
навигация, карточки т.д.

И в самом конце желательно отрисовать сетку или описать ее для

будущих дизайнеров.

Разработчики:

Самый большой дискомфорт доставляет когда UI кит не доделан или сделан

плохо, так как вы обычно его делаете в конце, а мы с него начинаем.

12. Сетка - базовая 4-пиксельная + колоночная

Привет. На мой взгляд самый главный косяк дизайнера -

абстрагированность от разработки.

Мне кажется многие дизайнеры руководствуются тезисами:

табличка САРКАЗМ

- У меня отдельный продукт, у разработчика отдельный, мне все

равно как это будет реализовано, главное, что выглядит красиво.

- Выглядит же красиво, странно что никто так не делает,

спрашивать про техническую возможность или гуглить примеры

таких реализаций я конечно же не буду.

- Хочу, чтоб везде всё с анимациями, пофиг на

производительность, меня это не интересует;

- Зафигачим 100 почти одинаковых картинок, с разницей, которую

ни один пользователь никогда не увидит, пусть разработчик

оптимизирует;

- Вот есть кусок текста, хочу чтоб перенос текста был строго в

определенных местах так выглядит красиво. - Ок, но что будет,

когда появится локализация или текст будет другой длины? - Не

знаю, я об этом не думаю, мне главное чтоб красиво было;

- Есть 165 видов кнопок/цветов/заголовков в ui kit, нам срочно

нужна новая ... старые надоели, хочу что-то свеженькое;

- На сайте есть 500 видов блоков и в их оформлении не должно

быть закономерностей, тут такой фон, тут другой, тут заголовок

побольше, тут отступ поменьше. Когда больше хаоса выглядит

красивее;
- svg картинка должна выглядеть красиво, плевать что там внутри

сколько там точек, элементов, как они сгруппированы;

- Работа с анимациями не в моей зоне ответственности, я просто

хочу как по этому рефу.

И особое удовольствие доставляют правки от дизайнера на

финальной стадии продукта. "Заказчику все нравится, но я вот

считаю, что тут можно переделать пол сайта и не вынесу это на

обсуждение, а заведу таску/баг или даже предложу заказчику".

Но это скорее ошибка менеджмента, наша цель не удовлетворить

дизайнера, а удовлетворить клиента, нередко после таких правок

приходит клиент и говорит вернуть как было или предлагает еще

какие-то "улучшения".

Если подытожить, то желательно дизайнеру работать в плотном

сотрудничестве с разработчиком. Не стесняться лишний раз

спросить о технических возможностях чего-то или даже вместе

решать какие-то задачи, например поискать варианты анимации,

поресерчить или даже режиссировать их на макете. Неплохо было

бы также снабжать макеты комментариями, если там есть какой-то

замысел или планируется изменение в будущем. Стараться

следовать закономерностям в дизайне, если есть 2 одинаковых

блока, стоит уже задуматься о том, чтоб вынести его в ui-kit и не

лепить каждый раз новый.

Не допускать слишком больших расхождений макета и продукта.

Не править все подряд в угоду красоте макета.

Если заказчику не нравится конкретное место, значит только его и

нужно править, перфекционизм выливается только в головную

боль разработчика и не влияет на качество продукта. Если

заказчик решил сам испортить свой сайт, пусть будет так, не нужно

чтобы за это расплачивался разработчик.