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

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

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

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

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

Используй сетку вместо направляющих

Макет изрезанный направляющими
Макет изрезанный направляющими

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

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

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

Настройки сетки
Настройки сетки

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

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

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

Разбивай макет на блоки, а не дублируй

Дублирование макета
Дублирование макета

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

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

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

Общий макет и макеты каждого отдельного блока
Общий макет и макеты каждого отдельного блока

Используй только одно направление повествования

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

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

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

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

Повествование сверху вниз
Повествование сверху вниз

Не используй в макетах скриншоты

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

1919
14 комментариев

Основное правило при работе с макетами - не делать их в фотошопе)

18
Ответить

почему?

Ответить

Какие макеты в фотошопе, вы о чем.. Какие сетки..? Максимум для чего он пригоден, так это для растра – все.

11
Ответить

имитация вектора тоже реальна

Ответить

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

Ответить

Photoshop - это как 2007, все на стетчах сидят и ходят с голыми щиколотками в феврале

4
Ответить

Чо, пацаны, корел?

1
Ответить