За что разработчики не любят дизайнеров

Хотим поделиться ТОПом самых распространенных ошибок в дизайне, которые создают проблемы на верстке. Или как сдавать дизайн-макеты с первого раза.

Мы в verno.digital стараемся развивать и улучшать процессы, разрабатывать стандарты для себя, которые упрощают жизнь всем. Придерживаемся одного золотого правила: “Если ты не решаешь проблему, ты ее создаешь”. И так, к ошибкам:

Все картинки (png, jpeg, svg) должны иметь высоту и ширину в целых числах. Никаких чисел после запятых.

Дробные пиксели в png и jpeg. На верстке такой тип изображений выгружается в разрешении x2 (для охвата экранов retina). Изображение нужно делать таким, чтобы после выгрузки x2 его высота и ширина были четными, дробное расположение по x и y может также повлиять на результат.

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

Дробные пиксели в svg

Предположим, что в фигме иконка имеет дробные значения 15,1/15,1. Что с ней произойдет на экспорте?

Иконка получит округленные в бОльшую сторону значения. На верстке она превратится в 16px/16px, что визуально будет сильно отличаться.

В макете встречается множество практически идентичных элементов, каждый из которых отличается от остальных. Например, 15 вариаций одной и той же кнопки. Или же много разных шрифтов.

Как исправить? Вынести все кнопки, цвета и шрифты в UI-kit и унифицировать их.

Если проект большой, отсутствие UI-kit замедляет разработку и делает проект не поддерживаемым. Разработчик не должен бегать по проекту в поисках переиспользуемых элементов, стилей и типографики.

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

Ходят слухи, что хорошему верстальщику адаптивы не нужны. Сделали десктоп, а там как карта ляжет! Если без шуток, разработчик понятия не имеет как должен работать сайт и на каких разрешениях, он конечно может использовать опыт, но как правило пользователи спасибо не скажут, а от заказчика наприлетает правок.

Называть элементы на русском очень плохая идея. Конечно, это будет удобно и красиво для дизайнера, который работает на проекте, но по процессам дальше вам коллеги точно не скажут “спасибо”. В идеале лучше использовать точные и конкретные названия, которые будут в проекте и только на английском, чтобы разработчик мог просто скопировать название и использовать его. Классно будет изучить основные теги для названия текстовых стилей, особенно важно для блога, так как потом стили передут в визуальный редактор.

Аналогично предыдущему пункту. Если делается редизайн, желательно сохранить структуру и использовать реальные названия в странице. Если мы делаем новый сайт, названия должны быть на английском и через тире. Через нижнее подчеркивание мы показываем различные состояния страницы, например card-detail. и card-detail_active. Делаем это для того, что бы при разработке названия копировались из макетов и строилась правильная структура страниц.

Это очень редкие случаи, но мы видели, как тень дизайнер делал прямоугольником с линейной заливкой. Так не надо. Если повторяются тени, вынесите их в ui-kit. И научитесь пользоваться фигмой, ради всех богов: старых и новых!

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

Например модальные окна, личный кабинет и публичная часть должны быть визуально сгруппированы, так как они имеют общие стили между собой и чтобы при разработке не было необходимости перемещаться по всему проекту в их поиске.

Безусловно, у каждого разработчика свой ТОП болей и набитых шишек при работе с дизайнерами. Для кого-то некоторые из перечисленных нами ошибок будут совсем не ошибками.

Еще интересно что дизайнеров бесит в разработчиках) Накидайте в комментарии)

Еще статьи про процессы:

Как мы подходим к дизайну. Брекпоинты, сетки и UI-kit