Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

Меня зовут Максим Прищемихин, я арт-директор в компании PMP_TECH. Мы разрабатываем приложения, сложные сервисы и интеграции, которые на практике помогают оптимизировать работу бизнеса или дают возможность уверенно выступить в цифровом мире.

В статье расскажу о том, как мы готовим макеты в компании PMP_TECH и какие практики используем. Дизайн-отдел у нас растёт довольно быстро, поэтому мы регулярно пересматриваем наши принципы, улучшаем их и выбираем наиболее комфортные и производительные форматы работы. Возможно, кому-то наш опыт пригодится при построении процессов.

Сейчас наша работа построена так:

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

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

Мудборд и референсы.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

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

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

Дизайн-концепция.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

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

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

Первые макеты.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

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

Поэтому небольшой совет: начинайте разработку дизайна именно с главного экрана проекта. Даже если в дорожной карте эта часть разработки стоит не в первых спринтах, а подробные требования еще не описаны. Важно на основе вайрфреймов показать, как будет выглядеть продукт. Ни регистрация, ни настройки профиля, ни другие экраны или отдельные элементы не дадут более полного представления о визуале, чем главный экран. Главное при презентации — не забыть сделать акцент на том, что функционал главного экрана может поменяться.

Презентация.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

Чаще всего на больших проектах дизайн опережает разработку на 1-2 спринта. Поэтому важно быстро его согласовывать. Чтобы избежать большого количества правок, нужно уметь хорошо презентовать, защищать и аргументировать решения. Сейчас мы показываем наши макеты в Figma на встрече в Zoom и подробно рассказываем о том, как и что мы тут надизайнили. Если позволяет время, то можно сделать макеты кликабельными и даже добавить анимаций, чтобы смоделировать реальное взаимодействие с продуктом.

Дизайн-система.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

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

— Не делаем двойную работу, если что-то поменяется;

— Не тратим свои нервы и нервы разработчиков;

— Не загоняем себя в рамки собранных компонентов, которые по ходу разработки макетов первых экранов могли бы сильно поменяться.

Отчеты.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

В дизайн-отделе мы работаем не только в рамках разрабатываемых продуктов, но также предлагаем услуги по digital-дизайну: от презентаций до сложных дизайн-систем. Если проект занимает много времени, то подготовка еженедельных отчётов-презентаций о проделанной работе нам очень помогает. Так мы убиваем сразу несколько зайцев:

— Заказчик в курсе хода работ;

— Отслеживаем прогресс по проекту;

— Коллективный разум команды помогает увидеть недочёты.

Коммуникация с командой.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

Мы не работаем в формате «Надизайнили — и отдали». Мы ведём тесную коммуникацию со всей командой разработки, пока в этом есть необходимость. Такой формат помогает, чтобы макеты полностью соответствовали реализуемому проекту. Это закрывает часть вопросов на тестировании и при привлечении новых лиц к макету. К тому же, многие хорошие идеи по продукту приходят только на этапе создания конкретных экранов, поэтому дизайнеры всегда на связи с аналитиками, проджект-менеджерами и разработчиками.

Виджеты.

Все изменения в свёрстанных макетах мы отображаем в Figma с помощью виджетов. Мы используем Advanced Changelog для фиксации изменений и Approve как индикатор. Разработчики сразу увидят их в макете, даже если упустили дублирующие сообщения в Telegram.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

Подключаем UX-писателя.

Лучшие практики проектирования пользовательских интерфейсов: как устроена работа дизайн-отдела?

Тексты формируют TOV продукта, влияют на настроения и направляют пользователя в интерфейсе. С этим и помогает UX-писатель: он делает так, чтобы взаимодействие с продуктом через текст было простым, понятным, логичным и не вызывало ступора или раздражения. Писатель отвечает не только за грамматику и качество текста в интерфейсе, но и за логикой на каждом окне: куда пользователь попадёт после клика, верно ли описано действие на кнопке.

Все эти пункты так или иначе помогают нам создавать качественные макеты, которые экономят время заказчику и команде разработки и способны масштабироваться без каких-либо проблем.

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

1414
3 комментария

Очень информативно и наглядно!

1
Ответить

Спасибо!

Ответить

интересный дизайн в статье

1
Ответить