Wireframes что это: Вайрфреймы, прототипы и мокапы – в чем разница? — Оди. О дизайне

Содержание

Вайрфреймы, прототипы и мокапы – в чем разница? — Оди. О дизайне

От редактора: несмотря на обширное использование слова «мокап» в англоязычной литературе и блогосфере, я предлагаю использовать более понятное и подходящее слово «макет» (или «дизайн-макет»).

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

Проблема такого упрощенного видения заключается в том, что они никогда не могут предвосхитить, чего ожидать от работы специалиста из области UX-дизайна, и легко могут запутаться. «По какой причине эта область не кликабельна?», «Я даже не понял, что мне нужно кликать мышкой именно тут», — такого рода комментарии раздражающе часто встречаются среди UX дизайн-проектов (User Experience Design — целью которого является дизайн взаимодействия с пользователем). Смешивания двух понятий — вайрфрейма и прототипа, – это все равно, что приравнивание архитектурного проекта (детализированный план будущего здания) и демонстрационного здания (который иногда строится без фронтальных стен).

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

Демонстрационное здание и план дома – это различные способы коммуникации в архитектуре:

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

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

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

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

Да, это действительно важно.

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

Вайрфреймы (Wireframes)

1. Что такое вайрфрейм?

Вайрфрейм – это образ дизайна низкой точности. Он должен четко показывать:

Основою группу контента (Что?)
Структуру информации (Где?)
Описание и базовая визуализацию взаимодействия между интерфейсом и пользователем (Как?)

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

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

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

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

Если что-либо занимает слишком много времени на подготовку (например, выбор иконок, загрузка изображений), вы должны представить его в упрощенном виде (например, используя «заполнители» — прямоугольники, пересеченные линиями крест на крест для изображений, плюс подобающее описание). Мы обычно называем вайрфреймы данными низкой точности (lo-fi).

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

2. Когда использовать вайрфрэймы.

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

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

Имейте в виду следующее: UXpin – это старт-апы с реально быстрыми циклами разработки (выпуск каждые пару дней). Мы используем вайрфреймы для быстрой визуализации заданий (даже самых небольших!). Это уничтожает всякое недопонимание и это очень дешево.

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

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

Прототипы

1. Что такое прототипы?

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

Они должны позволить пользователю:

Воспринимать контент и взаимодействие с интерфейсом
Тестировать основные взаимодействия по аналогии с финальным продуктом

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

2. Когда использовать прототип.

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

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

Имейте в виду, что прототипирование достаточно дорогая и время-затратная форма дизайн коммуникации. Я бы предположил создание прототипов, которые могут быть использованы повторно в дальнейших разработках (это значит, что вы должны уметь писать HTML, CSS и, возможно, JS-код). Это особенно эффективно в относительно простых проектах.

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

Мокап

1. Что такое мокап?

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

Хорошо сделанный мокап:

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

Мокапы часто путают с вайрфреймами из-за названий некоторых компаний, производящих программное обеспечение (видимо, речь идет о сервисах, подобных moqups. com — прим. ред.).

2. Когда использовать мокап.

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

Резюме

Как начать?

Прежде чем вы выберите средство коммуникации в дизайн-процессе, вам нужно:

Выделить конкретную проблему, которую вы пытаетесь решить
Выделить свою целевую аудиторию
Определить общие требования к продукту

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

Какие навыки у вас есть? Умеете ли писать код? Оценивая себя, членов команды и проект, вы должны понять, какое решение будет правильным.

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

особенности и преимущества / Хабр

Wireframe — это карта экранов, которая показывает навигацию между ними и содержит минимальную детализацию.

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

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

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

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

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

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

Wireframe и прототипы: не одно и то же

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

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

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

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

Как использовать Wireframes в разработке

Можно предложить сделать wireframes на этапе дискавери фазы, чтобы проработать экраны мобильного или веб-приложения.

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

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

Что такое каркас? Ваш лучший путеводитель

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

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

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

Без лишних слов, давайте превратим вас из новичка в вайрфрейминг в настоящего эксперта!

Вот краткое изложение того, что мы собираемся рассмотреть:

Что такое каркас?
Когда происходит каркасное моделирование?
Какова цель каркаса?
Какие существуют типы каркасов?
Что входит в каркас?
Каркасы веб-сайтов и мобильные каркасы
Какие инструменты используются для создания каркасов?
Примеры каркасов
Заключение

Готовы открыть для себя удивительный мир каркасов? Поехали!

1.

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

Начнем с очевидного вопроса: что такое вайрфрейм?

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

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

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

2. Когда происходит каркасное моделирование?

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

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

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

3. Какова цель каркаса?

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

Каркасы делают концепцию ориентированной на пользователя

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

Каркас — идеальный способ для дизайнеров оценить, как пользователь будет взаимодействовать с интерфейсом. Используя такие устройства, как Lorem Ipsum, псевдо-латинский текст, который выступает в качестве заполнителя для будущего контента, дизайнеры могут задавать пользователям такие вопросы, как «Что, по вашему мнению, будет написано здесь?»

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

Вайрфреймы уточняют и определяют функции веб-сайта

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

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

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

Каркасы создаются быстро и дешево

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

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

4.

Какие существуют типы каркасов?

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

Давайте рассмотрим их более внимательно:

Каркасы с низкой точностью

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

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

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

Каркасы средней точности

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

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

Источник: портфолио Кэтрин Лу

Высокоточные каркасы

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

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

Высокоточные каркасы следует сохранять для последних стадий цикла проектирования продукта.

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

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

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

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

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

6. Каркасы веб-сайтов и мобильные каркасы

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

Размер

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

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

Поведение

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

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

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

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

Чтобы узнать больше о создании каркасов для мобильных приложений и веб-сайтов, перейдите сюда!

7.

Какие инструменты используются для создания каркасов?

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

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

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

Чтобы узнать больше об инструментах для создания каркасов, ознакомьтесь с нашим обзором 8 лучших инструментов для создания каркасов, которые должен знать каждый UX-дизайнер.

8. Примеры каркасов

Чтобы дать вам представление о различных способах создания вайрфреймов (и вдохновить вас на создание собственных вайрфреймов), давайте взглянем на несколько примеров вайрфреймов:

Моника Гальван показывает нам переход от каркаса с низкой точностью до каркаса с высокой точностью, вплоть до окончательного пользовательского интерфейса для ее проекта Impossible.

Вайрфреймы Эльвиры Хелленпарт для проекта VocabApp, созданного в рамках программы CareerFoundry UX Fundamentals Program.

«Начав с низкоточных вайрфреймов чернил на бумаге и ориентированного на мобильные устройства подхода к дизайну, я начал повторять свой путь к прототипу с более высокой точностью», — говорит выпускник UX Аарон Акбари Морт о своем проекте Inktank.

9. Заключение

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

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

Готовы начать создавать собственные каркасы? Прочтите наше подробное руководство о том, как создать свой первый каркас.

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

Дополнительная литература

Ресурсы по UX-дизайну для начинающих
Неудачи классического UX-дизайна и как их избежать Опыт UX
Иногда вопросы важнее ответов
Вайрфрейминг — это способ разработки сервиса веб-сайта на структурном уровне. Каркас обычно используется для размещения содержимого и функций на странице с учетом потребностей и путей пользователя. Каркасы используются на ранних этапах процесса разработки, чтобы установить базовую структуру страницы до того, как будет добавлен визуальный дизайн и контент.
Каркас имеет важное значение в дизайне пользовательского интерфейса
Каркас — это макет веб-страницы, демонстрирующий, какие элементы интерфейса будут присутствовать на ключевых страницах. Это важная часть процесса проектирования взаимодействия.
Цель каркаса — обеспечить визуальное понимание страницы на ранних этапах проекта, чтобы получить одобрение заинтересованных сторон и команды проекта до того, как начнется творческая фаза. Каркасы также можно использовать для создания глобальной и вторичной навигации, чтобы гарантировать, что терминология и структура, используемые для сайта, соответствуют ожиданиям пользователей.
Каркас гораздо легче адаптировать, чем концептуальный дизайн.
Просматривать и изменять структуру ключевых страниц в формате каркаса быстрее и дешевле. Итерация разработки макетов до окончательной версии обеспечит клиенту и команде дизайнеров уверенность в том, что страница удовлетворяет потребности пользователей, выполняя при этом ключевые бизнес-цели и задачи проекта.
Вайрфреймы используются на ранних этапах жизненного цикла проекта.
Каркасы, которые часто используются для завершения процесса ориентированного на пользователя проектирования, также используются в начале этапа проектирования. Юзабилити-тестирование прототипа часто представляет собой тестирование каркасных страниц для предоставления отзывов пользователей до творческого процесса.
Каркасы могут быть просто нарисованы от руки, но часто они собираются с помощью программного обеспечения, такого как Visio от Microsoft, для отображения на экране. Однако, если каркасы будут использоваться для тестирования юзабилити прототипа, лучше всего создавать их в HTML. Есть хорошее программное обеспечение, позволяющее легко это сделать, включая Axure RP или Omnigraffle (только для Mac).
Преимущества вайрфрейминга
Одним из больших преимуществ вайрфрейминга является то, что он обеспечивает раннее визуальное представление, которое можно использовать для просмотра вместе с клиентом. Пользователи также могут просмотреть его как механизм ранней обратной связи для тестов удобства использования прототипа. Мало того, что каркасы легче изменить, чем концептуальные проекты, после утверждения клиентом и пользователями они вселяют уверенность в дизайнера.
С практической точки зрения каркасы обеспечивают правильное позиционирование содержимого и функций страницы в соответствии с потребностями пользователей и бизнеса. По мере продвижения проекта вайрфреймы можно использовать в качестве хорошего диалога между членами проектной группы для согласования видения и масштаба проекта.
Недостатки вайрфреймов
Поскольку вайрфреймы не включают никакого дизайна и не учитывают технических аспектов, клиенту не всегда легко понять концепцию. Дизайнер также должен будет преобразовать каркасы в дизайн, поэтому общение для поддержки каркаса часто необходимо, чтобы объяснить, почему элементы страницы расположены именно так, как они есть. Кроме того, когда добавляется контент, его изначально может быть слишком много, чтобы поместиться в макет каркаса, поэтому дизайнеру и копирайтеру придется тесно сотрудничать, чтобы все это соответствовало.
Заключение
Вайрфреймы следует использовать на ранних этапах проекта, чтобы получить одобрение пользователей и клиентов в отношении макета ключевых страниц и навигации. Это придаст команде проекта, особенно дизайнерам, уверенность в продвижении вперед.

No related posts.