Школа
Веб-разработка

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

22 авг 2019
👁 5900   🗩6
Веб-разработка

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

22 авг 2019
👁 5900   🗩6
Юрий Мазурский
Разработчик и дизайнер
Полезно
 16
16
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бесполезно

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

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

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

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

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

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

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

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

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

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

Веб‑разработка
Полезно
 16
16
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Дима Шишикин

Что с ходу помню:

  1. Перестаньте делать макеты в Фотошопе.

  2. Следите за отступами в текстовых блоках, должно быть понятно какой отступ с какой стороны.

  3. Делайте отдельный артборды с состояниями. У каждого элемента должны быть все возможные состояния.

  4. Помните, что режимы смешивания до сих пор плохо работают в вебе.

  5. Не используйте дробные размеры и отступы.

  6. Делайте нормальные СВГ‑иконки. Хватит уже засовывать ПНГ.

Константин Барышников

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

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

Валерий Сайфуллин

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

Виталина Барабаш

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

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

Владимир Озирный

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

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы