Между дизайнерами и разработчиками часто возникает «пропасть», иначе говоря gap. Это мешает создавать качественные интерфейсы и замедляет процесс разработки
Почему возникает этот gap в коммуникации?
Разные подходы к работе: дизайнеры сосредоточены на визуале и опыте, а разработчики – на технической реализации
Недостаток технической грамотности у дизайнеров: если дизайнер не понимает, как устроен фронтенд, он может делать нерабочие решения, которые потом приходится переделывать
Неправильная передача макетов в разработку: неструктурированные файлы, отсутствие нейминга слоев, непроработанные состояния (hover, focus и т.д.) и сценарии. Чаще всего дизайнер рисует картинку в статичном состоянии, а не продумывает, как с ней будут взаимодействовать команда и пользователи
Что можно сделать дизайнеру, чтобы улучшить взаимодействие?
- Изучить основы фронтенда (HTML/CSS) на базовом уровне + панель разработчика + атомарный дизайн, названия и функции элементов
- Поддерживать порядок в файле, чтобы всей команде было ясно, где что находится и в каком статусе готовности
- Давать релевантные названия слоев, компонентов и их пропсов (свойств)
- Проработать микро-ux (показывать все состояния элементов): обозначить где что лежит и подписать
- Использовать токены: согласовать с командой подход к созданию и неймингу
- Проработать все сценарии, каждый из которых лежит отдельно от другого с наглядным путем, комментами, ссылками, видео / прототипом
- Проводить дизайн-ревью, если есть возможность
Как вы можете помочь разработке?
Подсказывайте по взаимодействию с фигмой. Это не их основная программа, они не знают всех фич, обновлений и названий. Они не знают, как быстро пермещаться между макетами, компонентами и их состояниями
Нейминг в фигме отличается от нейминга в разработке, существует много не совпадений по функционалу
И самое главное, спрашивайте и уточняйте: «Что я могу улучшить? Как я могу тебе помочь?»
Здоровое взаимодействие – это не разовая передача файла, а постоянный процесс общения и доработки
Подробнее в видео
