Wireframe что это такое
Wireframes в разработке: особенности и преимущества
Wireframe — это карта экранов, которая показывает навигацию между ними и содержит минимальную детализацию.
Wireframes имеют ограниченные визуальные характеристики, поскольку большинство элементов дизайна (например, изображения, видео, цвета, реальный текст и т. д.) не включены в этот инструмент. Вместо конкретных элементов дизайнеры используют заполнители. Например, квадрат с крестиком представляет изображение. Этот прием имеет важное значение — заполнители объектов и серая палитра помогают сосредоточиться на макете и структуре страницы, а не на визуальных аспектах дизайна.
Иногда заказчики могут не понимать, что значит «главное изображение», «интеграция с картой Google», «фильтрация продуктов» и сотни других терминов. Вайрфрейминг конкретных функций дает клиенту четкую информацию о том, как они будут работать, где будут размещаться и насколько они могут быть полезны на самом деле.
Иногда глядя на wireframe, заказчику или команде становится понятно, что от некоторых функций лучше отказаться. Когда мы смотрим на фичи без влияния красок и картинок, мы видим, как они работают в чистом виде и насколько соответствуют целям и задачам продукта. На этом этапе внести изменения проще и быстрее. При этом бюджет для такой работы совсем небольшой — экраны выполнены без детализации, что значительно снижает стоимость артефакта.
Одним из больших преимуществ wireframe является то, что он обеспечивает раннюю визуализацию, которую можно использовать для обзора с клиентом. Пользователи также могут просмотреть его как механизм ранней обратной связи для тестирования юзабилити прототипа.
С практической точки зрения каркасы обеспечивают правильное размещение содержимого и функций страницы в соответствии с потребностями пользователей и бизнеса. И по мере продвижения проекта их можно использовать в качестве полезного диалога внутри команды для согласования видения и масштабов проекта.
Многие люди используют термины wireframe и прототип как синонимы, но между ними есть существенные различия: они выглядят по-разному, они сообщают разные вещи и служат разным целям.
Прототипирование — это процесс создания интерактивного опыта. Прототип представляет собой конечный продукт, включая моделирование взаимодействия с пользовательским интерфейсом.
В отличие от wireframes, которые часто выглядят одинаково, прототипы могут значительно различаться. Это могут быть как и простые артефакты, отражающие элементарные взаимодействия, так и кликабельные инструменты, которые выглядят и работают почти как настоящий продукт. Кстати, в наших кейсах мы публикуем примеры таких кликабельных прототипов.
Прототипы служат мостом к реальному продукту. Цель прототипирования показать связь экранов посредством пользовательского опыта и их назначение. Это делает его удобным для тестирования с реальными пользователями — прототипы позволяют участникам взаимодействовать с дизайном так же, как они взаимодействуют с готовым продуктом.
Как правило, мы предлагаем сделать wireframes на этапе дискавери фазы, чтобы проработать экраны мобильного или веб-приложения.
В wireframes мы описываем информацию о целях экрана и схематично рисуем те элементы, которые планируем там располагать. Чаще всего мы работаем над этим инструментом параллельно с BPMN-диаграммой. После того как wireframes прорисованы и согласованы с заказчиком, а диаграмма проработана, мы совмещаем эти артефакты в один. Такой ход дает возможность увидеть, каких экранов не хватает на диаграмме процессов, или какие процессы мы не учли при проработке BPMN.
Так при помощи wireframes и BPMN-диаграмм мы обеспечиваем целостность бизнес-процессов будущего приложения. Также вайрфреймы значительно экономят время и деньги на этапе тестирования и внесения исправлений на более поздних этапах проекта.
Хватит путать вайрфреймы, прототипы и мокапы
Apr 8, 2016 · 4 min read
Разбираем, что обозначают эти термины и когда можно использовать соответствующие артефакты.
Примечание: попытки перевести wireframe и mockup породили уже, наверное, дюжину терминов разной адекватности и распространённости. Я это учёл и в статье ограничился простыми «вайрфрейм» и «мокап», чтобы каждый подставил такие русификации, какие заведены у него в компании.
Wireframe
Что такое вайрфрейм?
Вайрфрейм — это низко детализированное представление дизайна. Он чётко должен показывать:
Вайрфрейм — не просто бессмысленный набор серых блоков, хотя это выглядит именно так. Считайте это скелетом вашего дизайна и запомните, что в вайрфрейме должны быть представлены все важные элементы конечного продукта.
«Представл е ны» — это ключевое слово, которое поможет вам найти правильный баланс между уровнем детализации и скоростью создания. Нельзя уходить в детали, но с другой стороны, нужно создать цельное представление конечного дизайна и не пропустить ни одного важного элемента. Вы описываете фронт работ по проекту для всех задействованных лиц: разработчиков, дизайнеров, копирайтеров, менеджеров — всем им нужен хорошо сработанный вайрфрейм. По сути, вы создаёте карту города. Каждая улица должна на ней быть, но в очень упрощённом виде. Смотря на карту, вы можете оценить планирование города, но не можете увидеть его красоту.
Вайрфреймы должны создаваться быстро и большую часть этого времени следует провести за обсуждениями с командой и размышлениями. Само таскание серых блоков по экрану должно занимать минимум времени.
Внешний вид должен быть эстетичным, но очень простым. Чёрно-серо-белый — типичная палитра вайрфрейма (вы можете добавить синий, чтобы обозначить ссылки).
Если, например, выбор пиктограмм или загрузка картинок занимает слишком много времени, их можно заменить заглушками — накрест перечёркнутыми прямоугольниками с соответствующим описанием. Мы склонны полагать, что вайрфрейм даёт неполное представление о конечном результате.
Запомните, хороший вайрфрейм ложится в основу чистового дизайна и определяет направление работы для всей команды.
Когда использовать вайрфреймы?
Обычно вайрфреймы используются как документация по проекту. Так как они показывают взаимодействие пользователя с интерфейсом в отдельных статичных моментах, их нужно сопровождать текстовыми комментариями: как короткими пояснениями, так и комплексной технической документацией, при необходимости.
Однако они могут использоваться менее формальным способом. Так как они просты и быстро создаются, они, как зарисовки, хорошо подходят для обсуждения внутри команды. Если разработчики спрашивают, как что-то должно быть сделано, ответ может быть дан в виде быстро сделанного вайрфрейма.
Вайрфреймы сложно приспособить для юзабилити-тестирования, хотя они могут пригодиться для получения отзывов во время начального «партизанского» исследования, когда вам срочно требуется озарение и вас не беспокоит методологическая чистота.
В общем процессе дизайна вайрфреймы могут быть неожиданно эффективны и, хоть в последние годы о них отзывались не очень, они остаются важным начальным этапом сложных проектов.
Prototype
Что такое прототип?
Прототип, часто путаемый с вайрфреймом, — это средне или высоко детализированное представление конечного продукта, которое имитирует взаимодействие пользователя с интерфейсом. Он должен позволять пользователю:
Прототип — это имитация взаимодействия пользователя с интерфейсом конечного продукта. Он может не выглядеть в точности как конечный продукт, но определённо не должен быть наброском в оттенках серого. Взаимодействия должны быть аккуратно смоделированы и быть максимально похожими на то, что будет в конечном продукте. Связь между интерфейсом (фронтендом) и бэкендом обычно опускают для сокращения издержек и ускорения процесса.
Когда использовать прототип?
Потенциал прототипов полностью раскрывается при пользовательском тестировании. С помощью этой имитации можно получить много материала для улучшения юзабилити ещё до фактического начала разработки.
Прототипы обычно не очень подходят для документации, так как понять работу интерфейса можно только в процессе взаимодействия с прототипом. С другой стороны, прототип — это наиболее привлекательная форма документирования дизайна, так как интерфейс представляется как есть.
Учтите, что прототипирование — это довольно дорогостоящая и длительная форма разработки и обсуждения дизайна. Я рекомендую создавать прототипы, которые потом можно повторно использовать при разработке (да, это значит, что вам придётся кодить HTML, CSS и, возможно, JS). Это особенно эффективно в относительно простых проектах.
Если всё сделано правильно, то в сочетании с юзабилити-тестированием прототипирование себя окупит.
Mockup (mock-up)
Что такое мокап?
Мокап — это средне или высоко детализированное статичное представление дизайна. Очень часто мокап — это черновик дизайна или даже фактический дизайн-макет. Хороший мокап:
Мокапы часто путают с вайрфреймами из-за названий таких программ как Mockingbird, Mockup Builder, Balsamiq Mockups.
Когда использовать мокап?
Мокапы очень хороши для получения одобрения от заинтересованных лиц, не вовлечённых в разработку. Благодаря визуальной природе мокап воспринимается легче, чем низко детализированные артефакты, и при этом создаётся быстрее прототипа. Они хороши для сбора отзывов, и их можно использовать в документации.
Базовый Курс UX: Что такое Wireframe?
Урок 11 из 31:
(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала )
Большинство людей принимают за UX то, что мы называем Wireframe-ами: набор схем с блоками и связями. К сожалению, большинство людей также считают, что создавать Wireframe-ы — означает заниматься UX. Поэтому давайте изучим:
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Что такое Wireframe?
Если вы изучили базовый курс до текущего момента, вы уже поняли, что UX — это айсберг: та часть, которую мы видим, — лишь небольшая доля существующей проблемы.
Прежде чем начать, прочитайте, что не является Wireframe. Ну просто на случай, если вы (или ваша команда) совершаете один из непростительных поступков.
Общее представление:
Wireframe — это технический документ, как, например, представленный выше (но не обязательно такой же “симпатичный”). Линии, блоки, подписи. Возможно, пара цветовых акцентов. И все!
Wireframe часто сравнивают со строительным проектом-светокопией, потому что у них похожее назначение.
Проект подсказывает строителям, как выполнить замысел архитектора. В нем не указывается, какие выбрать обои или мебель. Проект воспринимают серьезно. Про него никогда не скажут, что это просто предложение по строительству, или грубый черновик, или быстрый скетч.
Все эти наброски, выполненные на доске во время мозговых штурмов, конечно же, важны, но это не wireframe-ы. Это мысли и идеи для wireframe-ов, которые будут созданы позднее.
Иногда рисование wireframe-а занимает лишь час, а вот его планирование происходит неделями. Важно, чтобы ваши коллеги и клиенты это понимали.
Если UI-разработчик или UI-дизайнер не может использовать ваш “wireframe”, то это просто скетч, а не wireframe. Продолжайте работу.
Может показаться, что урок какой-то неполный. Тем не менее, мне бы хотелось закончить. Следующие 12 уроков (почти половина этого курса) улучшат ваши навыки разработки wireframe-ов, помогая вам создать дизайн, который не просто хорошо выглядит, а хорошо работает.
Завтра мы пройдем первый из пяти уроков, посвященных тому, как заставить людей смотреть в нужные нам места:
Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Мобильное приложение «Заметки о психике» | Mental Notes
Полезный инструмент для встряхивания мозгов. Подкидывает идей как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Руководство по вайрфреймам для начинающих
Russian (Pусский) translation by Ola Matona (you can also view the original English article)
Создание вайрфреймов является важным шагом любого дизайн-процесса. Главным образом вайрфреймы задают иерархию информации в вашем дизайне. Они помогают определить место элементов в макете в зависимости от того, как мы бы хотели, чтобы пользователи воспринимали информацию. Если вы еще не используете вайрфреймы, самое время попробовать.
Если посмотреть еще глубже, то вайрфреймы также очень полезны для того, чтобы определить, как пользователи будут взаимодействовать с интерфейсом. Например, они могут содержать разные состояния кнопок или меню.
Вайрфреймы важны поскольку они позволяют дизайнеру запланировать расположение элементов и взаимодействие с интерфейсом, не отвлекаясь на выбор цвета, шрифта, или даже текста. Я люблю объяснять своим клиентам, что если пользователь не может понять, что делать на черно-белом вайрфрейме, то цвет тоже вряд ли поможет. Кнопка должна быть заметна даже без блеска и яркой раскраски.
Так и с фундаментом здания, он должен, в первую очередь, быть крепким, прежде чем вы решите, в какой дорогой оттенок вы его покрасите.
Шаг 1: Вдохновлямся
Прежде чем перейти к деталям, посмотрите сайт Я люблю вайрфреймы (ведь лучше один раз увидеть, чем сто раз услышать). Там вы сможете получить общее представление и наглядные примеры того, как другие дизайнеры делают вайрфреймы.
Вы можете также попробовать эту маленькую браузерную программку, Wirify, которая позволяет «завайрфреймить» любой сайт.
Если вы будете регулярно обращать внимание на то, как другие дизайнеры или сайты делают свои вайрфреймы, со временем у вас сформируется представление о том, как именно вайрфреймы помогают организовать информацию на экране.
Шаг 2: Планируем
Компания 37signals хорошо известна тем, что пропагандирует использование набросков, от которых переходят сразу к коду. Однако некоторые их дизайнеры, кажется, все же используют дизайн-макеты.
Что касается меня, то я провела немало циклов от дизайна к коду, чтобы выстроить достаточно налаженный процесс. Многие могут не подумать об этом, но я также учитываю и какой html/css фреймфорк будет использоваться в проекте.
Например, я сделала много сайтов при помощи Blueprint, поэтому и в вайрфремах, и в Blueprint я обычно использовала одинаковую сетку из 12 колонок. Это позволяет значительно ускорить прототипирование и разработку, так как вместо того, чтобы прописывать ширину каждого элементы в стилях css, ширина определяется шириной колонок от 1 до 12. Сейчас я использую cssgrid, так как он поддерживает адаптивный дизайн, но это та же сетка из 12 колонок, которую вы можете скачать как фотошоп шаблон.
Как я и писала раньше, только вы решаете, что удобнее для вас. Может вам придется попробовать тот или иной процесс несколько раз, прежде чем решить, что он наиболее эффективный. Некоторым может быть проще делать наброски, и они могут не использовать вообще никаких инструментов для создания вайрфреймов. Другим дизайнерам желательнее делать как можно больше небольших шагов, чтобы свести к минимуму отклонения или дать возможность продумать каждую итерацию на той стадии, когда дизайн только приобретает свои очертания.
Так или иначе, вы выработаете свой собственный процесс, но в рамках этого руководства как пример, я буду использовать свой обычный процесс (на схеме: Вайрфрейм (Illustrator) > высокоуровневый вайрфрейм (Illustrator) > дизайн-макет (Photoshop) > код (с использованием cssgrid))
Я использую Illustrator для создания вайрфремов по большей части в силу трех причин:
Правда, в зависимости от проекта, я могу использовать и другие инструменты. В следующем разделе я кратко перечислю некоторые популярные инструменты, их плюсы и минусы.
Шаг 3: Выбираем инструмент
Вот некоторые из популярных инструментов в произвольном порядке:
Balsamiq
Balsamiq стал популярным, так как вайрфремы, сделанные с его помощью, напоминают наброски. И это сразу дает понять, что вайрфрейм не является финальным продуктом, а находится в стадии разработки. В Balsamiq также есть огромная библиотека готовых элементов, которые можно легко перетаскивать для создания своих вайрфремов.
Он работает практически на любой платформе: Mac, Windows и Linux, также существует веб версия, если вы предпочитаете работать в облаке. Сторонние приложения, такие как iMockups для iOS, например, также поддерживают экспортные форматы Balsamiq.
Omnigraffle
Поскольку приложение Omnigraffle разрабатывалось специально для создания схем, у него есть продвинутые функции, как, например, автоматическое размещение, настраиваемые стили объектов, умные направляющие и инструменты для диаграмм. Некоторые из этих функций доступны и в пакете Adobe CS, но если его у вас нет, то Omnigraffle предлагает неплохую цену (
$100) за возможность создавать детальные вайрфремы.
Axure
Axure был одним из первых профессиональных инструментов для создания вайрфремов/прототипов, так что он почти как дедушка для всех них. До недавнего времени он был доступен только для Windows. Большого опыта его использования у меня нет, но он считается широко применяемым инструментом среди профессионалов.
Flairbuilder
Новичок Flairbuilder очень хорошо работает с взаимодействиями.
У него также есть огромная библиотека элементов, поддержка шаблонов страниц и возможность экспорта прототипа для просмотра его онлайн.
Онлайн приложения
Если десктопные приложения вам не по нраву, то есть такие инструменты как mockflow, hotgloo и mockingbird.
Keynote/Powerpoint
Keynotopia «превращает ваш любимый инструмент для презентаций в лучший инструмент для быстрого прототипирования макетов для мобильных, веб и настольных приложений». Если вы не пользуетесь mac, не страшно. Keynotopia работает и с шаблонами powerpoint.
Я особенно рекомендую его использовать, если вам надо быстро сделать вайрфрейм или прототип для мобильного приложения. Другой хорошей альтернативой может быть Keynote Kungfu.
Adobe CS
Для тех, кто уже знаком с пакетом Adobe, Fireworks, Illustrator и Indesign вполне могут служить инструментами для создания вайрфреймов с учетом их определенных плюсов и минусов.
Fireworks
С помощью Fireworks можно выполнить весь дизайн-процесс, от простого вайрфрема до визуализации. Fireworks поддерживает шаблоны страниц (многократно используемые шаблоны, изменения в которых применяются на всех дочерних страницах по данному шаблону), библиотеку элементов, и вы также можете достаточно быстро делать интерактивные прототипы.
Illustrator
Это один из моих любимых инструментов, так как я его уже очень хорошо знаю и уверена, что и многие здешние дизайнеры его знают. Я использую Illustrator для быстрого создания сложных вайрфреймов, которым не нужна интерактивность.
В чем он выигрывает? В возможности экспорта в PSD редактируемых слоев, отличной поддержке копирования/вставки в Photoshop, а также в возможностях верстки текста, которые можно сохранять, изменять и многократно использовать, почти как в CSS.
Indesign
Схожие с Illustrator плюсы, но еще лучшая поддержка возможностей верстки текста, работы с шаблонами страниц и недавно добавленная функция создания интерактивных прототипов.
Я выбираю Indesign, когда мне надо сделать интерактивный многостраничный прототип высокой точности. Единственным «но» для меня является слабая поддержка экспорта в Photoshop для последующего создания дизайн-макетов.
ProtoShare
Шаг 4: Настраиваем сетку
Существует много теории о системе сеток, но, не вдаваясь в детали, я определю сетку как «структурированное и простое расположение элементов».
Я использую Illustrator в этом руководстве, но эти же шаги могут быть выполнены и в любом другом инструменте.
Сначала задайте размер документа. Я задала размер 1280 x 900, так как я буду использовать cssgrid, который позволит легко изменять размер экрана от мобильного до максимум 1140 пикселей.
Вставьте загруженный из cssgrid шаблон в свой документ.
Совет:
Существует много шаблонов сеток, но если вы хотите настроить свой собственный шаблон, попробуйте responsify.it.
Шаг 5: Задаем расположение элементов при помощи блоков
Иногда вы можете проявить креативность в расположении элементов, в зависимости от ваших целей и типа организации, для которой вы делаете дизайн. Однако стоит всегда держать в уме информационную иерахию. Ниже реальный пример для одного из моих клиентов, в котором я отошла от принятого многими технологическими компаниями подхода к расположению элементов:
А это пример расположения элементов для блога, в котором задано точное расположение блоков для рекламы с конкретными инструкциями для клиента:
Шаг 6: Задаем информационную иерархию при помощи типографики
Когда вас устраивает расположение блоков, приступайте к постепенному наполнению их текстом, чтобы получить представление, хорошо ли структурирована информация. Руководствуйтесь правилом, что информация для вашей аудитории должна быть понятна даже на черно-белом вайрфрейме.
Используйте разный размер шрифта, чтобы начать выделять разные виды информации.
Смело экспериментируйте на этой стадии. Иногда, добавив больше деталей, вы можете увидеть, что данное расположение элементов не совсем подходит. В этом и состоит цель вайрфреймов: сделать как можно больше итераций, чтобы найти наилучшие способы представления информации, которую необходимо донести.
В примере, который ниже, я хотела, чтобы скриншоты стали заметнее, и также начала использовать черные блоки для тех областей, на которых будет делаться визуальный акцент:
Шаг 7: Уточняем полутонами
Разные градации серого помогают задать больший или меньший акцент на элементах без использования цвета. На самом деле, полутона пригодятся и во время создания дизайна-макета.
Шаг 8: Высокоуровневый вайрфрейм
Этот шаг необязателен, но если вы предпочитаете идти шаг за шагом, вы можете попробовать и его. Высокоуровневый вайрфрейм просто предполагает добавление большего количества деталей, но без подробных визуальных деталей. Это может быть использование реального текста в вайрфрейме и попытка задать реальные размеры шрифта:
Это может быть и использование цвета:
Смысл в том, что на стадии графического дизайна/кодирования вы будете уже наводить красоту, а не пробовать и экспериментировать. Лучше быстро делать циклы с итерациями (обратная связь вайрфрейм) в удобных для вас инструментах для создания вайрфремов, чем двигать слои и пиксели в Photoshop.
C учетом вышесказанного, бывают случаи, когда лучше пропустить детали и перейти сразу к интерактивному прототипированию (как делают в 37signals). Причиной тому служит то, что некоторые детали взаимодействия нельзя полностью отразить на плоском изображении.
Если вы работаете с командой разработчиков, то вы можете передать им одобренные вайрфреймы для создания ими базового фреймворка, в то время пока вы будете работать над дизайн-макетом.
Шаг 9: Превращаем вайрфрейм в дизайн-макет
Вот пример вайрфрейма, который стал дизайн-макетом. Основа вайрфрема по большей части осталась нетронутой, но появились графические правки. Вы можете также посмотреть этот сайт онлайн:
Выводы
Вот и конец этого руководства. Надеюсь, оно вдохновило вас на эксперименты! Как и с любым дизайн-процессом, не бойтесь делать итерацию, за итерацией, за итерацией.
Также потратьте время на то, чтобы попробовать разные инструменты и процессы. Это время стоит того, чтобы найти то приложение, которое будет для вас наиболее наиболее понятным.
Задавайте любые вопросы в комментариях, и спасибо за то, что прочитали!
Дополнительные ресурсы
Эти ресурсы могут быть также полезны, если вы хотите получить больше информации о вайрфреймах,