Verno 
Хотим поделиться ТОПом самых распространенных ошибок в дизайне, которые создают проблемы на верстке. Или как сдавать дизайн-макеты с первого раза.
Мы в verno.digital стараемся развивать и улучшать процессы, разрабатывать стандарты для себя, которые упрощают жизнь всем. Придерживаемся одного золотого правила: “Если ты не решаешь проблему, ты ее создаешь”. И так, к ошибкам:
Все картинки (png, jpeg, svg) должны иметь высоту и ширину в целых числах. Никаких чисел после запятых.
Дробные пиксели в png и jpeg. На верстке такой тип изображений выгружается в разрешении x2 (для охвата экранов retina). Изображение нужно делать таким, чтобы после выгрузки x2 его высота и ширина были четными, дробное расположение по x и y может также повлиять на результат.
Если этого не учесть, то в сверстанном проекте изображение перестанет быть четким и начнет мылиться.
Дробные пиксели в svg
Предположим, что в фигме иконка имеет дробные значения 15,1/15,1. Что с ней произойдет на экспорте?
Иконка получит округленные в бОльшую сторону значения. На верстке она превратится в 16px/16px, что визуально будет сильно отличаться.
В макете встречается множество практически идентичных элементов, каждый из которых отличается от остальных. Например, 15 вариаций одной и той же кнопки. Или же много разных шрифтов.
Как исправить? Вынести все кнопки, цвета и шрифты в UI-kit и унифицировать их.
Если проект большой, отсутствие UI-kit замедляет разработку и делает проект не поддерживаемым. Разработчик не должен бегать по проекту в поисках переиспользуемых элементов, стилей и типографики.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
12327 тендеров
проведено за восемь лет работы нашего сайта.
Топ страшилок для разработчика возглавляет отсутствие сеток. Просто представьте: открываешь проект, а там только направляющие. Пожалуйста, не делайте так, используйте сетки. Может взять наши сетки, сделали открытый файл в Figma
Ходят слухи, что хорошему верстальщику адаптивы не нужны. Сделали десктоп, а там как карта ляжет! Если без шуток, разработчик понятия не имеет как должен работать сайт и на каких разрешениях, он конечно может использовать опыт, но как правило пользователи спасибо не скажут, а от заказчика наприлетает правок.
Называть элементы на русском очень плохая идея. Конечно, это будет удобно и красиво для дизайнера, который работает на проекте, но по процессам дальше вам коллеги точно не скажут “спасибо”. В идеале лучше использовать точные и конкретные названия, которые будут в проекте и только на английском, чтобы разработчик мог просто скопировать название и использовать его. Классно будет изучить основные теги для названия текстовых стилей, особенно важно для блога, так как потом стили передут в визуальный редактор.
Аналогично предыдущему пункту. Если делается редизайн, желательно сохранить структуру и использовать реальные названия в странице. Если мы делаем новый сайт, названия должны быть на английском и через тире. Через нижнее подчеркивание мы показываем различные состояния страницы, например card-detail. и card-detail_active. Делаем это для того, что бы при разработке названия копировались из макетов и строилась правильная структура страниц.
Это очень редкие случаи, но мы видели, как тень дизайнер делал прямоугольником с линейной заливкой. Так не надо. Если повторяются тени, вынесите их в ui-kit. И научитесь пользоваться фигмой, ради всех богов: старых и новых!
На дизайне нужно закладывать ограничение контента. Показывать состояния для заголовков в две строки и более. Если не показать это на дизайне, на верстке контент может показываться лесенкой. Разработчику важно понимать логику.
Например модальные окна, личный кабинет и публичная часть должны быть визуально сгруппированы, так как они имеют общие стили между собой и чтобы при разработке не было необходимости перемещаться по всему проекту в их поиске.
Безусловно, у каждого разработчика свой ТОП болей и набитых шишек при работе с дизайнерами. Для кого-то некоторые из перечисленных нами ошибок будут совсем не ошибками.
Еще интересно что дизайнеров бесит в разработчиках) Накидайте в комментарии)
