Посмотрите, как перевести свои дизайн и прототипы Adobe XD в живые, полностью функциональные веб-сайты.
Мне нравится способность Webflow преобразовывать мои веб-проекты во что-то особенное — не требуя от меня кодирования. Но прежде чем произойдёт какое-либо из этих преобразований, большинство дизайнеров работают в своём дизайнерском инструменте. Для меня — это Adobe XD. Давайте рассмотрим, как я перехожу от слоёв к divs.
Проектирование с опытом
Прежде чем приступить к проектированию следующего веб-сайта технологичной компании “единорога”, я хочу продумать компоненты, страницы и сценарии, которые мне нужно будет спроектировать. Каждый шаг из XD легко смоделировать в Webflow.
Я разбиваю дизайн своего веб-сайта на пять разделов:
1. Система
Здесь я создаю свою систему дизайна, всё в одной монтажной области, включая элементы брендинга, такие как:
- Цвета
- Логотип
- Типографика
Также, я включаю больше веб-ориентированных элементов:
- CTAs (кнопки и/или текстовые ссылки)
- Компоненты (карточки, основные разделы, формы, и т.д.)
- Символы (повторяющиеся элементы, такие как глобальная навигация и футер)
Это позволяет мне подумать о том, на чём я хочу создать свой сайт. Как только я спроектировал всё это, я сохраняю их в панели Assets (Ресурсы), XD.
ПАНЕЛЬ ASSETS — ВАШ ДРУГ
Когда я запускаю какой-либо проект, я делаю мудборд в качестве основы для моей системы дизайна. Я добавляю свой логотип, цвета, иконки и заголовки, уровней от h1 до h6.
Затем выберите цвета или стиль знаков (или, любую монтажную область, целиком), откройте панель Assets и щелкните иконку плюс, рядом с соответствующим типом ресурсов. Это добавит все ваши цвета и/или стили текста в панель ресурсов, что значительно упростит их применение к вашему дизайну.
Не верите мне? Вот GIF:
В Webflow я выполняю те же действия. Добавляю семейство шрифтов и глобальные цвета, а также загружаю изображения в панели ресурсов, прежде чем я сделаю что-нибудь ещё. Этот раунд выполнен на высоте. Вот как выбирать и добавить шрифты Google.
После добавления, я настрою свой h1-h6, текст body и paragraph.
Вот как я создаю глобальные цвета:
GIF показывающая действия по добавлению глобальных цветов.
- Создайте div (не задавайте ему название класса)
- Задайте цвет фона
- Сохранить цвет как глобальный образец
Повторите это для каждого цвета бренда. Я предлагаю загружать все сразу, прежде чем вы начнете свой проект. У Adobe, есть удобная классификация о том, как экспортировать ресурсы дизайна или монтажных областей.
2. Карта сайта
Здесь я создаю карту сайта, отображающую все необходимые страницы и иерархические взаимоотношения между ними. Это помогает мне увидеть, сколько монтажных областей мне понадобится в последующих трёх разделах.
3. Варфрейм (wireframe)
Вайфрейминг (wireframing), помогает мне настроить контент и определить изменяемый пользовательский опыт сайта, пока я всё ещё работаю в XD. Здесь я создаю каждый контейнер (container), строку (row) и div, а затем группирую их, чтобы облегчить переход в Webflow.
Другими словами: Я стараюсь всегда думать с точки зрения модели коробки в Интернете, поэтому стараюсь соотносить макет и веб-сайт, один в один, насколько это возможно.
МАКЕТ МОНТАЖНОЙ ОБЛАСТИ
Затем я хочу настроить макет на своих монтажных областях. Я использую параметры, которые мне нужны для данного проекта веб-сайта, впрочем мои по умолчанию — 1200px с 15 колонками. Для этого выделите монтажную область и выберите необходимый макет на панели свойств.
Повторить это в Webflow довольно легко. Проверьте этот шаблон Webflow — клонировать его будет отличным способом узнать, как настроить свой сайт.
4. Высокая точность (Hifi)
Вот где я начинаю применять элементы моей системы к своему вайрфрейму, формируя визуализацию скелета на уровне производства.
Затем я прервусь, чтобы выполнить некоторое волшебство. Нет, я не сделаю вас невидимым — видел, что это делают с людьми.
525,600 минут в год. В каких единицах измерения, вы измеряете год?
С повтором сетки. Вы сэкономите много времени.
Дизайн — это повторение. Вот почему так здорово брать что-то вроде слоёв изображений, повторяющихся сеток и просто дублировать их — снова и снова. Ох, и снова. Что на самом деле не так долго.
С повтором сетки, всё, чего не стало. История. Добро пожаловать в будущее дизайна. Этот рабочий процесс спас мой брак — реальная история — потому что теперь, когда мне не нужно повторять элементы снова и снова, у меня появилось время, ходить на свидания. GIF выше показывает, как я это делаю.
Большая часть? Она поможет вам моделировать проекты, которые вы создадите в Webflow, используя Collection Lists (Списки коллекций).
5. Прототип
На этом заключительном этапе я начинаю применять набор инструментов для создания прототипов XD, чтобы связывать страницы, добавить переходы и состояния, а также отполировать предварительный просмотр, прежде чем я воплощу его в жизнь с помощью Webflow. Этот последний шаг является необязательным, но помогает поддерживать соотношение “один в один” между макетами и сайтом, о которых я упоминал ранее, и он отлично подходит, чтобы проиллюстрировать ценности клиентам, если это необходимо.
Возвращаемся обратно к Webflow
Завершающим этапом данного процесса является, конечно же, перенос всей своей работы из XD в Webflow. Следуя описанным здесь шагам, вы убедитесь, что вы идёте к успеху — даже на этапе быстрой разработки — в Webflow.
