x
 
Юрий Мазурский
22 августа 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как лучше готовить макеты для технологов? Что имеет смысл делать или объяснять технологу, а что нет?


Ответ­ствен­ные дизай­неры любят орга­ни­зо­вы­вать свои макеты по какой‑то системе, при­ня­той в ком­па­нии или осно­ван­ной на своих сооб­ра­же­ниях. Любят груп­пи­ро­вать слои, давать спе­ци­аль­ные назва­ния груп­пам, коди­ро­вать их цве­тами, исполь­зо­вать Layer Comps.

На прак­тике я столк­нулся с тем, что довольно часто для тех­но­лога всё это не имеет ника­кого смысла и не помо­гает в вёрстке.

Дело вот в чём — вся работа тех­но­лога с маке­тами сво­дится к двум задачам:

  1. Понять, какие у макета есть состо­я­ния и ограничения.

  2. Визу­ально точно вос­про­из­ве­сти макет.

Для реше­ния пер­вой задачи в иде­аль­ном мире суще­ствуют стро­гие пра­вила орга­ни­за­ции маке­тов, кото­рых неукос­ни­тельно при­дер­жи­ва­ются и дизай­неры, и тех­но­логи. Но шансы сфор­му­ли­ро­вать такие про­стые и одно­знач­ные пра­вила довольно при­зрачны. Мне ни разу не уда­ва­лось. Каж­дый про­ект раз­ный и все­гда появ­ля­ются исклю­че­ния, не впи­сы­ва­ю­щи­еся в правила.

Если в одном макете сразу несколько состояний, то сгруппировать их не помешает:

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

Если в одном макете сразу несколько состояний, то сгруппировать их не помешает:

Состо­я­ния кно­пок, ком­бо­бок­сов и дру­гих эле­мен­тов удобно пока­зы­вать на отдель­ном листе в виде матрицы:

Кстати, это помо­жет не упу­стить про­белы в раз­лич­ных состояниях.

Реше­ние вто­рой задачи сво­дится к изме­ре­ниям раз­ме­ров и рас­сто­я­ний. Для этого не надо знать, в какой группе лежит та или иная кнопка. Тех­но­лог про­сто берёт Move tool и выби­рает нуж­ный эле­мент. Потом дошли­фо­вы­вает, накла­ды­вая кар­тинку макета на живую вёрстку.

Я часто ловлю себя на мысли, что в слои я вообще не смотрю. Поэтому в мани­а­каль­ном пере­име­но­вы­ва­нии каж­дого слоя нет смысла. Так тоже нормально:

Пол­ная бес­си­стем­ность в име­но­ва­нии слоёв кос­венно под­твер­ждает, что ника­кая система не нужна

На мой взгляд:

Бесполезно

Осмыс­ленно назы­вать каж­дый слой

Груп­пи­ро­вать каж­дый, даже самый малень­кий блок в соот­вет­ствии с логи­че­ской иерархией

Исполь­зо­вать Layer comps для слож­ных интер­фей­сов с боль­шим коли­че­ством состояний

Будет полезно технологу

Давать назва­ния круп­ным бло­кам и раз­ным состо­я­ниям интерфейса

Груп­пи­ро­вать круп­ные блоки и раз­ные состо­я­ния интерфейса

Исполь­зо­вать артборды

Пока­зы­вать раз­ные состо­я­ния на раз­ных артбордах

А какой под­ход исполь­зу­ете вы?

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Дима Шишикин
22 августа 2019

Что с ходу помню:
1. Перестаньте делать макеты в Фотошопе.
2. Следите за отступами в текстовых блоках, должно быть понятно какой отступ с какой стороны.
3. Делайте отдельный артборды с состояниями. У каждого элемента должны быть все возможные состояния.
4. Помните, что режимы смешивания до сих пор плохо работают в вебе.
5. Не используйте дробные размеры и отступы.
6. Делайте нормальные СВГ-иконки. Хватит уже засовывать ПНГ.

Константин Барышников
22 августа 2019

Я веб-разработчик, и тем дизайнерам, кто делает Layer Comps в сложных макетах готов воздвигнуть памятник. Под сложными я имею ввиду сложность уровня Гугль-документов или Гугль-почты.

С кучей отдельных макетов всегда возникает проблема их синхронизации. Всегда так оказывается, что дизайн не финальный. В ходе разработки выясняются нюансы: неочевидная «незамкнутость» (термин Бирмана) интерфейсов, технические ограничения, требующие «пофлексить» дизайн… И через несколько недель у меня тридцать файлов и текстовый файлик с пояснениями вида: «Фичу А смотреть в A.psd, но заголовок везде как в B2_new.psd, а вот кнопочки из Buttons2.psd, за исключением тех особенных, которые в C_new_latest.psd». Умом тронуться можно. Понятно, что вариант «перерисовать все тридцать макетов» тоже существует, но на практике никогда не реализуется.

Валерий Сайфуллин
26 августа 2019

Константин, по-моему дизайнеров, которые используют ФШ для макетов типа Гугл-доков и Гугл-почты, стоит избегать.

Виталина Барабаш
27 августа 2019

Объясните, пожалуйста, почему не стоит делать макеты в Фотошопе? В какой программе стоит делать? Я привыкла делать в Иллюстраторе, но интересно послушать мнения.

Николай Петюх
27 августа 2019

Дима Шишикин, что не так с фотошопом?

Владимир Озирный
30 августа 2019

Это как микроскопом забивать гвозди, но лучше молотком. Фигма, Скетч, Адоб Икс-ди — берите любой.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Вы используете Зеплин? 1 Несколько месяцев назад меня повысили из обычного разработчика до «тимлида» 1 Как правильно, эффективно и уважительно ставить KPI? Как отслеживать и обрабатывать чит-коды 3




Недавно всплыло

Хочу научиться сторителлингу 2 2 4 2