Adobe xd для чего эта программа

Уроки Adobe XD. Начало работы с Adobe Experience Design — часть 1

Если вы взгляните на Adobe Experience Design (Adobe XD), приложение от Adobe Creative Cloud, вы быстро осознаете, что это радуга, которая выходит из единорога для веб дизайнеров. Но вы ошибаетесь… Это даже лучше! Я вам немного расскажу о тех возможностях, которые вы получите от использования Adobe XD. Небольшое замечание: программа пока находится в режиме превью и в ней еще появится много нового. Поехали! .

Создайте ваш первый дизайн проект в Adobe XD

Сразу после открытия Adobe XD, вы увидите большой набор опций для создания дизайна под мобильные, десктоп устройства, планшеты и возможность создания проектов для кастомных размеров. Или вы можете кликнуть на “начать с файла-примера” (эти виды файлов мы будем использовать во второй части статьи, когда я расскажу про режим прототипирования). Давайте начнем с создания рабочей области для iPhone 6. первое, что вы должны сделать — это назвать рабочую область. Например, “Home”. Двойной клик на имени рабочей области для изменения имени. Создание нового проекта в Adobe XD

Уроки Adobe XD. Первый проект . #1 Первое знакомство || Уроки Виталия Менчуковского

Изменение фона рабочей области

После выбора рабочей области, вы увидите панель свойств в правой части окна. Нажмите “Fill” под “Appearance” и изменяйте цвет фона вашей рабочей области. Изменение цвета фона рабочей области

Создание шапки экрана

Для шапки мы будем использовать изображение и текст. Перейдите по File > Import для импорта изображения или перетяните его на рабочую область. Далее, мы используем инструмент “Текст” (горячая клавиша T) и вводим текст. Вы можете изменять свойства текста (размер шрифта, начертание, кернинг) в свойствах на панеле справа.

Совет: Вы можете использовать UI kits Apple iOS, Google Material and Microsoft Windows при помощи File > Open UI Kit и выбирать все, что вам нравится. Я буду использовать Apple UI kit для вставки строк статуса в дизайн.

Создание шапки с изображением и текстом

Добавление области контента

Добавьте область контента под шапку выбрав инструмент “прямоугольник” (горячая клавиша R). Как обычно, вы можете изменять свойства на панеле справа. Вы можете изменять область контента и вставить изображение и текст, как показано в предыдущем шаге. Создание области контента

Дублирование сетки (один из моих любимых инструментов!)

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

Совет: Вы можете выбрать разные изображения и перетянуть их на дублированное изображение. Прежнее изображение будет заменено на выбранное вами. Теперь вы можете изменить текст для каждой области индивидуально, но помните, что при изменении стиля элемента, он будет применен ко всем остальным областям!

Adobe XD — лучшая программа для верстки и создания интерфейсов

Использование дублирование сетки в Adobe XD

Создавайте больше рабочих областей для вашего проекта

После создания дизайна “Home”, вы можете добавить рабочие области в ваш проект (другие шаги, например). Горячая клавиша “A”, откроет инструмент Artboard, в котором вы сможете выбрать размер вашей новой области справа в приложении. Кликните рядом с вашей первой работой и появится новая рабочая область. Создание рабочих областей в Adobe XD

Изучение в процессе

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

Прототипирование: Мы разберем прототипирование во второй части нашего гайда.

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

Жду ваших отзывов об этой статье по работе с Adobe XD. Задавайте вопросы. Подписывайтесь на меня в Twitter.

Источник: ux.pub

Переходим на более новый и интересный Adobe XD

Итак, что же такое этот самый волшебный Adobe Experience Design, который с легкой руки окрестили убийцей Sketch и Photoshop?

Adobe Experience Design — это инструмент для прототипирования и создания UI/UX дизайна, ориентированный на быстрое создание полноценных дизайн-макетов, с адекватным заполнением графматериалов и контента.

Как это работает?

Реализовано это посредством отбора методов и инструментов, которые используются дизайнерами для создания интерфейсов и дизайна мобильных приложений и сайтов в Photoshop, Illustrator или InDesign. Очень приятно, что Adobe действительно заморочились над тем, чтобы изучить базис тех инструментов, которые постоянно используются дизайнерами, и выкинули всё лишнее, существенно улучшив работу этих самых инструментов.

К примеру работа с обтравочными масками перестала быть головной болью, и теперь наконец можно грузить изображения пачками в необходимые нам фигуры — теперь работа по заполнению какой-нибудь типовой страницы с карточками товаров ускоряется в худшем случае в 3-4 раза. Изображения сами сжимаются до нужны размеров, выравниваются как надо, и встают без необходимости править их руками после вставки. Этим самым мы автоматизируем процесс подготовки макета, а если Вы как дизайнер еще и успешно используете сценарии в Photoshop для обработки фото — вы получаете просто волшебный чудо-инструмент для работы с большим количеством информации.

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

Сами карточки копируются быстро и удобно — тянем за краешек, и теперь у нас не одна карточка — а целых 4, выровненных по ширине, привязанных к сетке (если надо), и легкозаполняемых.

Дорогу — шаблонам!

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

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

Это далеко не весь список приятных «плюшек» в Adobe XD, их куда больше + с каждым обновлением выходят всё новые и новые инструменты.

Сейчас Adobe XD доступен бесплатно для владельцев компьютеров с MacOS и Windows 10 и старше на борту абсолютно бесплатно (потому что Beta) — дальше скорее всего станет платным, но ради удобства пожалуй стоит выкатить денег за полезный набор инструментов.

Вердикт: не тормозить и переходить на удобные инструменты и облегчать себе жизнь.

Здесь можно посмотреть немного интересных видео о работе с сайтами в Adobe XD:

Источник: walnut.team

Введение в Adobe XD

В этой статье мы поговорим о разработке и проектировании пользовательского интерфейса для вашего приложения.

Хороший дизайн

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

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

Жизненный цикл разработки дизайна

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

Бриф

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

Техническое задание

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

Карта разделов

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

Контент

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

Прототип

Под прототипом понимается связанный набор wireframe’ов(структурных схем страниц), эти страницы регламентируют положение той или иной информации, а так же необходимые для ее обработки элементы управления.

Дизайн

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

Инструменты UI/UX дизайнера

Я бы выделил три интересных решения существующих на рынке в данный момент:

• Sketch
• Figma
• Adobe Experience Design

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

Adobe Experience Design

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

Adobe XD в работе

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

вот такая структура у меня получилась, осталось лишь отразить ее в графике, давайте запустим XD, указав размеры экрана соответствующие iPhone 6/7:

Воспользуемся инструментом Line (L) для отрисовки navigation bar’а и площадки для пользовательской информации. В панели Appearance установим соответствующую заливку и тень для получившихся фигур:

Отлично, давайте займемся navigation bar’ом, первое что нам необходимо сделать — открыть iOS UI Kit (File > Open UI Kit > Apple iOS) скопировать черный status bar и вставить его на наш макет:

Теперь установим на наш navigation bar иконки кнопок Settings и Back, а так же с помощью инструмента Text (T) дадим нашему navBar’у заголовок:

Мы закончили с navigation bar’ом, теперь можно браться за пользовательский контент, с помощью понравившихся иконок и уже знакомого вам инструмента Text (T) отобразим социальные метрики нашего пользователя:

Отобразим аватар нашего пользователя, для этого с помощью инструмента Ellipse (E) нарисуем круг (зажимаем shift), а после этого перетащим картинку с аватаром на получившийся графический примитив. Отобразим location, description а так же пользовательское имя с помощью инструмента Text (T):

С помощью инструмента Rectangle (R) и инструмента Text (T) нарисуем кнопку для добавления пользователя:

Остался последний штрих, с помощью инструмента Rectangle (R) создадим прямоугольник на который перетащим наш Cover image и с помощью комбинации клавиш Cmd + установим получившееся изображение за верхними слоями:

Отлично! Давайте взглянем на результат:

Вместо заключения

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Источник: cocoa-beans.ru

4 причины победы Adobe XD над Sketch

Владимир Синицын, преподаватель и координатор направления «Дизайн» в «Нетологии», UX/UI дизайнер в дизайн-бюро 2Geart, а также участник Гильдии вольных проектировщиков адаптировал статью, в которой Drew Burdick — дизайнер из RedVentures рассказывает, почему Adobe XD станет лучшим UX/UI инструментом в 2017 году.

Для тех кто не в курсе, Adobe XD, ранее Project Comet — инструмент проектирования основанный на векторе, был запущен в начале 2016 года. В ноябре прошлого года я присоединился к команде проектировщиков из Red Ventures, чтобы посетить конференцию Adobe MAX в солнечном Сан-Диего. Мы изучили большое количество информации о том, что Adobe планирует на 2017 год, включая новые интересные возможности в Adobe XD. После конференции я убежден, что Adobe XD — лучший инструмент на рынке для проектировщиков UX/UI в 2017 году. И бесспорно выигрывает у Sketch.

4 причины, по которым XD правильный инструмент для UI/UX дизайнеров

У вас уже оформлена подписка на Adobe CC

Более чем 90% профессионалов в мире используют продукты Adobe каждый день. С ежемесячной подпиской на Adobe Creative Cloud, доступ к XD уже включен — никакая дополнительная подписка не потребуется. В то же время Sketch недавно представил новую структуру цен, которая требует от пользователя оформления годовой подписки для получения обновлений.

Adobe XD создан для команд

• Интеграция с библиотеками Creative Cloud

• URL адрес

• Руководство по стилю

• История изменений и управление версиями

• Совместная работа в реальном времени

• Совместимость

В то время как Sketch — приложение только для Mac, с Adobe XD без проблем смогут работать товарищи по команде, предпочитающие Windows.

Adobe XD — инновационный источник возможностей для дизайнера

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

С Adobe XD нет нужды в инструментах: Principle, Invision, Flinto и других плагинах. Большинство аналогичных действий можно выполнить в самом XD. Можно больше не зависеть, от того как третье лицо поддерживает свой софт при обновлении. И да, это настолько же здорово, насколько здорово это звучит.

• Создание анимированных прототипов, чтобы наметить пользовательский путь и взаимодействие элементов друг с другом.
• Функция Repeat Grid (создание повторяющихся элементов). Не совсем понятно о чём речь? Посмотрите
• Навигация в панели слоев, которая выделяет только слои в группе или выбранном объекте. Теперь вы безболезненно можете найти тот слой, которому забыли присвоить имя.
• Замена цвета в любой части документа по одному клику. (Смотрите с 55 секунды в этом видео)
• Редактирование символов в монтажной области и просмотр изменений, сделанных в режиме реального времени через все монтажные области. (Смотрите с 50:10 в этом видео)

Adobe XD быстр как молния

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

Сопоставим это с тем, как медленно Sketch работает с большими файлами и при этом занимает 200ГБ в вашем MacBook. Так что и здесь XD явно преуспевает.

Adobe XD находится под управлением солидной компании, имеющей широкие возможности

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

Для сравнения Bohemian Coding, компания-учредитель Sketch, была основана в 2008 и насчитывает всего 20 сотрудников. Такое существование, схожее с небольшим магазином имеет свои преимущества. Но в такой ситуации для Sketch будет сложно конкурировать с масштабом и перспективой Adobe.

Если Adobe продолжит выпускать обновления к XD в текущем темпе, у Sketch не останется шансов.

Владимир Синицын — преподаватель и координатор направления «Дизайн» в «Нетологии». Вы сможете освоить одну из самых востребованных профессий, повысить уровень своих знаний, освоите инструменты веб-дизайна и узнаете всё о проектировании интерфейсов. А также научитесь работать с инфографикой. Выбирайте курс по своему вкусу и записывайтесь!

Источник: spark.ru