Четыре правила хорошего тона при работе с макетами. Кратко (не совсем) #4
Подписывайтесь на мой канал в Телеграме. Буду рад ответить на вопросы и помочь.
Чтобы твоими файлами могли пользоваться и другие.
Во времена фотошопа самым большим пиздецом было работать с макетами, в которых дизайнер хуй положил на именование и структуру слоев. Слои плохо протыкивались мышкой, и приходилось искать нужный в списке. Из-за этого на работу уходило в два раза больше времени, чем ты рассчитывал.
Прошло время. Появились новые инструменты. Любой объект на макете теперь легко выбирается мышкой. На структуру слоев перестали смотреть. Можно не заморачиваться, если не мучает чувство прекрасного. Главное — следить за глубиной вложенности.
Но, так как проблема решилась благодаря развитию инструментов, а не росту общей культуры дизайнеров, порог входа в чужой макет по-прежнему остается высоким. Исправить это может базовый набор правил, которым все будут следовать. Дизайн-этикет, в который для начала достаточно включить всего четыре правила.
Используй сетку вместо направляющих
Направляющие легко использовать, поэтому сложно остановиться. Неизбежно в какой-то момент ты замечаешь, что их слишком много. И уже непонятно, к чему какая линия выставлялась.
Из-за большого количества направляющих становится сложно взаимодействовать с элементами. В этот момент легко случайно передвинуть одну из линий — и потом может оказаться, что на половине макетов элементы выровнены неправильно.
Главное, по направляющим непонятно, придерживался дизайнер какой-то логики в их выставлении или разбросал их на глаз. Это создает ощущение неряшливости.
Этих недостатков лишена сетка: логика понятна, работать не мешает, сломать сложно. Один раз настроил и забыл.
Еще она позволяет поддерживать визуальный ритм. И легко транслируется другим дизайнерам даже устно: «У нас 12 колонок, ширина 964, вертикальный интервал 20, горизонтальный 5».
Да, иногда направляющие полезны. Я часто использую их, когда нужно проверить выравнивание элементов между макетами, например. Но для этого не обязательно направляющую фиксировать. Достаточно поднести курсор к линейке, всё проверить и увести курсор.
Разбивай макет на блоки, а не дублируй
Чтобы твои файлы не превратились в игру «Найди 10 отличий», избегай дублирования. Создай общий макет и еще по одному на каждый блок, имеющий несколько состояний, которые важно отобразить в дизайне.
Это может быть макет всех шагов формы заявки на кредит или всех состояний кнопки авторизации. Насколько глубоко декомпозировать, определяешь ты сам, но сильно упарываться не стоит. Основная цель — понятность.
Я следую принципу: одно состояние блока — один макет (только общий), больше одного — два макета (базовое состояние на общем макете и все состояния на отдельном). Например, шапка сайта: зачем ее тащить из макета в макет, если она не меняется?
Используй только одно направление повествования
Быстро погрузиться в макеты помогает очевидная логика повествования, когда не возникает вопроса, где начало и конец.
Макеты можно размещать либо слева направо, либо сверху вниз — не важно. Главное, чтобы направление не менялось, а повествование начиналось с верхнего левого макета.
Это сэкономит время не только кому-то другому, кто откроет твои макеты, но и тебе самому, когда вернешься к ним через пару месяцев.
Не используй в макетах скриншоты
Скриншоты в макетах — это грязь. Варианта два: либо вообще не включать этот блок в макет, либо сверстать его. Потратишь лишний час, зато макеты будут чистыми, и ими будет приятно пользоваться.
Подписывайтесь на мой канал в Телеграме. Буду рад ответить на вопросы и помочь.
Серёжа Плащинский
