Введение

Многие UX дизайнеры начинают понимать ценность прототипирования и проектирования продуктов только с помощью реального кода в браузере, а не создавая плоские или интерактивные макеты в Photoshop или Sketch, чтобы клиенты могли их утвердить.

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

Это фантастический инструмент для дизайна, который фокусируется на визуальном проектировании в браузере и уже используется такими компаниями, как IDEO, Adobe, MTV и Nasa, равно как и множеством независимых дизайнерских агентств и фрилансеров.

Вот несколько причин, почему я отдаю предпочтение Webflow:

  1. Вы можете сразу перейти к созданию макетов в браузере и с самого начала посмотреть, как они работают на нескольких устройствах. Не представляя себе, как будет выглядеть и вести себя готовый продукт.
  2. Наличие прототипа уже в Webflow позволяет вам легко перейти на этап разработки UI / Дизайна проекта, используя утвержденный прототип в качестве основы. Я видел, как агентства и команды сталкиваются с большими трудностями, не говоря уже о трате множества времени, используя одну часть программного обеспечения для создания прототипов, а другую для создания дизайна, но Webflow решает эту проблему.
  3. Webflow позволяет вам экспортировать готовый код, который поразит, даже самых прилежных разработчиков, своей чистой семантической структурой и своей упорядоченностью. Подобный экспорт кода также идеален для быстрых преобразований и работает в качестве превосходной интерфейсной структуры для проектов на основе CMS. Очень хорошо.

Процесс

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

Ниже мой обычный UX/Дизайн процесс:

Волшебный 3-ступенчатый процесс создания продукта
Сохраняйте простоту. Волшебный 3-ступенчатый процесс.

Давайте рассмотрим более детально, как Webflow справляется с этим …

UX и планированиеЭто этап сбора технических требований, до того, как я начну какую-либо работу по созданию прототипов. Здесь такие детали, как User Journeys, Types, Personas, Workflows и карта сайта, собираются и компилируются в отчете, который служит основой для моего прототипа и дизайна.

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

Детальная карта сайта Webflow
Детальная карта сайта демонстрирует перемещения пользователя по сайту и связи контента

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

Webflow позволяет вам планировать иерархию страниц
Webflow позволяет вам планировать иерархию страниц вашего сайта и отображение на дисплее

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

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

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

от утвержденного прототипа к дизайну пользовательского интерфейса
Плавный переход от утвержденного прототипа к дизайну пользовательского интерфейса в пределах одной программы

Базовые прототипы

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

  1. Чтобы показать им, как пользователь перемещается по сайту и использует продукт, что он ощущает. Одно дело видеть статичный файл карты сайта или диаграмму, но совсем другое, иметь макет, который можно открыть в браузере или мобильном устройстве.
  2. Согласование иерархии контента и главной страницы/структуры экрана. Как и в предыдущем пункте, одно дело – видеть содержимое в Word Doc или PDF, но совершенно другое – когда клиент может действительно понять, как это будет выглядеть для пользователя в контексте продукта.

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

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

Одно дело смотреть статичную карту сайта или диаграмму, но совсем другое – открывать макет в браузере на вашем компьютере или мобильном устройстве.

Прототипы в оттенках серого без стилевого оформления 
Прототипы в оттенках серого без стилевого оформления — это позволяет клиентам и участникам проекта сосредоточиться только на структуре и контенте

Адаптивное прототипирование

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

  • Настольный компьютер (991px и больше)
  • Планшет (990px и меньше)
  • Мобильный телефон, горизонтальная ориентация (768px и меньше)
  • Мобильный телефон, вертикальная ориентация (470px и меньше)

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

Адаптивное прототипирование webflow
Планшет, вертикальная ориентация (990px и меньше)

 

горизонтальная ориентация (768px и меньше) webflow
Мобильный телефон, горизонтальная ориентация (768px и меньше)

 

вертикальная ориентация (470px и меньше) webflow
Мобильный телефон, вертикальная ориентация (470px и меньше)

Прогресс и измененные редакции

Webflow позволяет публиковать ваш проект либо в домене webflow.io, либо экспортировать и размещать код прототипа на вашем собственном сервере. Это позволяет легко обмениваться простыми URL-адресами для проверки и утверждения клиентом, которые также могут быть защищены паролем.

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

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

Прототип

  • client-name-prototype-a.webflow.io (revision 1)
  • client-name-prototype-b.webflow.io (revision 2)
  • client-name-prototype-c.webflow.io (revision 3)

Дизайн

  • client-name-design-a.webflow.io (revision 1)
  • client-name-design-b.webflow.io (revision 2)
  • client-name-design-c.webflow.io (revision 3)

И так далее…

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

Довольные клиенты

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

Мы использовали его для реализации дорогостоящих проектов для крупных лондонских клиентов, таких как City of London & Southbank University, а также менее состоятельных стартапов, которым требовалось очень быстрое выполнение заказа.

Читайте об этом подробнее здесь — http://robertsmith.co

Будущее

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

Расскажите о своем опыте использования Webflow и о своих мыслях на этот счет.

Удачного прототипирования!