реклама
разместить

Подготовка дизайн-макета к верстке

Подготовка дизайн-макета к верстке

Наведите порядок в макете

  • Удалите лишине фреймы и объекты
  • Уберите скрытые слои
  • Используйте стили и компоненты
  • Назовите фреймы и слои

Проверьте фреймы

  • Все объекты должны быть внутри фрейма, а не за его пределами
  • Никаких дробных значений и странных цифр
  • Плагин Pixel Perfect вам в помощь

Проверьте слои

Понятные названия у всех объектов, группировка и логичная последовательность слоев по макету

Подготовьте UI-kit

Одно из важнейших подготовление перед версткой, именно из этого манула у разработчика появляется понимания состояний элементов и какие компоненты и стили, готовить. Опишу обычные состояние которы я использую в вариантах: default, focus, hover, active, disable, для чек-боксов и радио кнопок: on, off

Что еще можно добавить:

  • Сохрани шрифты в отдельную папку
  • Выгрузи иконки в SVG
  • Выгрузи фото и иллюстрации (на всякий случай)

И помните, хорошо подготовленный макет к верстке = норма взаимного уважения и сотрудничества между дизайнером и верстальщиком

Больше полезностей для дизайнеров в моем телеграм канале

11
реклама
разместить
1 комментарий

Ну за вот это благодарность)

1
Как создать макет сайта: этапы, инструменты, ошибки
Как создать макет сайта: этапы, инструменты, ошибки

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

11
реклама
разместить
Как подготовить печатные макеты из Figma в Adobe Illustrator так, чтобы типография не взвыла? Личный опыт и советы

Цель этой статьи – поделиться своим опытом и в комментариях сообщества обсудить ваши лайфхаки. Не претендую на истину в последней инстанции, и понимаю, что профессионалы часто смеются над использованием Figma для предпечатки, как и некоторые иронизируют над использованием Corel Draw.

Как подготовить печатные макеты из Figma в Adobe Illustrator так, чтобы типография не взвыла? Личный опыт и советы
44
11
11
Старение в дизайне, которое не теряет актуальности (или теряет?)

Привычно и сильно проще воспринимать процесс старения с негативной стороны. Хотя существует он не только в пределах разрушения организмов и материалов. Этот процесс много более глобальный и распространяется буквально на все сферы нашей деятельности.

11
Бэк, фронт и аналитика, или три причины «почему мои макеты не выйдут в прод»

Разогрев и аналитика

22
11
Ссылки на макеты в Figma: Почему это не так просто?
Обожка

Если вы ожидали инструкцию, как скопировать ссылку, нажав пару кнопок, вас ждет разочарование. В этой статье я рассмотрю все сложности копирования ссылок на макеты Figma на различных этапах разработки.

22
11
Чек-лист для дизайнера перед сдачей проекта
Чек-лист для дизайнера перед сдачей проекта

Проектирование макетов — это как игра в «Дженгу»: стоит упустить одну деталь, и весь проект может рухнуть. Чтобы избежать стрессовых правок и бесконечных «почти готово», я собрал чек-лист для проверки макетов перед отправкой разработчикам. Простой и понятный. Он сохранит ваше время и нервы.

22
Что делает дизайнер в команде разработки?

Статья для тех, кто думал, что дизайн — это просто рисовать картинки за деньги :)

Что делает дизайнер в команде разработки?
88
11
Как сделать стикерпак ? С чего начать? Как распечатать?

Я создаю продукцию с помощью типографии, и одним из них являются стикерпаки. Хочу поделиться детальным описанием создания, возможно вы узнаете кое-что полезное для себя, что поможет избежать нежеланных ошибок)

Как сделать стикерпак ? С чего начать? Как распечатать?
22
[]