Четыре правила хорошего тона при работе с макетами

Чтобы твоими файлами могли пользоваться и другие.

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

Прошло время. Появились новые инструменты. Любой объект на макете теперь легко выбирается мышкой. На структуру слоёв перестали смотреть. Можно не заморачиваться, если не мучает чувство прекрасного. Главное — следить за глубиной вложенности.

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

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

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

Главное — по направляющим непонятно, придерживался дизайнер какой-то логики в их выставлении или разбросал их на глаз. Это создаёт ощущение неряшливости.

Этих недостатков лишена сетка: логика понятна, работать не мешает, сломать сложно. Один раз настроил и забыл.

Ещё она позволяет поддерживать визуальный ритм. И легко транслируется другим дизайнерам даже устно: «У нас 12 колонок, ширина 964, вертикальный интервал 20, горизонтальный 5».

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

Чтобы твои файлы не превратились в игру «Найди 10 отличий», избегай дублирования. Создай общий макет и ещё по одному на каждый блок, имеющий несколько состояний, которые важно отобразить в дизайне.

Это может быть макет всех шагов формы заявки на кредит или всех состояний кнопки авторизации. Насколько глубоко декомпозировать, определяешь ты сам, но сильно упарываться не стоит. Основная цель — понятность.

Я следую принципу: одно состояние блока — один макет (только общий), больше одного — два макета (базовое состояние на общем макете и все состояния на отдельном). Например, шапка сайта: зачем её тащить из макета в макет, если она не меняется?

Быстро погрузиться в макеты помогает очевидная логика повествования, когда не возникает вопроса, где начало и конец.

Макеты можно размещать либо справа налево, либо сверху вниз — не важно. Главное, чтобы направление не менялось, а повествование начиналось с верхнего левого макета.

Это сэкономит время не только кому-то другому, кто откроет твои макеты, но и тебе самому, когда вернёшься к ним через пару месяцев.

Скриншоты в макетах — это грязь. Варианта два: либо вообще не включать этот блок в макет, либо сверстать его. Потратишь лишний час, зато макеты будут чистыми, и ими будет приятно пользоваться.