Как дизайнеру понять фронтендера, чтобы проект выглядел так как вы его задумали

Дизайнеры, передающие макеты на разработку, говорят: “Трава соседа всегда зеленее”. Программисты зарабатывают больше. Как бы вы не старались, фронтендер всегда что-то испортит.

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

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

1 — разная гравитация

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

В Figma почувствовать гравитацию можно создав autolayout. Эта функция дает почувствовать себя на месте фронтендера и включает дизайнеру гравитацию. Когда гравитация включается, то метод работы с объектами тоже меняется. Их нельзя просто подвесить в воздухе.

2— застывший снимок против живого мира

Дизайнер и фронтендер смотрят на одни и те-же вещи по-разному. Для дизайнера макет — это как фотография определенного размера, где объекты стоят на своих местах. Для фронтендера это живой мир, который по сути не имеет границ и живет в реальном времени. Это значит, что нужно предусмотреть привязку объектов и что с ними случится при сужении и расширении окна браузера. Это можно имитировать в Figma с помощью настройки Constrains для объектов и настройки минимальных и максимальных величин для фреймов.

3–мир образов против мира слов

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

Фронтендер начинает с названия объекта. В его мире “Сначала было слово” — это основа работы. Каждый объект должен иметь имя, иначе он не существует. Представьте, что вы не можете создать группу, не придумав ей название. И даже поведение объекта зависит от его имени. Простой пример как дизайнер создает фрейм. Его мотивация – быстро сгруппировать объекты, чтобы выровнять отступы. Я использую горячие клавиши Shift+A. На этом создание группы заканчивается.

Чтобы дать ей имя нужно приложить усилие и нажать Cmnd+R и ввести название. А фронтендер начинает создание группы с названия. Т.е. пока он не ввел название ничего не создано. В этом и разница. Переключив мышление с визуального на логическое вы сможете привыкнуть к называнию групп и групп внутри групп.

Этому важно научиться, чтобы ваш макет был понятен фронтендеру и так можно даже сэкономить ему время — с вами будет приятнее работать.

Есть так же мнение, что фронтендеру не важно как дизайнер назвал группы в макете, ведь он их все равно переименует. Но согласитесь, что frame в котором лежит frame 1 и frame 2 сложнее понять, чем menu container в котором лежит menu items и logo. Даже не рисуя макет в этом легче разобраться и понять как устроен ваш дизайн. Кстати это хорошая проверка названий — если вы можете без картинки объяснить созданный объект, значит названия даны правильно.

4–наследование свойств

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

Эту механику частично повторяют автолэйауты. Возможно вы, делая макет с автолэйаутами путаетесь, что настроить для позиционирования: объект или контейнер, который его содержит? Так вот—за позиционирование объекта отвечает именно контейнер в котором он находится. Осознав это однажды работать с автолэйаутами станет работать проще.

5–то, что очевидно дизайнеру не очевидно разработчику

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

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

Чтобы понять фронтендера, нужно понять его ограничения. Попробуйте создать макет, используя только автолейауты в Figma. Даже основной фрейм должен быть автолейаутом. Вы столкнетесь с вопросами: как позиционировать элементы, какие отступы выбрать. Понятно, почему дизайнеры избегают этого — это усложняет размещение объектов. Если раньше вы не использовали автолейауты, создание даже простого меню может занять несколько часов. Но с опытом всё становится быстрее.

Использование автолейаутов приводит нас к следующей важной теме — контейнеры внутри контейнеров. У фронтендера всё имеет иерархию. Для создания меню он создает контейнер “меню”, в котором уже находятся другие контейнеры — “пункты меню”, “контакты”. Объекты размещаются в этих контейнерах. Так сделано, чтобы избежать одинаковых отступов, если бы пункты меню и контакты были в одном контейнере. Дизайнеры этого не ощущают, потому что обычно используют абсолютное позиционирование. Но с автолейаутами появляются ограничения, которые дизайнер не видит в графическом редакторе.

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