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

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

Общие понятия

Вайрфрейм — концепция создания структуры дизайна интерфейса. В переводе с английского языка означает каркас. В Рунете его называют более знакомым словом «прототип».

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

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

Концепция повсеместно используется зарубежными дизайнерами. В СНГ пространстве сначала проходит обсуждение технического задания с клиентом, а затем специалист приступает к работе. Вместо wireframe он создаёт дизайн-макет во всех красках.

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

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

На картинке ниже отображен принцип работы «каркаса». Сначала создали схему, а потом превратили её в интерфейс. Исходный набор элементов не изменился. Если вернуться к примеру с постройкой дома, мы просто добавили в помещение обои, ламинат и мебель.

Визуальный прототип определяет, каким будет интерфейс и помогает проверить целостность. Вайрфрейм — не просто минималистичный шаблон, который на один шаг отодвигает от готового UI. Это «скелет», который держит на себе остальные части тела. Если дизайнер пропускает этап создания wireframe, он добавляет себе лишнюю работу.

Хоть вайфрейм и считается образом с низкой точностью, он чётко показывает:

• структуру контента;
• взаимодействие элементов;
• границы.

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

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

Когда пригодится каркас

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

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

Визуальная схема полезна не только дизайнерам и заказчикам. После воплощения графической концепции макет переходит к программистам. Дальше они должны сделать из него готовый веб-продукт. Wireframe можно использовать как карту. Верстальщик возьмёт из неё размеры и с помощью кода создаст основные блоки. Он может действовать так же, как и дизайнер. Сначала внедрить базовые элементы без мультимедийного контента и анимации, а потом заняться декорациями.

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

Многие дизайнеры не хотят тратить время на ещё один вариант проекта и стремятся побыстрее подогнать макет под требования заказчика. За этим следует длительный процесс обсуждения и правок. Специалистам кажется, что время, потраченное на создание чёрно-белой копии можно было потратить более эффективно. В этом есть здравый смысл. Если клиент принял дизайн-макет с первого раза, проблем не будет. Хотя такое развитие событий происходит далеко не всегда.

Аргументы в пользу прототипа:

1. Подкрепляет идеи визуальным подтверждением. В разговоре с заказчиком появится эффективный рычаг воздействия. Он поймёт, что специалист не просто вредничает, а хочет сделать продукт более удобным.
2. Может стать частью рабочего процесса. Проектирование UI — сложный процесс, состоящий из множества шагов. Используйте wireframe как элемент, который задаёт рамки, но не ограничивает креатив.
3. Даёт быструю обратную связь. Собрали «скелет», отправили членам команды и клиенту. Обработали возражения, внесли правки и показали финальный вариант.

5 шагов на пути к созданию эффективного вайрфрейма

Нет сомнений в полезности инструмента, осталось разобраться, как правильно с ним работать.

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

Выслушайте клиента

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

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

Соберите информацию воедино

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

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

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

Выберите рабочий инструмент

Для этих целей можно выбрать любой из существующих онлайн-редакторов или десктопные программы. Легко обойтись без установки специализированных приложений вроде Illustrator или Photoshop.

Варианты:

1. Balsamiq. Вайрфреймы, разработанные на базе платформы, выглядят как полноценные наброски. В сервисе есть встроенная библиотека часто используемых элементов. Не надо создавать блоки и формы с нуля. Открыли шаблоны, выбрали подходящий и перенесли на холст. Программы работают на Windows, Linux и Mac.
2. Omnigraffle. Приложение разрабатывалось как инструмент прототипирования для владельцев «яблочной» продукции. Оно совместимо с Mac и iOS. Базовой версией можно пользоваться 2 недели, дальше придётся покупать лицензию. Подписка стоит от 150 до 250 долларов. У Omnigraffle есть крутые функции, которые экономят время. К примеру, автоматическое размещение объектов, умная привязка и широкие возможности создания диаграмм.
3. Axure. Изначально программа была доступна только на Mac. Недавно появилась версия под Windows. Считается профессиональным софтом для прототипов и вайрфреймов. Пользователям доступны инструменты интерактивного взаимодействия.
4. MockFlow. Популярный онлайн-сервис для создания мокапов и вайрфреймов. Есть коллективный чат, совместная работа, история версий и готовые библиотеки. На разработку «каркасов» уходит минимум времени из-за максимальной автоматизации.

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

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

Создайте структуру

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

Идеальная цепочка при создании UI выглядит так: набросок — wireframe — макет — вёрстка. Некоторые дизайнеры расширяют набор компонентов, и кроме обычного вайрфрейма разрабатывают схему более высокого уровня с картинками и анимацией.

Время создания зависит от масштаба проекта, навыков дизайнера и рабочих инструментов. Некоторым хватит несколько часов в Illustrator, другие потратят целый день в онлайн-редакторах.

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

Тестирование

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

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

Преимущества и недостатки

Сам по себе wireframe — всего лишь инструмент. В умелых руках он может сэкономить время и дать чёткое понимание того, как будет выглядеть user interface. Для новичков он поначалу будет выглядеть как очередной фактор, который затягивает разработку.

Преимущества вайрфреймов:

1. Задают направление работы.
2. Входят в документацию проекта.
3. Есть программы и сервисы для быстрого проектирования.

Недостатки:

1. Появляется дополнительный шаг на пути к созданию макета.
2. Нет понимания конечного результата.

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

Главная задача любого интерфейса — решать проблемы. Можно потратить несколько недель на красивый дизайн в стиле Material, но пользователям будет трудно выполнить определённые действия. Именно поэтому надо использовать полезные решения вроде wireframe. Они показывают, в каком направлении надо развиваться и помогают добраться до пункта назначения.

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