Инструменты. Adobe Xd.

Часто в своей работе мне приходится сталкиваться с ситуацией, когда требуется визуализация той или иной идеи. Речь не только про приятную картинку или быстрый набросок плана презентации. Порой дело доходит до создания прототипа, а иногда и до создания минимально жизнеспособного продукта. В первом случае требуется быстрый и адекватный в плане восприятия макет, который не стыдно показать в качестве демонстрационного продукта на совещании. Здесь лично мне на выручку приходит новый продукт Adobe Xd.

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

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

Окно Adobe Xd с выбранным предварительно пресетом артборда под веб-интерфейс.

Логика работы программы основана на создании артбордов, неких рабочих листов на которых вы прототипируете свой интерфейс (или что вам там нужно спроектировать). Вообщем та же история, что и в Adobe Illustrator. Удобно то, что продукт сразу заточен под веб во всех его проявлениях: это и мобайл под каждую из основных платформ (есть пресеты артбордов как для iOS, так и для Android), и под планшеты, и конечно же под полноценный десктопный веб. Разумеется никто не держит вас в рамках, и можно выбрать собственный вариант артборда.

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

Когда артбордов становится много, работать с ними остается по-прежнему удобно. Минималистичный интерфейс не отвлекает, а масштабируется все очень просто.

Число артбордов растет, но работа не становится менее удобной.

Справа от рабочей области есть окно свойств объектов, что тоже не станет откровением для тех, кто хоть когда либо работал с графическими редакторами. Из приятного — есть настройка прозрачности объектов, можно настроить скругления, тени, удобно работать с центровкой объектов относительно друг друга и полотна в целом.

В панели свойств есть также интересный инструмент, позволяющий легко работать с сетками и повторяющимися элементами — “Repeat Grid”. Если кратко — просто протягивая группу объектов вниз, вы получаете идентичные группы элементов (больше никаких Ctrl+C и Ctrl+V).

Если резюмировать, то весь функционал вкладки Design заменим тем же Illustrator’ом. Однако, что подкупает в Xd, так это вкладка Prototype.

На вкладке Prototype вы можете быстро и просто настроить переходы между артбордами и анимировать их.

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

Настройка переходов между экранами и их анимаций.

Adobe Xd позволяет также пакетно экспортировать артборды в PNG и SVG форматы с выбором необходимого разрешения изображений, и конечно, как все современные продукты поддерживает коллективную работу над проектом через кнопку Share.

Вы можете поделиться вашим проектом нажав на кнопку Share.

На данный момент Adobe Xd находится в бете и скачивается абсолютно бесплатно при установке Adobe Creative Cloud на ваш ПК.

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

А какими инструментами пользуетесь вы в своей работе?