UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Процесс разработки UI/UX дизайна и чем он может помочь дизайнеру
Андрей Романов 🇺🇦
Андрей Романов 🇺🇦

Опубліковано • Оновлено

Процесс разработки UI/UX дизайна и чем он может помочь дизайнеру

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

Процесс проектирования пользовательского интерфейса (UI) и пользовательского опыта (UX) представляет собой многоэтапный процесс, который включает в себя понимание потребностей и целей пользователей, создание каркасов и макетов, а также тестирование и итерацию дизайна. Этот процесс может варьироваться в зависимости от конкретного проекта и группы разработчиков, но есть несколько общих шагов, которым обычно следуют.

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


Зачем нужен дизайн процесс ?

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

  2. Улучшенная коммуникация: процесс проектирования также может помочь вам эффективно общаться с клиентами, заинтересованными сторонами или членами команды. Это может быть особенно важно при работе с клиентами или заинтересованными сторонами, которые могут быть незнакомы с процессом проектирования.

  3. Повышение эффективности. Наличие процесса проектирования может помочь оптимизировать вашу работу, позволяя вам работать более эффективно и результативно. Это может быть особенно важно при работе в сжатые сроки или с ограниченными ресурсами.

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

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

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

Дизайн процесс по этапам и методам разработки интерфейса

Image description

1. Постановка задачи:
Описание: Собираем внутренние вводные

  • Бриф и интервью (основатели, бизнес, продуктологи, сейлз менеджеры и другие)
  • Определение основных целей и задач бизнеса
  • Определение аудитории бизнеса (базовое понимание какая это категория людей)
  • Внутренние исследования, маркетинговые материалы (если они есть)
  • Анализ существующего продукта (если он есть)
  • Паспорт проекта (ТЗ другими словами)
  • Определение метрик (если мы делаем редизайн)

2. Аналитика и исследования:
Описание: Изучаем потребности пользователей, сценарии использования, best practices на рынке

  • Создание портретов пользователей или персон
  • Анализ рынка
  • Анализ конкурентов
  • User stories
  • Job stories
  • Качественные и количественные исследования
  • CustDev
  • Формулировка гипотез (прописание критериев)
  • CJM/Blueprint
  • Бенчмаркинг
  • Объектная модель
  • Список функций интерфейса
  • Сортировка функций методом Кано
  • Информационная структура

3. Проектирование:
Описание: Формируем смысловое и функциональное решение нашей задачи, готовим решение к ресурсной оценке

  • Карта экранов
  • User flow
  • Cутевая концепция
  • Варфреймы
  • Интерактивный прототип
  • Userflow c экранами
  • UX копирайтинг
  • Формирование гипотез
  • Написание критериев оценки гипотез
  • Брейншторм

Image description

4. Макеты дизайна:
Описание: Ищем изящное UI и UX решение, готовимся к внутреннему тесту, собираем прототип, презентуем дизайн

  • Работа с референсами
  • Дизайн-концепция
  • Страницы/экраны
  • Стейты, состояния, ошибки и т.д
  • Создание первичных компонетов
  • Ключевые адаптивы
  • Кликабельный прототип (желательно на интерактивных компонентах)
  • Видео-прототип
  • Презентация дизайна

Image description

5. Тестирование внутри:
Описание: Проверяем на соответствие изначальной задаче

  • Оценка дизайн-директором
  • Брейншторм и тестирование командой
  • Экспертное тестирование (бизнес и заказчики)
  • Коридорное тестирование
  • Тестирование на респондентах
  • Запуск не моделируемых тестов
  • Написание сценариев для Ю-тестов

Image description

5. Систематизация:
Описание: Если внутреннее тестирование прошло успешно и не нужно изменять интерфейс то готовим макеты к использованию для команды, поддержки и front-end разработки.

  • Стили типографики
  • Переиспользуемые блоки (такие, как например футер на сайте)
  • Чек-лист подготовки к front-end
  • Auto Layout
  • Variants
  • Система отступов
  • Цвета
  • Сетки
  • Анимация и микро-анимация
  • Микро UX
  • UI Kit или дизайн система
  • Подготовка описания изменений в макетах для верстки

Что если создавать UI без UX

Когда ощущения от использования интерфейса вроде бы классные, но функциональность вызывает вопросы. Если сайт или приложение вообще не помогает решить ваши задачи, что ты подумаешь? Значит, что они вообще не заботятся о своих пользователях. И какой бы классной ниббл UI это не поможет. Восприятие компании изменилось из-за пользовательского опыта. Если бы опыт был хорошим, то и восприятие UI улучшилось бы.

Мой дизайн процесс может отличаться от вашего, или он может вам не подходить под ваши задачи. По этому я дам вам ссылку на файл Figma с моим дизайн - процессом (Бесплатно). И вы можете отредактировать его под ваши методы разработки.

Ссылка на файл: https://drive.google.com/file/d/12W09N5qXFpMN_aN5dlL0WMUNltzhZKP4/view?usp=share_link


Спасибо за внимание!
Если статья для вас была полезной, добавьте автора статьи в свои контакты в Linkedin.

Топ коментарі (6)

Згорнути/розгорнути
 
cospl profile image
Андрій Кот

Дякую! А як файл відкрити, якщо через фігму то файл недоступний для вибору?

Згорнути/розгорнути
 
romanov_design profile image
Андрей Романов 🇺🇦

Зажимаешь файл и переносишь прям в Figma где все твои работы как будто в папку.

Згорнути/розгорнути
 
cospl profile image
Андрій Кот

Точно, вийшло) Дякую

Тред Тред
 
romanov_design profile image
Андрей Романов 🇺🇦

Не за что 😉

Згорнути/розгорнути
 
denys_koloskov profile image
Denys Koloskov • Змінено

Ну вот… вы Андрей пишете что являетесь дизайнером с 4х-летним опытом работы, а до сих пор не научились тому что использовать чужие работы (иллюстрации) для оформления своей статьи и не указывая автора этой иллюстрации у которого вы ее «взяли» не приемлемо. Исправьтесь пожалуйста, или замените иллюстрацию если не хотите ссылаться на ее автора.

П.с. Автора иллюстрации вам подсказать? Или вы помните у кого вы ее стащили?)

Згорнути/розгорнути
 
romanov_design profile image
Андрей Романов 🇺🇦 • Змінено

Я сосредоточился на статьи, а не на иллюстрации сейчас заменю. Автор этой иллюстрации это агентство Tubik