UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Процесс создания дизайна мобильного приложения с нуля
Редакція
Редакція

Опубліковано • Оновлено

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

#ux

Я начала изучать графический дизайн, когда мне было 13 лет. Я научилась проектировать веб-сайты по онлайн-курсам и целыми днями игрался с Photoshop и Affinity Designer. Этот опыт научил меня мыслить, как дизайнер. Я занимаюсь проектированием и разработкой приложений уже почти год. Я приняла участие в программе Массачусетского технологического института, где я работала в команде по разработке приложения Universeaty. Два месяца назад я начала работать над новым приложением Crypto Price Tracker, которое вышло недавно, 28 января. В этой статье я поделюсь поэтапным процессом проектирования, которому я следую при работе над приложениями. Это должно помочь тем, кто хочет научиться или улучшить свои навыки цифрового дизайна. Дизайн – это не только то, как использовать программное обеспечение для проектирования, и эта статья не научит вас, как его использовать. Есть сотни качественных обучающих программ в Интернете. Дизайн также касается понимания сути вашего продукта, его функциональности, а также проектирования, не забывая о конечных пользователях. Вот чему вас научит эта статья. Процесс проектирования:

  1. Создайте юзерфлоу для каждого экрана.
  2. Создайте / нарисуйте прототипы.
  3. Выберите шаблоны дизайна и цветовые палитры.
  4. Создайте дизайн.
  5. Создайте анимированный прототип приложения и попросите людей проверить его и оставить отзыв.
  6. Сделайте финальную ретушь макетов, чтобы все финальные экраны были готовы к разработке.

Давайте начнем!

Юзерфлоу

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

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

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

Прототипы

После того, как вы завершили делать юзерфлоу для каждого экрана, вы начнете работать с протопипами всех экранов. Прототипы – это, по сути, низко детализированные наброски ваше приложение. По сути, эскиз или схема того, где будут располагаться изображения, ярлыки, кнопки и прочее. Грубый эскиз того, как ваше приложение будет работать. Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошую рабочую область для рисования и заметок. Вот пример прототипа. Прототип интерфейса мобильного приложения Прототип интерфейса мобильного приложения После создания прототипов вы можете использовать приложение под названием Pop и сделать снимок всех своих рисунков с помощью приложения и получить кликабельный прототип, связав все экраны с помощью кнопок.

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

Это моя любимая часть. Это похоже на разглядывание витрин. Множество паттернов дизайна и цветовых палитр на выбор. Я выберу те, которые мне нравятся, и буду экспериментировать с ними. Лучшие платформы для поиска паттернов – это Mobile Patterns и Pttrns. И чтобы найти хорошие цветовые палитры, посетите сайт Color Hunt.

Дизайн

Наконец вы переходите к использованию программного обеспечения для создания дизайна. Это похоже на то, что вы вошли в свое приложение в будущем, и сделали несколько скриншотов. Это должно выглядеть реалистично и в значительной степени похоже на реальную вещь. Существуют программные средства разработки и инструменты для создания дизайна. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch. Вот пример некоторых ранних дизайнов моего приложения. Перенесение карандашного рисунка в пиксели! Перенесение рисунка в пиксели! Я больше экспериментировала с различными цветовыми палитрами. Разные цветовые решения мобильного приложения Я поделилась первоначальными макетами с друзьями, чтобы получить их отзывы. Кажется, многим понравилась схема с золотым градиентом и черным. Будьте готовы получить отзывы и поэкспериментировать с новыми предложениями! Вы получите удивительные отзывы от своих пользователей, когда разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance. Поэтому я переработала макет и удалила фоновые графики, потому что их генерация была технически трудоемким процессом, и они снижали читабельность. Что в итоге вышло: Золотой градиент с черным на удивление хорошо выглядит! Золотой градиент с черным на удивление хорошо выглядит! Я была довольна цветовой схемой, значками на панели вкладок и общей компоновкой. Я пошла дальше и разработала остальные экраны, следуя тем же принципам дизайна. Это был долгий, но безумно увлекательный процесс! Когда все мои экраны были готовы, я собрала прототип в Adobe XD и попросила нескольких друзей поэкспериментировать и дать свой отзыв. После последних штрихов именно так выглядит финальная версия моего дизайна. Финальная версия дизайна Финальная версия дизайна После того, как все экраны были завершены, я импортировала их в Xcode и начала разработку приложения. Вот и все! Я надеюсь, что эта статья поможет вам начать работу над дизайном приложения или поможет стать лучшим дизайнером. И если вам нравится мое приложение, вы можете скачать его здесь. Я заканчиваю статью одной из моих любимых цитат о дизайне

 «Дизайн – это не только, как предмет выглядит и ощущается. Дизайн – это то, как он работает» - Стив Джобс


Перевод статьи Harshita Arora

Топ коментарі (0)