В наше время установлен очень высокий уровень требований к качеству пользовательского опыта в цифровых продуктах, а также визуальной привлекательности интерфейса. Общение между разработчиками и дизайнерами напрямую влияет на эти две вещи, и в итоге на качество цифрового продукта. Поэтому, веб-разработчику стоит базово разбираться в UX/UI дизайне, если у его команды стоит цель разработать качественный цифровой продукт (тоже самое относится и к дизайнеру).
Но что значит базово разбираться в UX/UI дизайне?
Чтобы ответить на этот вопрос, давайте посмотрим точки соприкосновения дизайна и разработки. В большинстве случаев процесс коммуникации между сторонами выглядит таким образом:
- Обсуждение дизайн-решений на начальной стадии реализации новой фичи в продукте или разработка нового продукта;
- Передача дизайн-макетов, графики и анимации для интеграции в продукт;
- Контроль качества разработки (дизайн-ревью).
На этих этапах и стоит сфокусироваться веб-разработчику, ведь они вызывают самое большее количество проблем из-за отсутствия синхронизации этих процессов, а у компании может не быть выстроенного процесса взаимодействия.
Senior UX/UI Product Designer Александр Андреев
Что тогда стоит знать веб-разработчику?
- Изучите процесс работы в Figma. Это даст вам больше свободы в действиях с дизайн-макетами, вы сможете быстрее ориентироваться в графическом редакторе, вносить правки в дизайн и предлагать свои решения (это нормальная практика). Достаточно будет изучить основные функции, займет это не больше 6–8 часов вашего времени с учетом практики.
- Изучите базовые дизайн-принципы пользовательских интерфейсов (basic ui principles). Понимание этих принципов даст вам возможность избежать огромное количество ошибок в визуальной верстке интерфейса и минимизировать визуальные баги, что очень часто встречается у разработчиков. Кроме того, вы сможете понять, почему дизайн именно такой, почему он живет по таким правилам (правила внутреннего и внешнего, почему заголовки строятся так, а не иначе и т.д.). На это уйдет не больше 10 минут изучения теории и до двух часов вашей практики в Figma, — введите в Youtube запрос “basic ui principles” и изучите материал.
- Также стоит изучить различные способы интеграции 2D, 3D графики и анимации в цифровой продукт. Это могут быть как различные плагины в Figma (откройте Community — Plugins и изучите список), так и сторонние решения, например, Lottie. Попробуйте разные способы и определите самый эффективный для своего продукта. Это поможет вам выполнить задачу в случае, если вы работаете с junior дизайнером и у него пока нет опыта интеграции графики в код.
Следуя этим простым, но очень важным пунктам, вы сможете сократить огромное количество времени и сил на разработку дизайн-решения, так как именно на этих простых моментах и происходит непонимание и задержка в сроках разработки. Например, стороны не договорились, кто будет подготавливать графику, анимацию и в каком формате. Или разработчик не увидел в дизайн-макетах различные состояния интерфейса. Эти проблемы стоит решать как со стороны разработки, так и со стороны дизайнера.
