Долгое время лучшим инструментом для дизайнера был Sketch. Многие использовали Adobe Photoshop, у которого есть ряд недостатков в виде большого количества ненужных инструментов и сложного интерфейса.
Adobe XD – одна из популярных бесплатных программ для проектирования UI/UX и создания прототипов для мобильного дизайна . Интуитивно-понятный интерфейс, весь нужный набор инструментов, Adobe Creative Cloud.
Для работы с этой программой не нужно знать весь инструментарий Adobe Photoshop и научиться в ней работать можно благодаря уроку, который можно открыть при начале работы с программой.
Adobe XD initial window
Adobe XD tutorial workspace
Руководство расскажет об основных инструментах и прототипах. После изучения появляется вопрос:
"Вау! Почему я не познакомился с этой программой раньше?"
1. Превью
Как говорится в руководстве: нажмите кнопку воспроизведения, чтобы открыть предварительный просмотр приложения. Откроется новое окно, отображающее первый экран приложения или сайта.
Preview window for Campvives app
Превью позволяет тестировать приложение, нажимая на кнопки и переходя между разными экранами. Если что-то изменилось в файле, то обновится и превью без перезапуска.
2. Артборды
Выбрав инструмент артборды (Клавиша “A”) можно создать рабочее поле вручную или выбрать один из размеров в панели справа, что очень удобно.
Adobe XD Design workspace. Artboard tool options
Опции программы позволяют легко перемещать, переименовывать и копировать артборды.
Color palette menu, from the Appearance options
3. Сетки
Layout and Grid visualization
4. Направляющие
Эта опция появилась совсем недавно и сделала работу еще удобнее. Направляющие можно копировать и вставить на другой артборд.
Работа с направляющими
5. Изображения
Удобный интерфейс работы с фоновыми изображениями. Для того, чтобы сделать фон у блока нужно перетащить изображение с компьютера.
Masking images and editing shapes
6. Repeat Grid
Этот инструмент позволяет копировать повторяющиеся элементы. Такие, как записи в блоге, меню, списки.
Extending grid
Прототипы
В XD есть режим прототипирования.
Каждый объект может быть связан с другим экраном или элементом экрана. Интерфейс прототипирования позволяет создавать несложные анимации графика или счетчика.
Открытие поста
Overlay menu connection and preview
Другие возможности
Adobe XD дает возможности на экспорт из Adobe Photoshop и Illustrator. Вы можете поделиться своим дизайном с командой, сохранить его как .png или .svg изображение.
Делая вывод хочется сказать, что возвращаться к работе над дизайнами в Adobe Photoshop после появления XD нет желания из-за рядов плюсов этой программы. Программа быстро развивается, давая большие возможности для работы с фигурами и текстом.