Найти в Дзене
MDA

Веб-дизайн: правило хорошего тона или оформление макетов для верстальщика

Вам приходилось когда-нибудь копаться в чужом макете? Сложно было разобраться? Наверняка, да, особенно если он имеет большое количество слоёв и элементов. А Вы дизайнер и видите эти слои каждый день.
Теперь представьте, что испытывает верстальщик − человек, который работает с кодом и не разбирается в дизайне и в целом не силен в графической среде − тихий ужас. Хорошо если это какой-то лендинг, а если это несколько страниц интернет-магазина?
В чем же ошибка и как нам быть, чтобы упростить и ускорить работу верстальщику или же нам самим для быстрого редактирования макета?
В общем, это навести порядок в слоях и максимально подготовить его для верстальщика. Если говорить более конкретно, то нужно провести ряд работ, таких как:
* подписывание каждого слоя соответствующим его смыслу именем (имен, в духе «слой номер 134а» быть не должно);
* группировка всех слоев одной группы или блока в одну папку и подгруппы, например кнопку и все, что связано с ней (прямоугольник, тень, текст) п

Вам приходилось когда-нибудь копаться в чужом макете? Сложно было разобраться? Наверняка, да, особенно если он имеет большое количество слоёв и элементов.

А Вы дизайнер и видите эти слои каждый день.
Теперь представьте, что испытывает верстальщик − человек, который работает с кодом и не разбирается в дизайне и в целом не силен в графической среде − тихий ужас. Хорошо если это какой-то лендинг, а если это несколько страниц интернет-магазина?

В чем же ошибка и как нам быть, чтобы упростить и ускорить работу верстальщику или же нам самим для быстрого редактирования макета?
В общем, это навести порядок в слоях и максимально подготовить его для верстальщика.

Если говорить более конкретно, то нужно провести ряд работ, таких как:
* подписывание каждого слоя соответствующим его смыслу именем (имен, в духе «слой номер 134а» быть не должно);
* группировка всех слоев одной группы или блока в одну папку и подгруппы, например кнопку и все, что связано с ней (прямоугольник, тень, текст) помещаем в одну папку, а эту папку кладем в папку с блоком, к которому относится эта кнопка;
* раскрашивание папки отдельных блоков разными цветами, чтобы максимально быстро находить что и где лежит;
* придание имени всем файлам только английскими буквами или транслитом;

Согласитесь, намного приятнее работать с макетом, когда в нем все понятно и разборчиво.

Также не забываем использовать сетку и по итогу, вместе с макетом отправлять использованные шрифты :)

-2