Взаимодействие UI-дизайнера и Frontend-разработчика

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

Дизайнер интерфейсов и фронтенд-разработчик — кто они?

UI-дизайнер создает понятные и простые интерфейсы для пользователя. Главную роль играют удобство и внешний вид.

Для примера:

UI — то, как выглядит телевизор.

Плохой UI — когда на экране черная тонировка.

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

Сложность в понимании

Проблема №1 — непонимание функционала

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

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

Проблема №2 — дизайнер и фронтенд не работают в одном помещении

Информация о недочетах и правках отправляется на почту. Это усложняет работу, замедляя, минимум, в два раза. Если макет рисуется в Photoshop, то быстро передать файл в гигабайт сложновато. Таких исправлений может быть множество.

Со специалистом на аутсорсе, также, ничего путного не выйдет. Без прямой коммуникации он не поймет «настроение» проекта. Концепция продумывается коллективом и в ходе обсуждения каждый понимает свою задачу. Фрилансеру придется объяснять проект от и до.

Записывать скринкасты с демонстрацией анимации, разжевывать каждый момент. Верстка на «удаленке» — куча потраченного времени и сомнительный результат. Вся команда должна быть «на одной волне», каждый всегда привносит что-то в проект.

Наше решение

Хотите ускорить рабочий процесс — посадите дизайнера и фронтенд-разработчика в одно помещение. Еще лучше — за один стол. Офис Студии основан на технологии открытого пространства, в простонародье «open space». Коллектив постоянно общается, обсуждается каждая концепция, согласовываются идеи. В ходе беседы каждый представляет, что будет в проекте и как это реализовать, вносит свои предложения. Ощущается работа единого организма.

Дизайнеру ничего не мешает «подкатить» на стуле и обсудить детали. Стоит ли говорить, что тестировать проект вдвоем гораздо эффективнее? Ошибки всплывают сразу. Решения приходят быстро. Правки вносятся незамедлительно.

Синхронизация

Синхронизация фронтенда и дизайнера — важный пункт. Работа проходит быстрее, когда фронтенд знает любимые приемы дизайнера, и наоборот.

Каждую неделю мы собираемся и просматриваем отобранные сайты. Делимся впечатлениями, разбираем конструктив и логику. Такой подход прививает навыки «хороших и плохих решений». Позволяет понять, где дизайн хорош, а где не очень, и что можно поменять.

Фронтенд и дизайнер в одном лице

Пусть каждый занимается своим делом. Нельзя одинаково хорошо проектировать и строить дома. Как только начинаете распыляться, оказываетесь на шаг позади. Разработчики считают, что обе профессии подвластны одному человеку. На digital-рынке встречаются универсалы, которые и «дизайнят» и верстают.

У нас свое мнение на этот счет. Fullstack-дизайнер сделает проще. Не в его интересах создать невероятный дизайн, а потом страдать над реализацией. Он будет ограничивать себя в действиях до тех пор, пока проект не станет максимально простым. Не стремитесь быть лучшими во всем. Своей сферы достаточно.

Сложности 2.0

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

Ошибки начинаются на стадии сохранения. Существует немало рекомендаций по именованию, которыми пренебрегают. Шутки про кучу файлов, с названием «FINAL123123.psd», появились не просто так. В зависимости от проекта исходник весит от 100 МБ до двух гигабайт. Разработчик скачивает файл, но с ним не всегда комфортно работать. Мощности компьютера не хватает, редактор зависает.

С появлением Zeplin стало проще. Загружаешь файл с дизайном на сервер и фронтенд не переживает за производительность. Однако, это очередное неудобное решение. Zeplin не решает проблему, он прививает новые привычки в работу дизайнера и фронтенда. Появляются новые трудности. Редактировать проект можно только через Photoshop, а затем, повторно выгружать в Zeplin.

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

Figma

Для работы мы используем Figma — «open space» в виртуальной реальности. Относится к линейке современных инструментов, который объединяет в себе фишки по работе с векторной графикой и прочим инструментами UI дизайна. Figma взяла лучшее от Sketch и Zeplin и добавила свое.

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

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

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

Еще немного приятных фишек Figma

  • Группам объектов можно отдельно задавать размеры для ширины и высоты;
  • Теперь ошибки о недостающих шрифтах не испугают. Figma работает с Google Fonts напрямую;
  • Интеграция с Framer одним щелчком мыши. Внедряйте идею интерфейса в код и тестируйте;
  • Поддержка графики SVG — иконки при экспорте не теряют детали и градиент;
  • Совместная работа в облаке;
  • Удобная файловая система.

Чем хочется подытожить

Разработка — место, которое окружено забором и каждый трудится на своем участке. Дизайнер занят отрисовкой, фронтенд верстает. Иногда случается так, что перестаешь видеть дальше монитора.

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

0
25 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

Солидарен, но статью плюсанул - надо стимулировать появление подобного контента тут, ибо маловато его пока.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

Почему? И кому?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens
Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

И это прекрасно, просто дай и другому мнению пожить немного.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

+1 за Фигму - я рад, что информация об этом сервисе разносится в массы, пофиг какого качества. Нужно привлечь больше внимания, так как по факту сейчас это безальтернативный выбор дизайнера интерфейсов (не надо мне только про скетч сейчас затирать, товарищи яблочники). Больше внимания = больше давления на разработчиков, глядишь подсуетятся и быстрее внедрят новые фичи.

-1 за вот это:

Хотите ускорить рабочий процесс — посадите дизайнера и фронтенд-разработчика в одно помещение.

Тем временем, 2018 год на дворе. Удалёнка и распределённые команды уже давно доказали свою жизнеспособность, эффективность и экономичность. Спорить даже не о чем.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

Насчёт производительности - у кого как, кстати. Многие жалуется, но у еще большего количества юзеров проблем нет.

Интеграции не хватает, да. Но работать вполне можно, и даже бесплатно, что немаловажно.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

Какая конфигурация у компьютера и ОСь?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens

Поменяй на i7 и 16гб минимум - тогда будет зашибись. 10гб ОЗУ это очень мало для любого граф.пакета, когда речь идёт про интенсивный конвеер графония.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artyom Konakov

Я в люстре рисую иконку, например, и потом просто через копировать вставить ее помещаю в фигму, за редким исключением все отлично. Тоже самое для фотошопа, если рисовать шейпами и делать копирование svg

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Kostya Levin

Фигму, что ж еще)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Kostya Levin

Глядишь Фигму продадут, а заодно и услуги прораба

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
22 комментария
Раскрывать всегда