Как организовывают взаимодействие frontend-разработчика, UX-специалиста и дизайнера при разработке веб-приложений?

Question

[lkart]

Под дизайнером здесь имею в виду человека, который делает красиво и отрисовывает макеты страниц, которые отправляются к разработчику.
Интересуют в том числе инструменты и ОС, которые в этом процессе используются, и как решаются связанные с ними проблемы. Например, фронтэндер предпочитает работать в Linux (не все же еще на Маки перешли?), а дизайнер рисует в Adobe Illustrator на своем Маке, в результате фронтэндеру макет у себя не открыть.
Хотелось бы почитать о реальном опыте обозначенного рабочего процесса и взаимодействия, особенно в крупных компаниях при разработке серьезных проектов. Даже не представляю как подобные процессы происходят в том же Яндексе или Гугле.

Answer 1

[Максим Шайхалов]

Расскажу как это работает у меня и какие видел реализации.

Вариант уно

• Фронтэндеры работают на Винде и Маке. Хотя сейчас потихоньку всех переводят их на Мак т. к. дизайнеры переходят с Фотошопа на Скетч.
  
• Дизайнеры работают в ФШ и Скетче. Но все больше переползают на скетч.
  
• Проектировщики работают на Винде и Маке. Делают прототипы в Акшуре. На выходе интерактивных html-прототип, который работает везде.
  
• Бэкэндеры работают на чем хотят. Большинство на Линкусе ибо работают уже с готовой версткой.
  

Примерный процесс:

1. Проектировщики делают скетчи, фигачат прототипы, продумывают функциональность и логику работы приложения. Затем интерактивный прототип презентуется перед всей командой (в дизайне ведь все разбираются). На этом этапе вся команда смотрит, чтобы не было принципиальных косяков и всё было реализуемо.
   
2. Макет передается дизайнеру. Совместно с проектировщиком они делают дизайн. Роль проектировщика — авторский надзор за реализацией его идей. Т. е. со стороны UX все конечные решения за проектировщиком, со стороны визуала все конечные решения за дизайнером.
   
3. Готовый дизайн передается фронтэндерам. Дизайнер следит, чтобы всё было ОК со стороны визуала.
   
4. Верстка передается бэкэнду. Дизайнер следит, чтобы все было хорошо со стороны визуала. Проектировщик следит, чтобы все работало корректно со стороны UX.
   
   

Вариант дуо
Здесь небольшие изменения, когда есть аналитик (исследует пользователей и проводит юзабилити-тесты), который доносит дизайнеру интерфейсов набор требований. Дизайнер фигачит скетчи, делает дизайн и заливает его на Инвижн, чтобы добавить интерактива. В этом случае дизайнер одновременно и проектирует, и рисует.

Далее все по схеме описанной выше.

Answer 2

[Андрей Гордиенко]

К существующим ответам могу добавить пару советов из личного опыта:

1. Сделайте общение внутри команды максимально простым и эффективным, для этого есть Slack. В идеале возложить на кого-то роль куратора этих коммуникаций — это немного снимет ответственность с участников и раскрепостит общение.

2. Распределите роли в команде так, чтобы обязанности шли с нахлестом — то есть в малой мере пересекались у разных участников. Где нет нахлеста — швы расходятся, а из них лезут процессы, которые ни за кем не закреплены.

В команде с налаженным, непринуждённым общением и старательно выделенными объемами обязанностей, высокоуровневые проблемы типа «какая ОС» и «кому что давать и в каком виде» будут решаться сами собой — а точнее силами вашей команды. Удачи!

Answer 3

[Trow_eu]

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

Answer 4

[Павел Волынцев]

Фронтендщику работать в Linux будет некомфортно.

Монстры от Adobe обогнали своих аналогов и задали линию поведения всех, кто связан с веб-дизайном.

В линуксе есть GIMP - он не дотягивает до Photoshop.
Файлы PSD можно конвертнуть в другой формат, но потеряется информация о слоях и других важных вещах.

Придётся постараться сделать так, чтобы Photoshop запустился. Это может быть:

• виртуальная машина с установленной Windows. Удобный режим интеграции рабочих столов делает работу в двух операционных системах очень прозрачной, но памяти требует просто уйму.
  
• вторая операционная система на компьютере. Надо перезагрузиться, чтобы поработать с фотошопом. Некоторые привыкают к этому
  
• не помню, запускается ли Photoshop под wine
  

В общем выбор: Mac или Windows. На Windows можно сэкономить, выбрав менее мощный комп. Простой выбор.

Comments

[Константин Китманов]

Уже лет пять работаю фронтендером на линуксе. Под виндой кодить мука мученическая, а макеты можно получить в png или, в самом крайнем случае, открыть в виртуалке. GIMP, кстати, вполне сносно открывает PSD, если дизайнер не переусердствовал с эффектами и смарт-объектами.

[Сергей Сергеев]

Хм.. научите как верстать с png?

[lkart]

Дело в том, что когда фронтэндер это не просто верстальщик html, а человек, использующий в своей работе всякие пре и постпроцессоры, сборщики, менеджеры зависимостей, транспиллеры, в конце концов git, то на Windows, без нормальной консоли, ему становится как-то неуютно, или я не прав?

[Павел Волынцев]

lkart Пакет git-scm.com/download/win включает утилиту git-bash, которая даёт доступ к консоли. Урезанная такая консоль, но основные команды linux поддерживаются. Не испытываю неудобств от того, винда в основном на мышке, а линукс в основном на клавиатуре.

[SerzN1]

*шторм ... не не слышал? ПС: верстать под линуксом да еще с пнг - полный бред.

Answer 5

[Алиса Трибулева]

Ну, я про инструменты добавлю...
У Адоба есть такой онлайн-сервис для .PSD макетов – Assets. https://assets.adobe.com/files

Для совместной работы фронт-энд разработчика и дизайнера, который работает в Sketch, потестите такую штуку как Zeplin.