Наш блог

​Style guide или как подружиться с верстальщиком

​Style guide или как подружиться с верстальщиком

Панасюк Алина
Junior Web-Designer
14.07.16
2918

Один из инструментов, который может существенно упростить работу дизайнера и верстальщика называется style guide. Что же это такое? Если Вы работаете с большой компанией с массой веб-сайтов, на которых нужно поддерживать единый стиль, то style guide – это тот инструмент, который будет очень и очень полезен.

Style guide или стиль руководства – это набор стандартов для написания и оформления документов, либо для общего использования, либо для конкретной публикации, организации, или сферы деятельности. Часто под этим понимают таблицу стилей, хотя данный термин имеет другие значения.

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

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

Кнопки или блоки имеют несколько состояний – normal (обычное состояние), hover (при наведении мышки) и active (при нажатии на кнопку). Дизайнер должен продумать и показать каждый вариант, и то как будет выглядеть кнопка во всех состояниях:

Логотип – это лицо компании. Практически у любого логотипа теряется вид, если его слишком сильно уменьшить. Поэтому обозначается допустимый предел уменьшения логотипа или создается упрощенный вариант логотипа.

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

Еще раз хочется напомнить о модульной сетке. Во-первых, без нее макет не будет иметь точной структуры и гармонии. Во-вторых, с помощью сетки мы сможем понять, какой кегль нам нужно применить и каких размеров должен быть каждый блок. В целом, модульная сетка является каркасом, который значительно облегчает построение сайта. Есть масса онлайн инструментов, которые помогут Вам скачать и установить себе модульную сетку, например - Grid System Generator, Modular Grid Pattern и 960 Grid System.

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



Одной из хитростей, используемых в макетах, являются «липкие листочки» или по-простому - комментарии. Значок

, находится на панели инструментов во вкладке «пипетка»



При нажатии на комментарий, на боковой панели инструментов, всплывает окно, где виден непосредственно сам комментарий.



В этом поле можно полностью расписать указания по поводу выделенного блока или же сослаться на слой или группу слоев в макете.

И последнее, но не менее важное – вместе с макетом передавайте папку в которой будут находится исходники картинок, иконки и неординарные шрифты, которые отлично смотрятся в макете.

Чем проще и доступнее Вы объясните элементы макета, тем будет проще верстальщику понять и воплотить задумку при создании сайта. Не ленитесь, работайте качественно и с Вами будет приятно работать другим.



Другие статьи категории: Дизайн
Поделиться с друзьями

Сделайте заказ услуги прямо сейчас