Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Ваш первый прототип e-commerce сайта с помощью Adobe XD

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Ola Matona (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

Мы будем делать дизайн сайта для простого интернет-магазина одежды, под выдуманным брендом “Lo-Key”, который продает линейку базовой одежды в стиле Urban. Если вы хотите использовать это руководство для создания дизайна сайта своего магазина, меняйте полученные результы, экспериментируйте.

1. Изучите своих пользователей

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

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

Как только вы будете готовы приступить к созданию визуального и интерактивного макета, переходите к следующему шагу.

2. Выберите размер экрана

Первым делом Adobe XD предложит вам выбрать размер экрана. По умолчанию размер экрана для интернета Web 1920 (1920 X 1080 px), но вы также можете выбрать и другие варианты (Web 1280 или Web 1366) или задать свой размер.

picking a screen size in adobe xd

После выбора вы увидите рабочую среду XD, по умолчанию будет выбран режим Дизайн и будет отображена монтажная область ("холст") выбранного вами ранее размера. 

3. Продублируйте вашу монтажную область

Мы будем делать макеты для четырех типичных страниц интернет-магазина:

  1. домашнюю страницу
  2. страницу категории ("Майки")
  3. Корзину (где будут товары, добавленные пользователем, к оплате)
  4. страница О нас (где будет информация о бренде)

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

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

creating more artboards in adobe xd

Или же вы можете выделить первую монтажную область и в меню выбрать Edit > Duplicate (Редактирование > Дублировать). Переименуйте новые области, дважды кликнув на названия по умолчанию (они видны в верхнем левом углу каждой области).

4. Вставление изображений и текста

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

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

Определившись с фотографией, выберите File > Import (Файл > Импорт) (или нажмите Cmd + Shift + I), чтобы выбрать ее месторасположение на вашем компьютере и импортировать ее в вашу монтажную область. Если ваша фотография больше чем монтажная область, нажмите на нее и, удерживая клавишу мышки, переместите в нужное положение.

Продолжая следовать эстетике минимализма, текста тоже будет немного  - только название бренда (или логотип), слоган и навигация.

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

Под текстом логотипа, используя инструмент Text (Текст) снова, вставляем слоган бренда.

homepage design

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

text formatting in adobe xd

Шрифт в этом примере подобран в гармоничном соотношении 1:2, о котором вы можете больше узнать в этом руководстве по типографике в интернете: 

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

cart page in our ecommerce design

5. Создайте символ

Обратимся к странице О нас.

Найдите иконку для навигации, которая вам нравится (например из этого набора) и разместите ее рядом с логотипом в верхнем правом углу на странице О нас (или на любой другой странице, кроме домашней)

menu icon
Пример иконки меню

Так как эта иконка с логотипом нужна и на других страницах, то вы можете сделать из нее Символ. Кликните правой клавишей мышки и выберите Make Symbol (Создать символ) (или нажмите Cmd + K). Вы можете просмотреть любые созданые вами сивмолы, нажав в левой панели на иконку Assets (Ресурсы). Оттуда вы можете перетащить символ на любую из монтажных областей. Так вам не придется постоянно копировать и вставлять их.

Вы можете связать/залинковать ваш символ Lo-Key с главной страницей в следующем шаге.

6. Создайте вашу первую ссылку

Переключитесь в режим Прототипа на верхней панели. Приблизьте вашу первую монтажную область (Домашнюю страницу) и выберите текст About (O нас). Около него появится  синяя стрелка. Нажмите и потащите ее. Вы увидите как за ней будет тянуться линия туда, куда вы переместите курсор.

blue wire

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

transition settings

Повторите эту операцию, чтобы связать остальные страницы.

7. Используйте режим наложения для выпадающих меню и лайтбокса.

Теперь добавим в навигацию выпадающее меню.

Создайте новую монтажную область с названием Nav и измените ее размеры используя контролы Width (Длина) и Height (Высота) на правой панели. Размер области Nav ниже 210 X 275 px.

Используя инструменты на левой панели Text и, по желанию, Line, нарисуйте ваше выпадающее меню. Меню появится, когда пользователь нажмет на иконку меню "гамбургер".

drop down menu design

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

Теперь нажмите на иконку Play (Запустить) в правой верхней части окна. В окне просмотра появится ваша домашняя страница. Нажмите на About, чтобы перейти к странице About. Теперь кликните на иконку гамбургер. Откроется выпадающее меню. Кликните еще раз, и оно исчезнет.

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

8. Используйте Repeat Grid (Повторение сетки) для создания строк и столбцов объектов.

Для нашей страницы Майки, мы будем делать несколько рядов с продуктами.

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

Используйте инструмент Rectangle (Прямоугольник) из левой панели, чтобы нарисовать прямоугольник размером 450 X 300 px. А после, используя инструмент Fill (Заполнить) на правой панели, покрасьте его в серый цвет, чтобы показать, что это заглушка для изображения.

Теперь выделите прямоугольник и нажмите на Repeat Grid (Повторение сетки) на правой панели (или выберите в меню Object > Repeat Grid (Объект > Повторение сетки). Вы увидите зеленый контур и ползунки вокруг выбранного элемента, которые можно потянуть в любом направление (по горизонтали или вертикали). В нашем случае, потяните за них так, чтобы получились два ряда с тремя колонками.

repeat grid feature

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

padding between grid cells

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

images in the grid

Вы можете использовать тот же способ создания наложения, что в шаге 7, чтобы сделать лайтбокс, который появится после того, как нажать на майку/продукт.

pop up overlay

9. Необязательный шаг: поделитесь!

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

Если вы работаете над приложением или сайтом для клиентов, то вы можете поделиться с ними ссылкой на ваш дизайн проект, выбрав File > Share > Publish Prototype (Файл > Поделиться > Опубиковать прототип).

publish options

Вы также можете опубликовать Дизайн Спецификацию для разработчиков (или любого другого коллеги), чтобы они могли посмотреть форматирование и другие параметры вашего прототипа в браузере. Они также могут скачать все ресурсы, например, фотографии или иллюстрации, которые вы пометите для экспортирования (используйте View > Layers (Вид > Слои). Вы можете выбрать любой элемент и нажать иконку рядом с ним, или, кликнув правой клавишей мышки на любом элементе из списка выбрать Mark for Batch Export (выбрать для группового экспорта).

Design Specs in a web browser
Дизайн спецификация в веб браузере

Заключение

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.