Процесс разработки дизайна мобильного приложения с нуля

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

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

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

Чек-лист по дизайну приложений:

• Спроектируйте user-flow для каждого экрана;
• Нарисуйте эскизы экранов (wireframes);
• Выберите подходящие паттерны взаимодействия и цветовые палитры;
• Создайте прототипы и сделайте дизайн (mock-ups);
• Соберите интерактивный прототип приложения и попросите людей оценить его и оставить отзыв;
• Сделайте финальную ретушь прототипа, отполируйте все экраны, чтобы все они были готовы к разработке.

User-Flow

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

Обычно user-flow состоит из трех типов фигур:

• Прямоугольники – используются для представления экранов;
• Ромбы – используются для условий (например, нажатие кнопки входа в систему, свайп влево, увеличение);
• Стрелки – соединяют экраны и условия вместе.

User-flow очень полезны, потому что они дают логическое представление о том, как приложение должно работать и решать задачу.

Эскизы экранов (Wireframes)

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

Можно использовать печатные шаблоны из UI Stencils для рисования эскизов. Это экономит время и к тому же, там есть пространство для заметок.

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

Паттерны и цветовые палитры

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

Кстати, кстати неплохие платформы для поиска паттернов — это Mobile Patterns и Pttrns. Чтобы найти хорошие цветовые палитры, попробуйте зайти на Color Hunt или поискать другие сервисы.

Прототипы и дизайн

Наконец мы добрались до софта. То, что получится в итоге – это как если бы мы вошли в свое будущее приложение и сделали серию скриншотов, пока шли до цели, экран за экраном. Все должно быть по-настоящему, приложение уже должно быть как живое.

Хорошо что есть софт, который позволяет делать так, как надо.

Можно использовать софт «всё в одном»:
Figma, Adobe XD, Invision Studio, Framer X.

Можно использовать отдельные сервисы для прототипирования:
Invision, Marvel, Protopie и другие.

Поделитесь первыми макетами с друзьями или коллегами, и соберите отзывы.

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

Например после интервью вы можете переработать дизайн и удалить фоновую графику, потому что это сложно запрограммировать, а еще она снижает читабельность.

Следующим шагом задизайните остальные экраны, по тем же гайдлайнам. Будьте готовы к тому, что это займет достаточно времени!

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

После последних штрихов получится финальная версия дизайна.

Вот и все!

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

Комментарии и замечания только приветствуются ✌