Разбор инструментов для дизайна — Adobe XD против Sketch (2019)

Sketch, хорошо зарекомендовавший себя инструмент дизайна, пережил феноменальный рост с момента своего появления в 2010 году. В 2016 году Adobe представила XD как серьезного конкурента. После почти трех лет разработки Adobe XD предлагает дизайнерам достаточно проблем, чтобы подумать о внесении изменений?

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

Два широко признанных инструмента дизайна, на которые полагаются дизайнеры UX, — это Adobe XD и Sketch.

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

В то время как Sketch стал предпочтительным инструментом для дизайнеров UX, у Adobe, давно известной своим отмеченным наградами программным обеспечением для дизайна и глубокими связями с дизайнерским сообществом, не было аналогичного варианта. У них были Photoshop, Illustrator и Fireworks, но дизайнеры не хотели использовать три инструмента для выполнения задач, которые Sketch мог предоставить в одном приложении.

В 2016 году Adobe представила XD (Experience Design). Серьезный соперник Sketch, им еще предстояло наверстать упущенное. В то время Sketch было шесть лет, у него была широкая пользовательская база и целая экосистема плагинов, что делало его мощным инструментом дизайна. Соперничество обострилось в течение следующих двух лет, и Adobe XD превратилась из ловкого конкурента в высоко оцененный инструмент дизайна, который завоевал сердца многих профессиональных дизайнеров.

Блог Toptal Design опубликовал статью о Sketch и Adobe XD в 2017 году, когда он еще находился в стадии бета-тестирования. Теперь, два года спустя, Adobe XD претерпел несколько изменений с четкой целью: предложить все, что нужно UX-дизайнеру, изначально и с отличной производительностью.

Не пора ли UX-дизайнерам перейти со Sketch на Adobe XD?

Adobe XD против Sketch

Давайте рассмотрим, как Adobe XD сравнивается со Sketch. Мы будем сравнивать следующие характеристики:

• Пользовательский интерфейс
• Повторить сетку
• Панели символов и активов
• Инструменты адаптивного дизайна
• Дополнения и плагины
• Прототипирование с помощью Auto-Animate
• Совместное использование и комментарии
• Работа с разработчиками
• Контроль версий и совместная работа в реальном времени

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

У дизайнеров, знакомых с такими инструментами, как Photoshop, не должно возникнуть проблем с изучением Adobe XD или Sketch, поскольку все они имеют схожий пользовательский интерфейс.

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

Sketch против XD : Sketch имеет преимущество благодаря удобной панели инструментов.

Повторить сетку

Примечательной особенностью Adobe XD является повторяющаяся сетка. Это удобный инструмент, который позволяет легко создавать настраиваемые списки и экраны на основе сетки. Хотя в Sketch нет этой функции, ее можно более или менее воспроизвести с помощью плагинов.

Sketch против XD : Adobe XD имеет преимущество благодаря повторяющейся сетке, встроенной в программное обеспечение.

Панели символов и активов

Символы были ранней функцией, которая внесла значительный вклад в успех Sketch. Символы для Sketch — это то же самое, что CSS (каскадные таблицы стилей) для дизайна веб-сайта. Они позволяют дизайнерам легко повторно использовать и массово редактировать активы, что экономит много времени, помогает создать готовую дизайн-систему и обеспечивает согласованность на всех экранах.

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

Sketch против XD : Adobe XD имеет небольшое преимущество из-за комбинированных элементов пользовательского интерфейса на панели ресурсов.

Инструменты адаптивного дизайна

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

Это невероятно полезная функция, которую можно включать и выключать с помощью простой кнопки-ползунка. Если автоматический режим не соответствует ожидаемому поведению, дизайнер может вручную изменить адаптивные свойства.

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

Sketch против XD: Adobe XD имеет здесь преимущество. Они предлагают встроенный способ увидеть адаптивные эффекты на элементах пользовательского интерфейса.

Дополнения и плагины

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

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

Sketch против XD: Sketch имеет преимущество благодаря обширной библиотеке плагинов.

Прототипирование с помощью Auto-Animate

Adobe недавно обновила XD невероятно полезной функцией для UX-дизайнеров: автоматической анимацией . Он работает, делая умные, плавные переходы между элементами разных экранов. Результаты впечатляют, что делает создание прототипа восхитительным опытом для привлечения потенциальных клиентов. Sketch не предлагает эту функциональность, даже с плагином.

Еще одна замечательная функция прототипирования, представленная Adobe, — это поддержка микровзаимодействий, например, вытягивание панели за край экрана или появление клавиатуры. Adobe XD также поддерживает создание прототипов голосовых интерфейсов (например, Alexa или Google Home).

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

Делитесь и комментируйте

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

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

Sketch может использовать обмен и комментирование с помощью инструментов совместной работы, таких как Zeplin, или интеграции со сторонними инструментами, такими как Invision.

Sketch против XD: у Adobe есть небольшое преимущество благодаря встроенному онлайн-обмену и комментированию.

Спецификации дизайна

В ходе дизайн-проекта UX-дизайнерам часто приходится делиться спецификациями дизайна с разработчиками. Adobe включила эту функцию в XD, а пользователям Sketch нужно будет использовать такие интеграции, как Zeplin или InVision.

Sketch против XD: у Adobe есть преимущество перед Sketch, потому что спецификации дизайна встроены и не требуют сторонней интеграции.

Контроль версий и совместная работа в реальном времени

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

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

Sketch предлагает контроль версий и совместную работу в режиме реального времени с помощью плагинов, но эти функции не встроены в продукт.

Sketch против XD: Sketch побеждает. У них есть контроль версий, хоть и с плагинами; в настоящее время это не предлагается в XD.

Обзор функций: Adobe XD против Sketch

Между текущей версией Adobe XD и Sketch есть как сходства, так и различия. Вот сравнение каждого продукта:

Пришло ли время менять инструменты UX-дизайна?

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

Единственное важное, чего по-прежнему не хватает Adobe XD, — это контроль версий, который есть у Sketch благодаря плагинам. Ожидайте, что это появится в XD, как только Adobe продолжит разработку набора функций облачных документов.

Перейти из Sketch (и Photoshop или Illustrator) в XD проще, чем наоборот, поскольку XD может открывать файлы Sketch с превосходной точностью. У вас могут возникнуть некоторые проблемы, если вы используете плагины только для Sketch, такие как Abstract или InVision Craft.

В некоторых сценариях выбор очевиден: для пользователей Windows Sketch недоступен, а для подписчиков Adobe Creative Cloud XD предоставляется бесплатно с неограниченным количеством общих прототипов. Это произошло не случайно.

Но Скетч сопротивляется. Компания недавно закрыла финансирование на 20 миллионов долларов и обещает важные функции, такие как совместная работа в команде, нативная передача и веб-версия приложения в 2019 году.

Если контроль версий не является критической проблемой, самое время подумать об использовании Adobe XD. Приверженность Adobe сообществу дизайнеров взаимодействия с пользователем проявляется в таких функциях, как режим автоматической адаптации, повторяющаяся сетка и встроенное прототипирование. Несмотря на поздний старт, Adobe доказала, что может составить серьезную конкуренцию Sketch.

Дальнейшее чтение в блоге Toptal Design:

• Adobe XD против Sketch — какой UX-инструмент вам подходит?
• Atomic Design и Sketch — руководство по улучшению рабочего процесса
• Дизайн с точностью — обзор Adobe XD
• Вещи, которые вы могли не знать о типографике в Sketch
• Знакомство с разработкой плагинов для Sketch