Александр Шульгин, управляющий партнёр Purrweb, убеждён, что внятный дизайн важен на любом этапе разработки продукта.
Для проверки идеи на прочность нет смысла создавать нечто совершенное. Вполне достаточно неидеальной первой продуктовой версии. Однако использование MVP концепции — не повод игнорировать дизайн. Уже на старте продукт должен быть понятным и визуально привлекательным.
В этой статье пошагово рассказываю об этапах создания дизайна MVP. Процесс емкий, поэтому и статья вышла увесистой.
1. Анализируем конкурентов
На самом деле этап изучения конкурентов предшествует дизайну. Подсмотреть «как у других» важно — без этого очень легко допустить ошибки в позиционировании, создать неверные ожидания («Выкатимся так, а там попрет!»).
Что происходит на этапе анализа? Дизайнер останавливается на 3-5 топовых конкурентах и досконально изучает каждого. Смотрит на то, как сделан визуальный дизайн, оценивает функциональность и юзабилити.
Результат: Готовый анализ конкурентов. «Делать так же, как у них!» — это не главная задача анализа. Цель данного этапа — изучить решения, которые уже представлены на рынке и понять, что можно позаимствовать, а что лучше переосмыслить и сделать по-другому.
Найти конкурентов несложно. Прямых, косвенных — не так важно
Необходимое время: 1 день.
2. Ищем вдохновение
Dribbble, Behance, Pinterest и Muzli Search помогают не «застрять» и визуально вдохновиться. С помощью этих ресурсов можно подглядеть варианты реализации иконок, анимации и брендинга. Достаточно ввести ключевое слово — все, что так или иначе описывает продукт.
Допустим, вы работаете над созданием маркетплейса. Чтобы подсмотреть варианты реализации ключевых экранов, можно вбить «Маркетплейс» в строку поиска. Хэштег популярный, а значит вывалится целая гора разных шотов (шот — это кусочек незавершенного проекта). В качестве хэштега также подойдут главные фичи. Для маркетплейса такими фичами могут стать «Календарь», «Профиль», «Бронирование».
Агрегаторы «красивостей» — будь-то dribbble или Pinterest — отлично работают для UI и слабо — для UX-брейншторма. Как правило, пользователи этих площадок делятся решениями с крутой визуализацией и откровенно хромающей UX-логикой. Можно ли где-то подглядеть решения UX-дизайна? Да! Но об этом чуть позже.
Результат: Дизайн-концепт. Главная задача — посмотреть, как будут выглядеть шрифты, цветовая палитра и кнопки в готовой версии продукта. Для этого мы визуализируем 1–2 экрана главного юзер-флоу. С помощью такого концепта участники проекта смогут согласовать UI/UX-архитектуру, быстрее спланируют будущие итерации.
Дизайн-концепт медицинского мобильного приложения. Посмотреть весь кейс
Выше представлены первые экраны приложения, которое помогает докторам проводить раннюю диагностику и назначать приемы. Чтобы максимально упростить навигацию, мы решили уйти в сторону минимализма.
Необходимое время: 1–2 дня.
3. Прототипируем
Этот этап дизайна самый трудозатратный.
Перед созданием «настоящего» дизайна необходимо продумать «скелет» будущего продукта (без цвета и красивостей) Какой будет архитектура и навигация внутри приложения. Даже не упарываясь в глубокую детализацию, прототипы помогут вам обозначить главные юзер-флоу, понять, как оптимизировать UX-часть.
Прототипы показывают как именно пользователи будут взаимодействовать с дизайном
Mobbin — отличное решение для поиска UX-паттернов мобильных приложений. Чтобы подглядеть реализацию топовых продуктов, дизайнер вводит имя продукта («Убер») или выбирает нужную категорию (развлечения). Среди похожих решений для веба хочется выделить Webframe.
UX ≠ «уникальный интерфейс». Никто не должен тратить время на «въехать в суть»
Для проработки юзер-флоу мы предпочитаем использовать Figma. Программа работает в браузере, а значит — ничего не нужно скачивать. Удобно делиться апдейтами и согласовывать дизайн.
Результат: Черно-белые (интерактивные) прототипы. C такими не стыдно идти к первым пользователям за обратной связью, проводить UX-интервью.
Прототипы веб-приложения для бьюти-индустрии. Посмотреть полный дизайн
Необходимое время: 2 недели.
4. Визуальный дизайн
Предположим, что прототипы уже согласованы с заказчиком. Время навести красоту! Для этого на базе дизайн-концепта (1–2 экрана, о которых мы ранее говорили) прорабатывается UI-часть.
Чтобы сделать продукт запоминающимся, дизайнеры добавляют цвета, шрифты, анимации, логотипы — все, что будет связано с брендом. Потому что какую крутую штуку бы ты ни придумал, без классной «обертки» достаточно сложно зацепить пользователей.
Финальный этап дизайна. Продукт выглядит так, каким его увидит конечный пользователь
Результат: красивые кликабельные прототипы и UI-кит.
Цветные экраны веб-приложения для бьюти-индустрии. Весь кейс на Behance
UI-кит — это про иконки, кнопки, шрифты и цвета. Он значительно упрощает коммуникацию и поддержку всего дизайна — для разработчиков (ускоряет процесс), заказчиков (помогает договориться о визуальных элементах) и дизайнеров (синхронизирует стили/элементы).
Если захотите поменять основные цвета, UI-кит сильно сэкономит трудозатраты
Необходимое время: 2 недели(по факту — до получения нужного результата)
После того, как все этапы пройдены, дизайн выглядит на пять с жирным плюсом. Это значит, что результат работы можно смело показывать инвесторам, передавать в разработку. Об этом планирую рассказать в следующих статьях.
Оригинальная версия статьи опубликована на сайте vc.ru.
