Из Adobe XD в Webflow: Как превратить свои прототипы в живые сайты

Посмотрите, как перевести свои дизайн и прототипы Adobe XD в живые, полностью функциональные веб-сайты.

 

Мне нравится способность Webflow преобразовывать мои веб-проекты во что-то особенное — не требуя от меня кодирования. Но прежде чем произойдёт какое-либо из этих преобразований, большинство дизайнеров работают в своём дизайнерском инструменте. Для меня — это Adobe XD. Давайте рассмотрим, как я перехожу от слоёв к divs.

Проектирование с опытом

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

Я разбиваю дизайн своего веб-сайта на пять разделов:

1. Система

Здесь я создаю свою систему дизайна, всё в одной монтажной области, включая элементы брендинга, такие как:

  • Цвета
  • Логотип
  • Типографика

Также, я включаю больше веб-ориентированных элементов:

  • CTAs (кнопки и/или текстовые ссылки)
  • Компоненты (карточки, основные разделы, формы, и т.д.)
  • Символы (повторяющиеся элементы, такие как глобальная навигация и футер)

Это позволяет мне подумать о том, на чём я хочу создать свой сайт. Как только я спроектировал всё это, я сохраняю их в панели Assets (Ресурсы), XD.

ПАНЕЛЬ ASSETS — ВАШ ДРУГ

Когда я запускаю какой-либо проект, я делаю мудборд в качестве основы для моей системы дизайна. Я добавляю свой логотип, цвета, иконки и заголовки, уровней от h1 до h6.

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

Не верите мне? Вот GIF:

GIF, показывающий последовательность по добавлению цветов и стилей текста в панель ресурсов.

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

После добавления, я настрою свой h1-h6, текст body и paragraph.

Вот как я создаю глобальные цвета:

GIF показывающая действия по добавлению глобальных цветов.

GIF показывающая действия по добавлению глобальных цветов.

  1. Создайте div (не задавайте ему название класса)
  2. Задайте цвет фона
  3. Сохранить цвет как глобальный образец

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

Из Adobe XD в Webflow: Как превратить свои прототипы в живые сайты

2. Карта сайта

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

3. Варфрейм (wireframe)

Из Adobe XD в Webflow: Как превратить свои прототипы в живые сайты

Вайфрейминг (wireframing), помогает мне настроить контент и определить изменяемый пользовательский опыт сайта, пока я всё ещё работаю в XD. Здесь я создаю каждый контейнер (container), строку (row) и div, а затем группирую их, чтобы облегчить переход в Webflow.

Другими словами: Я стараюсь всегда думать с точки зрения модели коробки в Интернете, поэтому стараюсь соотносить макет и веб-сайт, один в один, насколько это возможно.

МАКЕТ МОНТАЖНОЙ ОБЛАСТИ

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

Затем я хочу настроить макет на своих монтажных областях. Я использую параметры, которые мне нужны для данного проекта веб-сайта, впрочем мои по умолчанию — 1200px с 15 колонками. Для этого выделите монтажную область и выберите необходимый макет на панели свойств.

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

4. Высокая точность (Hifi)

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

Затем я прервусь, чтобы выполнить некоторое волшебство. Нет, я не сделаю вас невидимым — видел, что это делают с людьми.

Из Adobe XD в Webflow: Как превратить свои прототипы в живые сайты

525,600 минут в год. В каких единицах измерения, вы измеряете год?

С повтором сетки. Вы сэкономите много времени.

Дизайн — это повторение. Вот почему так здорово брать что-то вроде слоёв изображений, повторяющихся сеток и просто дублировать их — снова и снова. Ох, и снова. Что на самом деле не так долго.

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

Большая часть? Она поможет вам моделировать проекты, которые вы создадите в Webflow, используя Collection Lists (Списки коллекций).

5. Прототип

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

Возвращаемся обратно к Webflow

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