Путь к взаимопониманию: как дизайнеру посмотреть на проект глазами верстальщика?

Верстальщики нередко жалуются на веб-дизайнеров, утверждая, что те пренебрегают отступами, делают заголовки разных размеров или в целом создают малопонятные макеты. Последние тоже не скупятся на гневные комментарии. Дизайнеры уверяют, что верстальщики попросту уродуют грамотно выстроенные макеты. По сути, вышеупомянутые конфликты можно назвать неустаревающей классикой, похожей на вечное противостояние футболистов «Реала» и «Барселоны».

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

Используй сетку. Как показывает практика, часть веб-дизайнеров попросту игнорирует этот базовый элемент работы. А ведь сетка должна задавать строжайшую горизонтальную иерархию макета. Верстальщики используют как готовые, так и собственноручно созданные варианты сеток. И одни, и вторые позволяют заметно увеличить скорость, а также точность реализации проекта. Изучение принципов применение сеток – огромнейший шаг навстречу верстальщику. К слову, если возникают ощутимые проблемы с расчетом размеров кнопок, то можно задействовать в работе специальный онлайн-калькулятор.

Изучи основы верстки. Углубляться в мельчайшие детали, разумеется, не следует. Но освоить хотя бы ключевые основы верстки все-таки необходимо. В перспективе фундаментальные знания позволят моментально оценивать уровень трудоемкости задачи, которая будет поставлена перед верстальщиком. То есть делать объективные выводы о том, какие задумки можно реализовать в проекте, а какие – нет.

Показывай все состояния объектов. Часто случается, что дизайнеры не демонстрируют и даже не объясняют верстальщикам то, как должны выглядеть те или иные hover-эффекты. А значит, в подобных ситуациях верстальщику приходится продумывать их самостоятельно.

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

Корректно переименовывай слои. Об этом не рассуждали только талантливейшие лентяи. Невзирая на все старания интернет-философов, верстальщикам довольно часто приходят макеты из сумбурно налепленных слоев, название которых говорит только о том, что дизайнер и впрямь решил поиздеваться над коллегой по цеху Слои должны быть переименованы по смыслу. К примеру, button, header, footer и далее по списку терминов.

Собери иконки и иллюстрации. Как известно, систематизация позволяет ускорить любую работу. Верстальщик сможет намного быстрее и эффективнее работать с макетом, если все иконки и изображения будут собраны в одном месте и расфасованы в папки по целевому назначению.

Оставляй комментарии. Если верстальщику передается статичный макет, то следует написать максимальное количество комментариев к тем элементам, которые могут потребовать детальных пояснений. Благо, что сейчас существует уйма сервисов для создания интерфейсов, позволяющих описывать макет максимально удобными способами. Лучше изначально потратить минуту свободного времени, чем часами выяснять отношения в ходе работы – золотое правило, позволяющее дизайнерам избежать большинства споров с верстальщиками.