обзор самых востребованных
дизайн-профессий в 2024 году

Как UX/UI-дизайнеру передать прототип приложения в разработку

Как UX/UI-дизайнеру передать прототип приложения в разработку
9 октября, 2023
7 мин

Разработка интерфейсов — это одна из сфер, где задачи дизайнера тесно пересекается с задачами фронтенд-разработчика, поэтому им необходимо уметь работать в команде. Ментор курса «Профессия UX/UI-дизайнер с нуля до про» Кирилл Староста рассказал, как правильно готовить макет, чтобы грамотно передать его в разработку и сделать крутой продукт.

Как работают в команде UX\UI-дизайнер и разработчик

Дизайнер интерфейсов и фронтенд-разработчик по сути выполняют одну работу — создают внешнюю часть продукта. Просто они делают это на разных этапах:

  • дизайнер проектирует интерфейс и делает его удобным, современным и продающим;
  • разработчик реализует задумку дизайнера, используя логику и код.

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

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

Чтобы общаться с разработчиками на одном языке, UX/UI-дизайнеру стоит разобраться в основах верстки: 

  • Изучить основы HTML и CSS, чтобы понимать, как прототип будет переносится в реальный продукт.
  • Понять основы JavaScript, чтобы иметь возможность мыслить таким же образом, как разработчик.

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

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

Как правильно передать макет в работу

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

Удалите лишние слои, которые не понадобятся разработчикам

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

Найти все скрытые слои и лишние элементы можно с помощью плагина Clean Document, который есть в открытом доступе в Figma Community.

очистка лишних слоев в прототипе
Источник

Создайте понятную иерархию слоев

Элементы лучше объединять в группы и вместо «Экран 1» и «Экран 2» выбирать для них понятные, устоявшиеся названия:

  • Home Page — экран главной страницы сервиса.
  • Sign Up — экран для авторизации.
  • Profile — экран с профилем пользователя.
  • Settings — экран с настройками.

Иерархия будет отображаться в настройках в левой части экрана, и лучше всего ее организовать «матрешкой», где все мелкие элементы объединяются в группы. В примере ниже слои экрана Subscription plans содержат подгруппы:

  • iOS / Status Bar
  • Action
  • Title
  • Options
Создайте легкочитаемой иерархии слоев с названиями в Figma
Источник

Если развернуть каждую из этих подгрупп, то внутри будут более мелкие составляющие, например, в iOS / Status Bar будут разделы:

  • Container
  • Action

Раздел Container в свою очередь содержит еще более мелкие элементы:

  • индикатор Wi-Fi,
  • индикатор сигнала мобильного оператора;
  • индикатор заряда батареи.

Прописывайте названия элементов с учетом содержимого

Мелкие элементы на каждом экране тоже должны иметь понятные названия:

  • Button (кнопка)
  • Icon (иконка)
  • Image (изображение)
  • Background (фон)
  • Tab Bar (нижняя панель меню)
перед отправкой прототипа заказчику проверьте все элементы
Источник

Для удобства всей команды лучше использовать английский язык и избегать транслитерации, то есть написания русских слов латиницей. Например, слой с кнопкой должен называться «Button», а не «Knopka 1». Если с английским есть трудности, то можно воспользоваться переводчиком, для этих целей его будет достаточно.

Проверьте размеры компонентов и отступы

Размеры всех элементов макета и отступы между ними должны обозначаться целыми числами. Например, изображение может быть размером 720px, но не 720,36px. Посмотреть, является ли размер целым или дробным числом можно в настройках справа:

размеры и отступы
Источник

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

  • большие отступы между блоками;
  • средние отступы между элементами внутри блоков;
  • самые маленькие отступы — для самых маленьких элементов.
выравнивание элемента в прототипе
Источник

Выносите компоненты на отдельную страницу

Для иконок, изображений и кнопок можно создать в Figma отдельную страницу. Так разработчику не придется искать нужный элемент по всему макету. Если ему понадобится конкретная иконка, он сможет посмотреть на странице Components все имеющиеся в макете иконки и выбрать нужную.

компоненты на отдельной странице
Источник

Покажите все состояния компонентов

У одной кнопки может быть несколько состояний, то есть вариантов того, как она выглядит в разных ситуациях:

  • Default — базовый вид активной кнопки, которую можно нажать;
  • Active — кнопка в состоянии нажатия, которая показывает, что пользователь успешно на нее кликнул.
  • Disabled — неактивная кнопка, которая показывает, что действие сейчас недоступно.
кнопки и пояснения их состояния

Проверьте, чтобы в разделе с компонентами был каждый из них. Если не добавить в итоговый проект состояния кнопок, то при ошибке пользователь не сможет понять, в чем проблема — в том, что он нажал мимо кнопки или в том, что приложение зависло.

Визуализируйте анимацию

Показать всегда проще, чем описывать. Поэтому, если в проекте предполагается анимация элементов, можно воспользоваться базовыми возможностями Figma, воссоздать ее с помощью After Effects или другой альтернативной программы.

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

Чек-лист для проверки макета перед отправкой в разработку

  1. Проверьте, нет ли в файле лишних элементов и скрытых слоев.
  2. Переименуйте названия слоев и компонентов, чтобы они точно передавали содержание.
  3. Составьте иерархию элементов в проекте, чтобы каждый мелкий элемент находился внутри более крупной подгруппы.
  4. Сохраните в отдельной вкладке все графические элементы: изображения, иконки, кнопки.
  5. Проверьте, есть ли все необходимые состояния компонентов: активные и неактивные.
  6. Проверьте размеры элементов и систему отступов, чтобы они обозначались целыми числами, а не дробными.
  7. Визуализируйте анимацию с помощью Figma или сторонних программ там где это возможно. Если не умеете работать с анимацией — покажите референсы.
  8. Заранее оставьте комментарии там, где у разработчиков могут возникнуть вопросы.

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте также

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент