Выходные с Adobe XD: Всё, что вам нужно про проектирование мобильного приложения

Выходные — идеальное время, чтобы попробовать новые инструменты и креативные приёмы; Отсутствие давления со стороны боссов или клиентов, и (надеюсь) без переадресации на электронную почту или телефон. В эти выходные, между делом, попробуйте создать мобильное приложение в Adobe XD, со своими друзьями или семьёй. XD — универсальный инструмент от Adobe для UX/UI дизайна, прототипирования и обмена опытом своего веб-сайта или мобильного приложения.

 

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

Четыре шага для разработки мобильного приложения

Шаг 1: Скачать Adobe XD и Wires

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

Шаг 2: Дизайн

Следуйте этому учебному руководству, чтобы узнать, как создать мобильное приложение в XD. Вы узнаете основы XD, в том числе создание артбордов, разработка иконок и заставок, импорт изображений и работа с повтором сетки (Repeat Grid).

Урок включает:

  • Ваше рабочее пространство в XD
  • Основные фигуры и текст
  • Повтор сетки
  • Использование комплектов UI

Шаг 3: Прототип

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

Урок включает:

  • Режим прототипа
  • Связывание артбордов
  • Режим предварительного просмотра

Шаг 4: Совместное использование

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

Урок включает:

  • Совместное использование прототипов
  • Предварительный просмотр на мобильных устройствах
  • Добавление комментариев
  • Совместное использование спецификаций дизайна

Шаг 5: Добавить финальные штрихи

Загрузите эти бесплатные ресурсы UI, которые помогут вам усовершенствовать опыт любого, проектируемого вами, мобильного приложения.

  • Travel Companion UI Kit — Комплексный набор для приложений или веб-сайтов с тематикой, путешествий, от отелей, полетов и списков активностей, до кнопок и иконок.
  • Navigo Transportation UI Kit — Поможет вам разрабатывать транспортный опыт для приложений или веб-сайтов, с более чем 60 настраиваемыми экранами, наполненными символами и другими элементами, такими как навигация.
  • Apple iOS Design Resources — Новые материалы пользовательского интерфейса, облегчающие быстрое создание приложений для iOS.
  • Google Material Sticker Sheet — Предоставляют элементы, такие как светлые и темные символы для статус-баров, панелей приложения, нижних панелей инструментов, карточек, раскрывающихся меню и многого другого, для дизайна приложений под Android.

Жаждете большего?

Поиграйтесь с этими комплектами пользовательского интерфейса

  • Windows UI Kit — Позволит начать дизайн приложения для Universal Windows Platform (UWP).
  • Office UI Fabric Design Kit — Поможет вам разрабатывать, полноценные решения Office и Office 365.
  • Smartwatch UI Kit — Обширный комплект пользовательских интерфейсов смарт-часов с 20+ настраиваемыми компонентами и 30+ отлаживаемыми иконками.
  • Dashboard UI Kit — Включает в себя 100 конфигурируемых компонентов на 10 экранах с более чем десятком диаграмм (основой большинства панелей администрирования), для упрощения процесса дизайна административной панели.
  • Gaming UI Kit — Содержит все компоненты, которые вам понадобятся для дизайна игровой системы, включая полностью перестраиваемые векторные фигуры и символы, а также 31 разнообразный артборд, и всё это смотрятся великолепно, на больших экранах и игровых мониторах.

Посмотрите на Adobe XD в действии с проектом AdobeLive Behance

Behance может стать отличным ресурсом, чтобы посмотреть, что возможно с Adobe XD. Ознакомьтесь с этим красивым примером действенного UX дизайна, созданного Bahdis Mousavi и Rolf Jensen в Adobe XD.

Красивый пример UX дизайна в действии, созданный в Adobe XD

Mousavi и Jensen использовали Adobe XD, чтобы создать мобильное приложение для салона красоты, которое позволяет пользователю отслеживать определенного стилиста, парикмахера или визажиста, и просматривать график их работы и портфолио. Также приложение пользователям позволяет пользователям оставлять отзывы определённым мастерам, о предоставленных услугах клиентам, тем самым решая две ключевые проблемы в индустрии услуг красоты: Пользователи могут оценивать конкретного мастера, а не заведение, плюс пользователь всегда может отслеживать предпочтительных для себя профессионалов, даже если они меняют салоны.

Этот проект Behance включает исходный файл XD, поэтому вы можете скачать и воспроизвести его, чтобы просмотреть все элементы, которые вошли в интерактивный прототип Mousavi и Jensen.

Следите за процессом UX дизайна в трансляции Трэвиса Нильсона

Когда вы только готовитесь увидеть, насколько мощный Adobe XD, в процессе UX дизайна, трансляции AdobeLive от Трэвиса Нильсона, переполнены отличными идеями и советами. Трэвис Нильсон дизайнер взаимодействия с продуктом в Google, писатель, подкастер и ютубер, увлечённый UX дизайном. В следующих трёх видео, Трэвис покажет, как задействовать весь процесс проектирования UX, от планирования до рисования эскизов и, окончательного проектирования, прототипирования и построения готового продукта.

Видео 1: Макет приложения "Instagram для подкастов"

В первом видео Трэвис использует Adobe XD для создания макета приложения «Instagram для подкастов».

Что вы изучите:

  • Основы UX дизайна — от процесса разработки сценария использования до определения целевых пользователей.
  • Как набросать эскиз UI/UX интерфейса и дизайн прототипа низкой точности в Adobe XD.

Он объясняет UX дизайн, проводя вас сквозь процесс разработки сценария использования и выявления целевой аудитории. Затем он сделает набросок UI/UX интерфейса и разработает прототип низкой точности в Adobe XD.

Видео 2: Вайрфрейминг “прототип Instacast”

Во втором видео, Трэвис заканчивает несколько артбордов высокой чёткости и демонстрирует анонс прототипа Instacast.

Что вы изучите:

  • Как сделать набросок и исследование потока пользовательских операций.
  • Как сделать вайрфрейм в Adobe XD.

Видео 3: Конструируем артборд профилей и эпизодов

В третьем видео, Трэвис конструирует артборды профиля подкастеров и список эпизодов.

Что вы изучите:

  • Как проникнуть в поток нового опыта вайрфрейма.
  • Советы и рекомендации по дизайну, исследованиям пользователей и пользовательскому опыту.