Дизайн Siarhei Plashchynski
4 632

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Siarhei Plashchynski", "author_type": "self", "tags": [], "comments": 14, "likes": 30, "favorites": 77, "is_advertisement": false, "subsite_label": "design", "id": 61195, "is_wide": false, "is_ugc": true, "date": "Thu, 14 Mar 2019 16:05:34 +0300" }
{ "id": 61195, "author_id": 52629, "diff_limit": 1000, "urls": {"diff":"\/comments\/61195\/get","add":"\/comments\/61195\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/61195"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

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

Популярные

По порядку

Написать комментарий...
18

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

Ответить
0

почему?

Ответить
2

Потому что Figma / sketch / adobe xd

Ответить
11

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

Ответить
0

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

Ответить
0

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

Ответить
4

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

Ответить
1

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

Ответить
0

Мне недавно макет в гугл док прислали : D

Ответить
1

Хорошо что не в .mp3

Ответить
0

Человек делает макеты в скетче и предлагает рядом с макетом делать блоки а не создавать символы? Чёёё?

Ответить
0

Три правила из четырёх о том что нет ничего более постоянного чем временное

Ответить
0

Нехарактерное расположение макетов на последнем листе – это годнота, спасибо!

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }