Форма и функция — руководство по лучшим инструментам каркаса

В 1487 году Леонардо да Винчи нарисовал схему под названием «боевая машина», разработанную, когда он находился под покровительством Людовико Сфорца, герцога Милана. Хотя машина была специально спроектирована так, чтобы она не функционировала должным образом, группа инженеров воссоздала ее в 2010 году. Схема да Винчи — один из самых ранних примеров базовой каркасной схемы.

Термин каркас использовался десятилетиями, задолго до того, как он был принят миром веб-дизайна. Каркасы изначально использовались в программном обеспечении для автоматизированного проектирования (САПР) для иллюстрации дизайна объекта без необходимости в деталях. В результате получился чертеж , который выглядел так, как будто он был сделан из проводов, следовательно, мы получили каркасы.

Но что такое вайрфрейм в дизайне и для чего он нужен?

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

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

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

Эволюция вайрфреймов в цифровом дизайне — еще один артефакт UX и результат: wireflow. Wireflows — это комбинация каркасов и блок-схем, двух артефактов, которые дизайнеры UX постепенно объединили в один для другой цели: проиллюстрировать и проследить взаимодействия, которые представляют потоки задач в продукте, таком как веб-приложение.

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

Каркасная карта объединяет каркасы с маршрутами пользователя (или потоками пользователей), чтобы продемонстрировать путешествие пользователя по продукту с использованием каркасов.

Лучшие инструменты для создания вайрфреймов

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

• Возможность производить различные точности (от низкой до высокой)
• Стабильное программное обеспечение, простое в использовании и часто обновляемое
• Встроенные шаблоны, символы и стандартные компоненты пользовательского интерфейса с дополнительными возможностями.

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

Бальзамик

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

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

Balsamiq предлагается в виде настольной версии (Windows и Mac), облачного сервиса или плагина для Google Drive, Confluence и JIRA.

Мокупс

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

Основное различие между Moqups и Balsamiq заключается в точности каркасов. В то время как Balsamiq производит «нарисованный от руки» вид, Moqups предоставляет полноцветные трафареты и наборы для мобильных приложений и веб-дизайна, включая iOS, Android и Bootstrap.

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

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

Пидоко

Pidoco — это лучший инструмент для создания вайрфреймов, ориентированный на низкоточные результаты с некоторой базовой интерактивностью. Также облачный, он использует повторно используемые компоненты и отличается от Balsamiq и Moqups более надежным интерфейсом каркаса.

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

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

Глиффи

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

Как и другие инструменты для создания каркасов, Gliffy предоставляет библиотеку форм, значков и возможность делиться каркасами с Atlassian Confluence, Slack, Basecamp, Trello и WordPress.

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

Wireframe.cc

Wireframe.cc — это базовый инструмент для создания каркасов, очень похожий на Balsamiq. Он имеет чистый интерфейс без множества отвлекающих панелей инструментов и значков. В отличие от многих других инструментов, он позволяет «рисовать» каркасы с помощью мыши.

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

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

Причудливый

Называется «Документы Google» для каркасов, Whimsical имитирует инструменты построения диаграмм, такие как OmniGraffle и Visio. Он не фокусируется на прототипировании/мокапах, так как его основное внимание уделяется каркасам и блок-схемам, что делает его отличным кандидатом для создания потоков проводов.

Как и Gliffy, Whimsical представляет собой инструмент для создания каркасов средней точности и включает в себя большую библиотеку настраиваемых элементов (кнопки, поля ввода, флажки и т. д.).

Неограниченная совместная работа над одним и тем же каркасным документом в одно и то же время — отличная встроенная функция для удаленных проектных групп.

AdobeXD

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

Существует два способа создания каркасов в Adobe XD. Они могут быть построены с использованием линий и форм для создания объектов и элементов или с использованием готовых наборов пользовательского интерфейса из таких источников, как ресурсы behance.net и XD.

Одной из функций Adobe XD, позволяющей сэкономить время, является возможность создавать «основные» компоненты (называемые в Sketch «Символами»), которые полезны при внесении изменений, поскольку все компоненты, созданные на основе исходной копии, наследуют любые изменения.

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

Эскиз

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

Вайрфрейминг в Sketch очень похож на Adobe XD с использованием наборов/шаблонов и инструментов для рисования. Sketch широко использует символы , которые являются многоразовыми компонентами, которые можно определить один раз и использовать несколько раз (кнопки и т. д.). Экземпляры символов также принимают любые изменения, внесенные в «главный» символ. Это выгодно для дизайнеров, так как часто в процессе создания каркаса необходимо внести множество изменений.

Sketch позволяет дизайнерам создавать высокоточные каркасы, прототипы и мокапы. Это не облачное приложение, и одним из потенциальных недостатков является то, что оно работает только с macOS.

UXPin

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

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

Существует версия для Windows, macOS и облачная/браузерная версия. Для высокоточного каркасного моделирования UXPin работает так же, как Sketch и Adobe XD. Это не перетаскивание, как Balsamiq, но оно выводит прототипирование и макеты на новый уровень для дизайнеров, стремящихся оставаться в рамках единой экосистемы.

Марвел

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

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

Одной из причин, по которой дизайнеры выбирают Marvel для создания каркасов, является его интеграция с другими платформами, такими как Jira, Sketch, Confluence, Dropbox, Slack и многими другими. При совместной работе с разработчиками, удаленными проектными группами и клиентами эта функция экономит дизайнерам много времени.

У Marvel также есть продукт под названием Pop, который помогает преобразовывать наброски, сделанные ручкой и бумагой, в интерактивные прототипы iPhone и Android. Pop позволяет дизайнерам фотографировать свои эскизы и превращать их в интерактивные каркасы.

Аксур РП

Axure RP существует уже давно и является отличным инструментом для создания статических каркасов (а также интерактивных прототипов). Он не основан на облаке, хотя работает как на Windows, так и на macOS.

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

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

Любимые инструменты каркаса дизайнеров Toptal

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

«Мои любимые — Adobe XD и UXPin. Я начинаю выбирать XD в качестве фаворита, потому что с его помощью легко создавать быстрые каркасы и тестировать идеи, и оттуда я действительно могу начать дизайн и даже прототип на той же платформе». - Майкл Крейг

«Мой любимый — Pop, потому что он такой быстрый. В любом случае, я всегда рисую свои каркасы на бумаге, так что это отлично работает, и мне не нужно ничего обрабатывать дважды. Я также считаю, что это хорошо для всей вещи «не влюбляйся в решение», потому что оно настолько явно лоу-фай». - Никола Раштон

«Я почти все время использую Axure для своей дизайнерской работы. Это очень недооцененный инструмент для комплексных проектных работ очень высокой сложности», — Энди Омтведт.

«На самом деле я больше не занимаюсь вайрфреймом как таковым, так как я думаю, что инструменты достаточно сильны, чтобы создавать прототипы с низкой точностью, поэтому почти совмещаю первоначальный вайрфрейм с лучшим визуальным эффектом. Я использую Framer X с января этого года, и мне это нравится». - Чарли Уильямс

Резюме

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

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

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

Дальнейшее чтение в блоге Toptal Design:

• Каркасное картирование: как избежать расползания области видимости
• Смерть каркасу. Прямо к высокой точности!
• Разбор инструментов для дизайна — Adobe XD против Sketch (2019)
• Совершенствуйте свое мастерство с помощью этих лучших инструментов UX
• 10 UX-результатов, которые используют лучшие дизайнеры