Что такое вайрфрейминг? Руководство для начинающих

Опубликовано: 2022-08-02

Что такое вайрфрейминг? Проще говоря, это один из наиболее важных аспектов процесса проектирования UX (пользовательский опыт). Если вы пробовали себя в сложном мире дизайна взаимодействия с пользователем, скорее всего, вы хотя бы слышали термин «вайрфреймы».

Но что такое вайрфреймы и почему они являются такой важной частью процесса проектирования UX?

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

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

В заключение вы перестанете задаваться вопросом «Что такое вайрфрейминг?» чтобы иметь возможность легко создавать и использовать свои собственные каркасы.

Теперь давайте посмотрим.

Что такое каркас?

Давайте начнем с самого начала, задав простой вопрос: «Что такое вайрфрейм?»

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

  • Макет
  • Структура
  • Пользовательский поток
  • Предполагаемое поведение
  • Информационная архитектура
  • Функциональность

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

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

Другими словами, чем детальнее веб-страница, тем более подробным должен быть каркас.

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

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

каркас

Когда лучше всего делать вайрфрейм?

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

Исследовательская фаза — это время, когда дизайнеры:

  • Совместная работа над идеями
  • Выявление требований, связанных с бизнесом
  • Тестирование общего объема проекта

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

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

Оттуда, общий проект начнет разворачиваться.

Чем полезны каркасы?

Есть три важных цели и преимущества, которые вайрфреймы привносят в процесс проектирования:

  1. Они недороги и просты в создании.
  2. Они определяют и помогают уточнить специфические особенности веб-сайта или веб-страницы.
  3. Они фокусируют процесс проектирования на конечном пользователе.

Чтобы разбить все на части, давайте подробно рассмотрим каждый из этих важных моментов.

1. Они недороги и просты в изготовлении

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

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

Подробнее об этих инструментах далее в этом руководстве.

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

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

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

2. Они определяют и помогают уточнить конкретные особенности веб-сайта или веб-страницы.

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

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

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

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

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

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

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

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

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

Какие различные типы каркасов вы можете использовать?

Существует три различных типа каркасов. Тип каркаса определяется тем, сколько деталей содержит каркас.

1. Каркасы Lo-Fi

Это голые кости, очень простое представление веб-страницы. Он почти всегда будет служить отправной точкой дизайна.

Из-за этого вайрфреймы lo-fi обычно получаются довольно грубыми. Они созданы без учета точности пикселей, сетки или масштаба.

Цель низкокачественного каркаса — исключить детали, которые в противном случае могут отвлекать от общего макета. Это будет включать:

  • Блочные формы
  • Имитационный контент (текст-заполнитель для заголовков и меток)
  • Простые изображения

Каркасы Lo-Fi используются для начала разговоров, отображения пользовательского потока и выбора макета навигации. Проще говоря, вайрфрейм lo-fi — идеальное решение, когда у вас есть клиенты или заинтересованные лица, сидящие с вами в комнате, и вы хотите быстро что-то нарисовать, сидя на совещании.

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

2. Каркасы Mid-Fi

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

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

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

Каркас среднего размера создается с помощью цифрового инструмента для создания каркасов, такого как Balsamiq или Sketch.

Для владельцев сайтов WordPress функция Wireframe Blocks в плагине Kadence Blocks предоставляет самый простой способ создания каркаса. Чуть подробнее об этом позже.

3. Высококачественные каркасы

Наконец, что не менее важно, это каркасы Hi-Fi. У них есть макеты, которые зависят от пикселя. Например, вайрфрейм в стиле lo-fi, вероятно, будет иметь текстовые заполнители «lorem ipsum» и серые поля, заполненные крестиками, которые указывают на размещение изображения. Однако высококлассный каркас будет включать в себя полностью написанный контент и фактические изображения, которые будут размещены на странице.

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

Что входит в каркас?

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

  • Поля поиска
  • Кнопки «Поделиться»
  • Логотипы
  • Заголовки
  • Текст заполнителя Lorem ipsum

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

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

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

В хай-фай вайрфрейм некоторые дизайнеры могут время от времени добавлять цвет. Чаще всего он будет ограничен красным и темно-синим.

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

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

Мобильные каркасы против каркасов веб-сайтов

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

Зная это, в чем именно разница между вайрфреймами для мобильных устройств и вайрфреймами для веб-сайтов?

1. Размер каркаса

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

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

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

2. Поведение

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

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

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

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

3. Взаимодействие

Пользователи будут взаимодействовать на вашем мобильном сайте или в приложении совершенно по-другому, чем на вашем настольном сайте.

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

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

Каркас в WordPress

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

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

Однако для пользователей WordPress лучшим инструментом для создания каркасов является новая функция Wireframe Blocks в плагине Kadence Blocks.

Каркасные блоки от Kadence Blocks — это новый набор блоков WordPress, которые предоставят вам чистые, предварительно созданные разделы, которые помогут направлять сборку вашего сайта. Лучше всего то, что все это делается прямо из редактора блоков WordPress natvie.

Wireframe Blocks предоставляет пользователям более 30 различных каркасных блоков, в том числе:

  • Содержание
  • Таблицы цен
  • Нижние колонтитулы
  • Отзывы
  • Карты
  • Обратный отсчет
  • Портфолио
  • Формы
  • Гораздо больше

Как владелец сайта WordPress, вам не нужно делать проводное формирование за пределами родного редактора блоков WordPress. Wireframe Blocks от Kadence Blocks дает вам единственный инструмент, который вам нужен для создания каркаса в WordPress.

И это не может быть проще в использовании.

Новые блоки Wireframe доступны в бесплатном плагине Kadence Blocks. Взгляните и посмотрите, что он может сделать для вашего процесса создания каркаса.

Что такое вайрфрейминг? Теперь ты знаешь!

Вот оно: «Что такое вайрфрейминг?» объяснить за 10 минут или меньше.

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

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

Загрузите блоки Kadence с бесплатной библиотекой каркасов веб-сайтов

Если вы любите создавать привлекательный контент с красивым дизайном, Kadence Blocks предоставляет инструменты для творчества прямо в родном редакторе WordPress. Кроме того, наслаждайтесь тоннами предварительно созданного контента, который вы можете легко добавить на свой сайт, включая библиотеку каркасных блоков, чтобы начать работу над своим следующим веб-дизайном. Отлично подходит для вдохновения и быстрого развития!

Скачать сейчас