Спасибо!
Ваше сообщение отправлено.
Раздел в стадии подготовки!
Подпишись и узнай первым о запуске виртуальной школы веб разработки!
<
Программы для дизайна
Динамика / Эффекты
В данной категории пока нет уроков
В данной категории пока нет уроков
В данной категории пока нет уроков
Есть вопросы или предложения?
Пишите нам!

Всем привет друзья! Сегодня в уроке полный обзор новой, замечательной программы для создания дизайна интерфейсов и дизайна сайтов Adobe Experience Design или сокращенно Adobe XD, а также ее крутых фишек. Программа бесплатная (пока) и доступна для операционных систем Windows и Mac. И так, поехали!
Видео урок
Поделись с друзьями
Урок
Содержание урока
1Вкратце о программе и ее преимуществах
2Интерфейс программы и ее разделы
3Стандартные функции Experience Design
3.1Булевы операции – вычитание/сложение объектов и их пересечений
3.2Текст
3.3Маски
4Фишки Adobe XD
4.1Подсказки расстояний
4.2Сетка
4.3Артборды
4.4Символы
4.5Прототипирование
5Repeat Grid – МЕГА БОМБОВАЯ ВЕЩЬ!
6Совместный доступ к просмотру онлайн прототипа
7Плюсы и минусы Adobe XD
8Горячие клавиши Adobe XD для Windows

Вкратце о программе и ее преимуществах:

Изначально программа была выпущена в свет под кодовым названием Project Comet, затем разработчики переименовали ее в Adobe XD (Experience Design). Программа позиционируется как инструмент для UX дизайна и прототипирования. На Mac программа стала доступна в начале 2016 года, но уже к концу года разработчики выпустили Adobe XD для Windows 10 (Программа недоступна под Windows 8, Windows 7 и ниже, так как разработчики программы используют новые возможности операционной системы Windows 10).

Программа бесплатна и находится пока в стадии бета тестирования. Если брать во внимание недавнюю существенную разницу между Mac и Windows версиями программы, то сейчас, с последним обновлением 13.06.2017 – разницы больше нет, и пользователи виндовс могут наслаждаться полной версией Adobe Experience Design.

Стоит отметить, что на Mac есть замечательная и всем известная программа для создания дизайна интерфейсов и сайтов – это Sketch, который завоевал бешенную популярность во всем мире. Но у Sketch при всех его плюсах есть один существенный минус – программа работает только на Mac OX. Чего не скажешь об Adobe XD, который уже сейчас в БЕТА версии создал весомую конкуренцию Sketch, даже скажу больше – у Adobe XD есть одна ключевая ФИШКА, которой нет у Sketch и вообще не в одной другой подобной программе — это функция Repeat Grid, которая существенно облегчает и ускоряет процесс создания дизайна и о которой мы поговорим ниже.

Преимущества Adobe XD в том, что она работает с векторной графикой, это существенно увеличивает скорость работы, да и еще делает малым размер создаваемых проектов (этот плюс будет особенно очевидным для тех пользователей, кто создавал свои дизайны в Adobe Photoshop, в котором создаваемый проект весит несколько сотен Мб), а также открывает возможность трансформирования и изменения размера объектов, без потери качества.

Adobe XD обзор программы
Функционал и Фишки

Окно запуска программы

При начальном запуске программы открывается окно, в котором можно выбрать заготовленный размер артборда (холст для рисования) из популярных разрешений экранов телефонов, планшетов и пк. Так же разработчики заготовили элементы дизайна интерфейсов компаний Apple, Google, Microsoft – так называемые UI kits.

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

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

После открытия самой программы, перед нами открывается ее интерфейс, который разделен на следующие разделы:

Меню – находится в левом верхнем углу программы. В этом меню мы можем открывать/сохранять/экспортировать проекты, импортировать файлы, расшаривать (открывать совместный доступ для просмотра) проекты.

Панель инструментов – здесь находятся все инструменты для рисования. Стандартные инструменты — прямоугольник, эллипс, линия и перо для рисования произвольных фигур, «текст» для написания текста, а также инструмент «артборд» для рисования артбордоб (холстов/экранов рисования). Инструмент «лупа», который увеличивает выделенную область, но этот инструмент лично я редко использую в работе, так как разработчики настолько продумали навигацию в Adobe XD, что если вы выучите горячие клавиши «навигации» по проекту, то можно просто с феноменальной скоростью перемещаться по проекту.

Панель слоев и символов – Находятся они в левом нижнем углу интерфейса программы. О панели «символов» ниже, а пока разберем панель «слоев».

Слои – в панели слоев отображаются все артборды проекта, и если кликнуть по артборду, то мы попадем в панель слоев артборда, где мы увидим список всех элементов, расположенных на данном артборде. Что мы можем делать со слоями в панели слоев? Мы можем их перемещать выше ниже относительно друг друга (соответственно те слои, которые в панели слоев выше – будут перекрывать слои, которые расположены ниже, что визуально видно на холсте).

Так же мы можем выделить несколько слоев и группировать их (положив их в папку), нажав правой кнопкой мыши вызвать контекстное меню и выбрать пункт меню «Group». Группировка позволит перемещать сразу всю группу на холсте. Это очень удобно, когда нужно переместить блок элементов, при этом не сбивая расстояния между элементами блока.

Дополнительно мы можем скрыть или показать слои, или группу, кликнув на иконку глазика, а также заблокировать или заблокировать слои, или группу.

Любой из слоев, будь то артборд, группа, отдельный слой или еще какая-либо группа слоев (поговорим о других типах групп – ниже) можно переименовывать.

Слои Adobe XD

Разделы дизайна и прототипирования – расположены вверху, немного правее меню программы.
В разделе «Design/Дизайн» мы рисуем дизайн наших интерфейсов и страниц. А в разделе «Prototype/Прототипирование» мы создаем динамический прототип нашего интерфейса или сайта (о прототипировании ниже, в соответствующем разделе данной статьи).

Правая часть интерфейса программы:
Preview – кнопка пред просмотра созданного прототипа проекта.
Share Online – Совместный доступ к просмотру онлайн прототипа проекта с комментированием и прикреплением иконок комментария (в соответствующем разделе данной статьи ниже).
Панель настройки выделенного объекта – эта панель занимает практически всю правую часть интерфейса программы. В ней расположены все настройки выделенного объекта.

Интерфейс Adobe XD

Стандартные функции Experience Design

Цвет – в блоке выбора цвета мы можем выбрать цвет заливки фона, бордюра, тени. Так же мы можем сохранять цвет в библиотеку цветов, и выбирать цвета из нее (так же мы можем сортировать цвета в библиотеке и удалять цвета). Библиотека цвета полезна, когда в создаваемом дизайне проекта один и тот же цвет используется неодин раз.

Цвет Adobe Experience Design

Градиент – при выборе цвета фона выбранного объекта, ему можно задать градиент цвета, выбрав его в выпадающем списке (один цвет/градиент). В градиенте можно задать любое количество цветовых точек перехода. Задание угла/ширины градиента разработчики сделали очень удобным и их можно задавать, перемещая конечные точки линии градиента на самом объекте. Это очень удобно, так как можно сразу наблюдать результат.

Градиент Adobe XD

Выравнивание – с помощью настроек выравнивания мы можем выровнять элемент относительно артборда или относительно других элементов (при выделении нескольких объектов). Более продвинутые возможности выравнивания рассматриваются ниже, в разделах «Подсказки расстояний» и «Сетка» в данной статье.

Выравнивание Adobe Experience Design

Также выделенному объекту можно добавить тень, прозрачность, размытие и изменить размер, повернуть, переместить.

Настройки Adobe XD

Булевы операции – вычитание/сложение объектов и их пересечений

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

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

Если все же хочется объединить объекты в один сплошной векторный объект, то это можно сделать из контекстного меню, после применения к объекту булевой операции, кликнув правой кнопкой мыши и выбрав пункт меню Path > Convert to Path. Либо нажав сочетание клавиш Ctrl + 8. И затем трансформировать объект, как произвольную фигуру.

Булевы операции Adobe XD

Текст

Используя инструмент текст, мы можем писать текст. Текст является по сути блоком, который мы можем редактировать, поворачивать, производить стандартные операции редактирования текста: выбор шрифта, толщина шрифта, размер, расстояние между буквами, межстрочное расстояние, выравнивание текста. А также изменять цвет, задавать тень, обводку, прозрачность, размытие.

Стоит отметить, что в блоке текста можно редактировать отдельно выделенные участи текста.

Текст Adobe XD

Маски

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

Для того чтобы применить маскировку, объекты должны пересекаться друг с другом, затем их нужно выделить и нажав правую кнопку мыши вызвав контекстное меню, выбрать соответствующий пункт меню Mask with Shape. Либо нажав сочетание клавиш Shift + Ctrl + M.

Маски Adobe XD

Фишки Adobe XD

Подсказки расстояний

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

Если мы перемещаем выделенный объект, то при пересечении линии центра (горизонтальной/вертикальной) другого объекта, группы или самого артборда, то нам будут показаны эти линии и объект будет как бы липнуть к этим линиям при перемещении мышью. Это очень удобно, когда нужно выровнять объект относительно другого точно, а не на глаз . Еще такой лайф хак – если зажать клавишу Shift и при этом перемещать мышью объект, то он будет перемещаться либо по вертикали, либо по горизонтали, в зависимости от начального направления движения.

Подсказки Adobe Experience Design

Если вы перемещаете объект и при этом расстояние между соседними объектами совпадает с расстоянием от вашего объекта, то программа покажет это расстояние розовыми прямоугольниками и размером самого расстояния в пикселях.

Подсказки Adobe XD

Сетка

Если выделить артборд, то мы увидим в его настройках пункт GRID (сетка), где мы можем включить/отключить сетку выделенного артборда, настроить величину ячеек сетки, цвет ее линий и прозрачность.

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

Сетка Adobe XD

Артборды

Артборд – это холст, на котором мы рисуем. Adobe XD позволяет создавать любое количество артбордов. Это можно сделать, выбрав инструмент «Артборд» из панели инструментов, затем нарисовать артборд с произвольным размером ширины, высоты, либо выбрав уже заготовленные в программе часто используемые разрешения экранов. А также можно просто выделить уже нарисованный артборд или несколько артбордов, скопировать его и вставить, так артборд продублируется со всеми элементами, которые прорисованы на нем.

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

Чтобы включить данную опцию, нужно в настройках артборда в разделе «SCROLLING» в выпадающем списке выбрать «Vertical». А в поле «Viewport Height» задать высоту области просмотра, которая будет отображаться на экране без скрола страницы, при просмотре превью проекта, при этом на самом артборде появиться голубая пунктирная линия, которая наглядно показывает границу области видимости.

 Артборд Adobe XD

Символы

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

В Adobe Experience Design символ можно создать несколькими способами: выделив объект или группу объектов, перейдя в панель символов нажать на кнопку +, либо щелкнув правой кнопкой мыши выбрать из контекстного меню пункт Make Simbol, либо нажав сочетание клавиш Ctrl + K.

Символы Adobe XD

Прототипирование

В разделе Prototype (прототип) мы можем создавать прототип нашего сайта или интерфейса с переходами. Например, у нас есть кнопка в меню навигации, которая ведет на страницу «О нас», мы можем выбрать эту кнопку и привязать к ней переход по клику на страницу артборда «О нас».

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

При этом параметры эффекта перехода можно настраивать в окошке, которое появляется при определении перехода.

Посмотреть созданный прототип мы можем, нажав на кнопку Preview (превью).

Прототип Adobe XD

Так же разработчики сделали такую классную вещь, как Live Preview на мобильных (Предпросмотр проекта на мобильном устройстве). Для этого на мобильное устройство нужно скачать и установить соответствующее приложение Adobe Experience Design и подключить мобильное устройство к компьютеру по USB кабелю.

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

Repeat Grid – МЕГА БОМБОВАЯ ВЕЩЬ!

Может компания Adobe и затянула с выпуском Experience Design для создания дизайна интерфейсов и сайтов и Sketch выбился в лидеры в данной сфере наряду с другими подобными программами, но Adobe XD с наикрутейшей функцией Repeat Grid, просто убивает всех конкурентов на повал!

Что такое Repeat Grid в Adobe XD?
Repeat Grid – это функция дублирования элементов или блока элементов. Эта функция сократит вам время создания дизайна в разы!

Для того, чтобы воспользоваться данной функцией, нужно выделить элемент или группу элементов и в меню настроек нажать заветную кнопочку – Repeat Grid. Вокруг выбранных элементов появится зеленая пунктирная обводка с ползунками, потянув за которые, объекты будут дублироваться по вертикали/горизонтали.

Но это далеко не все! Если навести курсор мыши на расстояние между продублированными элементами и зажать мышь, появится розовое выделение расстояний между объектами, потянув за которое, можно изменять это расстояние у всех объектов одновременно, при этом программа не только подсвечивает расстояние между объектами, а еще и показывает его в пикселях. Расстояние можно менять как по горизонтали, так и по вертикали.

Repeat Grid Adobe XD

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

Repeat Grid Adobe Experience Design

Ну а теперь-то все? А нет, не все :)! Если мы допустим создаем каталог товаров и дублируем блок товара, затем хотим вставить картинки товара в каждый блок свою, то нам нужно вставлять каждую картинку отдельно в каждый блок, но в сетке Repeat Grid разработчики реализовали мульти вставку картинок.

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

Мульти вставка изображений Adobe XD

Ну а теперь все? Почти :). Разработчики Adobe Experience Design постарались на славу и также реализовали мульти вставку для текста. Чтобы вставить текст также, как и картинки, нужно просто в текстовом документе прописать нужные фразы, каждую на новой строчке, затем сохранить текстовый документ (при сохранении выбрать кодировку UTF8, по умолчанию стоит ANSI, эта кодировка будет отображать русские буквы значками вопроса). И затем так же перетянуть документ на нужный текстовый элемент в первом блоке сетки Repeat Grid. На этом разбор функции Repeat Grid закончен.

Adobe XD обзор, урок

Совместный доступ к просмотру онлайн прототипа

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

Для того, чтобы открыть доступ к онлайн прототипу, нам нужно его расшарить, что делается через кнопку Share Online.

После нажатия на кнопку открывается меню настройки онлайн прототипа, где можно задать название прототипа, установить картинку и разрешить/запретить комментирование прототипа. После настроек жмем кнопку Create Link.

Онлайн доступ Adobe XD

Программа закинет наш проект в бесплатное онлайн хранилище компании Adobe и выдаст ссылку на онлайн прототип (чтобы закинуть прототип в хранилище вы должны быть авторизованы в своем аккаунте adobe). Мы можем скопировать ссылку и дать заказчику для просмотра прототипа в браузере, либо перейти на вкладку Embed и скопировать код для вставки на свой сайт. Если мы изменим что-то в нашем проекте, то мы можем в меню расшаривания проекта обновить прототип по полученной ссылке, либо создать новую.

Совместный доступ Adobe Experience Design

Что можно делать с онлайн прототипом? Можно просматривать все страницы (артборды) проекта, а также переходить на определенные страницы при клике на те или иные элементы дизайна. Переходы при клике по элементу назначаются в разделе прототипирования проекта в самой программе.

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

Онлайн прототип Adobe XD

Плюсы и минусы Adobe XD

Вот, пожалуй, и все, что хотелось рассказать в данном обзоре об Adobe Experience Design. Осталось только обозначить плюсы и пару несущественных, но все же минусов.

Плюсы:
Программа бесплатная (пока находится в бета версии).
Программа доступна как под Mac, так и под Windows 10.
Обновления выходят каждый месяц.
Бесплатное онлайн хранилище прототипов.

Минусы:
Не работают некоторые горячие клавиши в русской раскладке клавиатуры (я заметил только одно – это перемещение слоев выше/ниже в панели слоев Ctrl+[ и Ctrl+] ).
При мулти вставке текста в сетку Repeat Grid, текст сохраненный в кодировке ANSI отображается вопросиками, так что сохранять текстовый документ нужно в кодировке UTF8.

Горячие клавиши Adobe XD для Windows

Scroll – Перемещение по проекту по вертикали
Shift + Scroll – Перемещение по проекту по горизонтали
Ctrl + Scroll – Отдаление/Приближение к центру места на которое наведен курсор мыши
Ctrl + 0 – Увеличение/Уменьшение экрана к размещению всех артбордов в область видимости проекта.
Ctrl + 1 – Увеличение/Уменьшение до 100% размера экрана.
Ctrl + 3 – Увеличение выделенного объекта.
Ctrl + Enter – Открыть превью проекта.
Ctrl + R – Включить Repeat Grid.
Ctrl + G – Группировать объекты.
Shift + Ctrl + G – Группировать объекты.
Shift + Ctrl + M – Создать маску.
Ctrl + K – Создать символ.
Ctrl + ` – Показать/Скрыть сетку артборда.
Ctrl + L – Заблокировать/Разблокировать объект.
Ctrl + ; – Скрыть/Показать объект.
Ctrl + 8 – Преобразовать в контур.
Ctrl + Y – Скрыть/Показать панель слоев.
Shift + Ctrl + Y – Скрыть/Показать панель символов.
Ctrl + E – Экспорт.
Shift + Ctrl + E – Расшаривание проекта (совместный доступ онлайн).
Shift + Ctrl + I – Импорт.
Ctrl + [ – Сдвинуть на слой назад (не работает в русской раскладке клавиатуры)
Ctrl + ] – Сдвинуть на слой вперед (не работает в русской раскладке клавиатуры)
Shift + Ctrl + [ – Сдвинуть назад (не работает в русской раскладке клавиатуры)
Shift + Ctrl + ] – Сдвинуть вперед (не работает в русской раскладке клавиатуры)

На этом у меня все. Спасибо друзья за просмотр данного урока, надеюсь он был вам полезен. Я постарался полностью раскрыть все основные возможности программы Adobe Experience Design. Поделитесь уроком с друзьями.

Всем творческих успехов и крупных заказов от души! Жду ваших комментариев ниже и до встречи в следующих уроках! Пока друзья!

Комментарии
Улучши обучение! Ответь на пару вопросов.
В какой области знания тебе нужны больше всего?
HTML5 / CSS3
Java Script / jQuery
Ajax
Php
Json
Базы данных MySQL
1234
В какой области ты хочешь прокачаться?
Дизайн сайтов
FrontEnd - Верстка
FrontEnd - Программирование
FrontEnd - Фреймворки (Bootstrap...)
FrontEnd - Препроцессоры (Scss,Less...)
BackEnd - Программирование
BackEnd - Фреймворки (Yii2...)
BackEnd - Посадка верстки на CMS
Ускорение и эффективность кодинга
1234
Для кого ты создаешь сайты?
Для себя (хобби)
Для организации (работаю в офисе)
Фриланс заказы (работаю на дому)
У меня своя веб студия
1234
В каком тренинге Вы бы хотели принять участие?
В любом!
Мне похуй!
1234
Большое спасибо!
Ты внес ценный вклад в качаство обучения на сайте!
Уверен этот сайт поможет тебе прокачать себя!