UX_UI Дизайнер и Программист (2)

1.

UX/UI Дизайнер и Программист
Как устроен мир создания цифровых интерфейсов, кто за что отвечает и как
наладить идеальное взаимопонимание внутри команды

2.

Что такое UX: Логика и Скелет
Исследования и структура
Прототипы и логика
UX (User Experience) отвечает за опыт взаимодействия.
Это создание детальных схем экранов (варфреймов) без
Дизайнер выясняет боли и привычки пользователей,
цвета, стилей и картинок.
проектирует карту путей (User Flow) и информационную
Прототипы позволяют протестировать интерфейс и выявить
архитектуру.
проблемы до того, как разработчики приступят к написанию
Его главная цель — сделать так, чтобы решение задачи
пользователя внутри приложения было быстрым, понятным и
не требовало лишних усилий.
кода. Это значительно снижает общую стоимость возможных
ошибок.

3.

Что такое UI: Эстетика и Стиль
Красота на службе у пользы
UI (User Interface) — это создание финальной оболочки. На этом
этапе схематичные блоки оживают и приобретают характер.
Цветовая гамма: Создает настроение и выделяет важные кнопки среди
второстепенных.
Типографика: Делает тексты читаемыми на любых типах дисплеев за
счет правильной иерархии.
Микроанимации: Делают интерфейс живым и дают пользователю
обратную связь («кнопка нажата», «идёт загрузка»).

4.

Процесс работы UX/UI дизайнера
1 . Исследования и ТЗ. Дизайнер общается с заказчиком и будущими пользователями, выявляет
основные сценарии использования продукта.
2. Логическое проектирование. Создание блок-схем и интерактивных черно-белых прототипов в
Figma для согласования базовой логики.
3. Визуальный дизайн и UI-Kit. Наведение эстетики, отрисовка чистовых экранов, подготовка
библиотеки кнопок и шрифтов для передачи в разработку.
4. Юзабилити-тестирование. Тест дизайна на реальных людях, поиск слабых мест, корректировка
макетов на основе собранной обратной связи.

5.

Роль программиста в проекте
Frontend: Интерактивный фасад
Backend: Внутренний механизм
Frontend-разработчик забирает макеты дизайнера и
Backend-разработчик выстраивает серверную логику и
превращает их в рабочий код при помощи HTML, CSS и
структуру хранения данных за кулисами.
фреймворков (React, Vue, Angular).
Он делает так, чтобы по нажатию на красивую кнопку заказа,
Он оживляет кнопки, обеспечивает плавность анимаций,
нарисованную дизайнером, товар действительно
следит за тем, чтобы сайт одинаково красиво открывался как
резервировался в базе данных и происходила оплата.
на компьютере, так и на смартфоне.

6.

Figma: Общий язык общения
Пространство совместной работы
Figma стёрла границу между дизайном и версткой. Разработчики
больше не работают со слепыми скриншотами.
В режиме инспектирования программист видит точные расстояния в
пикселях, параметры шрифтов, скругления углов и может
экспортировать иконки в один клик.
Инструмент позволяет в реальном времени оставлять комментарии
прямо на макетах, ускоряя согласования.

7.

Почему возникают конфликты?
«Летающие замки»
Слепые зоны
Поехавшая верстка
Дизайнер рисует сложную кастомную
Дизайнер забывает отрисовать редкие
В коде отступы отличаются на 4 пикселя
3D-анимацию или нестандартную
состояния: экран ошибки сервера, пустую
от Figma. Для дизайнера это трагедия и
структуру, реализация которой займёт
корзину или процесс долгой загрузки.
нарушение сетки, а для разработчика —
недели работы и замедлит сайт.
Разработчик вынужден импровизировать.
невидимая глазу деталь.

8.

Идеальный рабочий тандем
Как сделать работу слаженной?
Ранняя синхронизация. Дизайнеру стоит обсуждать сложные концепции
с разработчиком до начала финальной отрисовки, чтобы оценить
трудозатраты.
Использование единой библиотеки. UI-Kit (набор стандартных кнопок,
полей, цветов) должен совпадать с библиотекой компонентов в коде.
Взаимный интерес. Дизайнеру полезно понимать принципы CSS
Flexbox/Grid, а разработчику — базовые правила типографики и UX.

9.

Эффект правильного сопряжения
Синхронная работа дизайнера и разработчика с использованием общей дизайн-системы сокращает
показатель Time-to-Market (скорость релиза фич) более чем на 50% и на порядок снижает количество
багов верстки.