Ранее, мы представили Adobe XD (бывший Project Comet), что вызвало бурную реакцию в мире. Нас буквально засыпали положительными отзывами и запросами на доступ. Если вы еще не в курсе, Adobe XD — это совершенно новый дизайн инструмент от компании Adobe, который позволит вам создавать дизайн и прототип в одном месте!

Превью-релиз Adobe Experience Design CC (Project Comet)

В создании нового инструмента с нуля, есть ряд преимуществ. Это позволяет задуматься о производительности и простоте использования инструмента на начальном этапе создания. А также продумать значимость работы с реальными данными в процессе дизайна.

Я объединил несколько наработок по этим вопросам в тестовой сборке Adobe XD и презентовал ее на Adobe MAX 2015 Sneaks

В этом видео показана масса интересных процессов. Но прежде чем мы рассмотрим их детальнее, позвольте рассказать, как мы дошли до этого.

Создание дизайна с реальными данными

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

Сообщество UX дизайнеров также принялось отстаивать необходимость реальных данных:

Мы видим мир и пользователей как они есть, вместо того, чтобы представить их такими, какими они должны быть. Создание дизайна с реальными данными, позволяет нам двигаться быстрее, раньше выявлять проблемы и трудности, создавая лучшее восприятие для пользователя . — Josh Puckett on Modern Design Tools: Using Real Data

Я вспоминаю обсуждения и брейнштормы с коллегами (Tom Krcha) об использовании реальных данных в дизайне и то, как подобный инструмент облегчит жизнь многим. У нас было множество идей, но их реализация стопорилась по мере создания такого продукта с нуля.

Интервью с Томом Крча, Adobe XD

Мы уделили основное внимание на более глобальную проблему: повторяющиеся элементы в списках и таблицах при создании дизайна. Это важный элемент для мобайл и веб дизайна, но очень утомительный для создания вручную. Чтобы упростить процесс, мы создали инструмент под названием Repeat Grid. Вы можете выбрать любой элемент на холсте и продублировать его по горизонтали или вертикали. Элементы в Repeat Grid сохраняют свое расположение и стиль, но текст и изображение может изменяться. Наполнение можно регулировать.

1-ctksYvZyB4-qh2qzdBuzdA

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

Основная проблема заключалась в внедрении данных в дизайн. Суть в том, что дизайн — это связка индивидуальных графических объектов: шейпов, иллюстраций, текстовых элементов. Но данные по своей сути — структурированы. Вы конечно же можете попытаться навязать структуру дизайну, но в таком случае, дизайн будет нескладным и усложнять процесс.

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

Реальные данные в Adobe XD

В тествой сборке программы, продемонстрированной на MAX Sneaks, данные (текст или иллюстрации), могут быть внедрены в дизайн через:

  1. Встроенный шаблон
  2. Файловую систему
  3. Google таблиц
  4. Интернет

* Все, что показано ниже — находится в стадии разработки и может быть изменено.

Встроенные шаблоны контента

Каждый раз, при выборе шаблона Name (Имя), вы получаете случайный список имен.

Реальные данные

Данные из файловой системы

Перетащите текстовый документ на элемент в Repeat Grid и текст будет подтягиваться автоматически.

Drag and drop с текстового файла JSON или CSV

Вы также можете работать с JSON или CSV данными, вставляя различные элементы из свойств и таблиц.

Данные из Google таблиц

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

Данные из Google таблиц

Данные из Интернета

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

1-pqPjREIv773FXtSVSPFduw

Также, очень легко можно перенести данные фото и имен друзей с Фейсбука в дизайн. Попробуйте найти фото на Adobe Stock и всего в несколько кликов встроить массу разных картинок в ваш дизайн.

Adobe Stock