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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отчеты.

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

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

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

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

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

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

Виджеты.

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

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

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

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

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