ГлавнаяНовостиКак подружиться UI-дизайнеру и Frontend-разработчик

Как подружиться UI-дизайнеру и Frontend-разработчик

2 года назад
Статьи
2648
0

Сложно представить верстку Frontend-разработчика без созданного макета интерфейсов UI-дизайнером, как и ровным счетом наоборот. Без «оживления» кодом нарисованного дизайна макет остается просто макетом. Эти две IT-специальности взаимодополняют друг друга, и поэтому в идеале они должны работать в одной команде. Но на деле возникают по разным причинам конфликты и недопонимания.

Могут ли веб-дизайнер и фронтенд-разработчик «подружиться»? И как к этому прийти? В этой статье мы расскажем об их взаимодействии на одних из главных этапах разработки — прототипировании и верстки.

 

Решение проблем сотрудничества UI-дизайнера и Frontend-разработчика

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

 

Ошибка №1 

Дизайнер и верстальщик не понимают функционал друг друга

Дизайнер должен осознавать профессиональный уровень и рабочий потенциал верстальщика. Перед началом работы над проектом как UI-дизайнеру, так и Frontend-разработчику необходимо обсудить идею дизайна и возможности ее реализации. Таким образом можно избежать ненужных правок в дальнейшем.

Решение ошибки №1

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

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

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

 

Ошибка № 2

UI-дизайнер и Frontend-разработчик работают на разных этажах

Если верстальщик с дизайнером находятся не в одном помещении, то им сложно работать продуктивно. Их творческий союз натыкается на кучу потраченного времени. Куда быстрее выяснить приоритетный вопрос тет-а-тет, чем писать и отправлять электронное письмо. Этот организационный недочет скорее касается HR-отдела. Тем не менее, советуем:

Решение ошибки №2

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

 

Ошибка №3

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

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

Решение ошибки №3

Сейчас на рынке представлен огромный выбор графических редакторов. Все, что нужно — это согласовать программу, которая удобна и для веб-дизайнера, и для фронтенд-разработчика. Такие продукты, как Adobe (например Adobe XD), Sketch, Figma или Framer, наиболее просты, понятны и комфортны для работы. Изменения можно делать онлайн, файлы хранятся в облаке, также легко вытащить информацию при необходимости. Поэтому решите для себя вопрос, в какой программе вы будете создавать и править макеты, и процесс пойдет как по маслу.

 

Дополнительные рекомендации UI-дизайнеру и верстальщику для «перемирия»

Совет дизайнерам:

  1. Использовать сетку — базовый элемент в работе. Однако веб-дизайнеры его часто игнорируют.
  2. Показывать ховер-эффекты (состояния объектов при наведении или нажатии на них) верстальщику. В противном случае, он додумает и сделает по-своему.
  3. Типизируйте все объекты на макете. Если вы хотите сработаться с верстальщиком, изучите связку Атомарный дизайн + БЭМ.
  4. Называйте слои по смыслу и группируйте их.
  5. Комментируйте статичный макет дизайна.

 

Совет фронтенд-разработчикам:

  1. Создайте макет. Изучите базовые принципы работы с дизайном. Попробуйте понять проблемные точки в работе UI-дизайнера.
  2. Не пренебрегайте ненужными по-вашему мнению элементами. Никто не любит, когда его работу обесценивают. К тому же, какой-либо объект может иметь стратегическое значение.
  3. Обсудите с дизайнером все спорные моменты в макете, чтобы избежать дальнейших разногласий.
  4. Освойте один, а лучше несколько графических редакторов.

 

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

Лучшие материалы
Майже 80 днів йде запекла боротьба на території України. Щодня ми отримуємо величезний потік інформації, про ситуацію на ...
Що потрібно для того, щоб створити продукт, який допоможе Україні зробити крок до перемоги ? Одеські ITівці знають ...
Карантин готував українську економіку до більш жорсткого випробування - війни. Війна показала, що головне в роботі -   ...