Что такое варфрейм в дизайне
Как не запутаться при общении с веб-дизайнером
разбираем разницу между прототипами, макетами и вайрфреймами
Андрей Батурин
В веб-дизайне есть много профессиональных терминов, но особую путаницу у заказчиков и даже разработчиков, не знакомых с дизайном, вызывают понятия вайрфрейм, мокап и прототип. Нередко считают, что это одно и то же, и из-за этого при общении с дизайнером возникает недопонимание. Чтобы вы могли избежать такого недопонимания в будущем, мы подробно разберем особенности каждого из этих понятий.
И прототип, и варфрейм, и мокап — это все финальные варианты будущего сайта. Но в чем же тогда их отличие? В том, что они показывают проект с разных сторон. Сейчас расскажем подробнее.
Мокап
Мокап (mockup) — это в дословном переводе “макет”. Представляет собой не сильно детализированный набросок дизайна.
Вот его основные характеристики:
Мокап используют, когда нужно быстро согласовать с заказчиком визуальную часть будущего сайта, так как создать мокап можно относительно быстро. Также он помогает получить фидбек заказчика и его пожелания по дизайну.
Вайрфрейм
Вайрфрейм (от англ. Wireframe) — это, по сути, тот же мокап, только в черно-белом виде и с упором не на визуальную составляющую, а на структуру и содержание. Его создают на начальном этапе работы над проектом, чтобы составить общую картину будущего проекта.
Если проводить аналогию, то вайрфрейм можно назвать детализированной картой города, где указаны все улицы, заведения, схемы движения. Но эта карта черно-белая и без иллюстраций. Она нужна, чтобы человек мог подробно разобрать структуру города, но она не подходит, чтобы он мог насладиться его красотой.
Главный принцип здесь — упрощенность. Не нужно зацикливаться на визуальных деталях и отрисовывать каждую кнопку и иконку (как это, например, делают в мокапе). Лучше сосредоточиться на деталях структуры и расположения элементов.
Разработка варфрейма — ключевой этап создания дизайна, так как от него затем отталкиваются и другие участники процесса: разработчики, SEO-шники, копирайтеры и т.д. Wireframe плохо подходит для этапа тестирования, однако очень полезен как инструкция для разработчиков.
Прототипы
Прототип — это, если упрощать, сверстанная версия мокапа. То есть, мокап, на который наложили функционал сайта, и в котором пользователь уже может покликать кнопки и выполнить некоторые действия, чтобы посмотреть, как все работает.
Разработка прототипа — затратный процесс в плане ресурсов: он отнимает много времени у дизайнеров и верстальщиков. Однако это отличная возможность протестировать удобство сайта, в том числе, еще до начала программирования, чтобы довести до ума логику интерфейса и пользовательский путь.
Какую форму дизайна использовать в работе
Не обязательно при работе над одним проектом разрабатывать поочередно вайрфреймы, мокапы, а затем и прототипы. В некоторых случаях можно обойтись и одним-двумя форматами.
Выбор зависит от следующих условий:
Учитывая эти условия, вы можете выбрать для себя оптимальный вариант взаимодействия с заказчиками и членами команды при разработке дизайна.
— Обобщая, можно сделать вывод, что вайрфрейм — это черно-белое отображение структуры сайта; мокап — это визуализация дизайна сайта, а прототип — это рабочий вариант сайта для тестирования функционала.
Закажите дизайн сайта в нашей студии
Вайрфреймы, прототипы и мокапы – в чем разница?
От редактора: несмотря на обширное использование слова «мокап» в англоязычной литературе и блогосфере, я предлагаю использовать более понятное и подходящее слово «макет» (или «дизайн-макет»).
Несколько лет назад я понял, что большинство моих друзей IT-шников, не дизайнеров называли результаты своей деятельности синонимичными понятиями. Они предполагают, что вайрфрейм, прототип и мокап — это одно и то же, выполненный из сероватых блоков набросок конкретной идеи.
Проблема такого упрощенного видения заключается в том, что они никогда не могут предвосхитить, чего ожидать от работы специалиста из области UX-дизайна, и легко могут запутаться. «По какой причине эта область не кликабельна?», «Я даже не понял, что мне нужно кликать мышкой именно тут», — такого рода комментарии раздражающе часто встречаются среди UX дизайн-проектов (User Experience Design — целью которого является дизайн взаимодействия с пользователем). Смешивания двух понятий — вайрфрейма и прототипа, – это все равно, что приравнивание архитектурного проекта (детализированный план будущего здания) и демонстрационного здания (который иногда строится без фронтальных стен).
Хотя вы, конечно, можете попробовать жить в таком здании (понимая, что вся его красота будет заключаться в прекрасном виде на великолепные рядом стоящие здания), но вам не удастся поселиться с комфортом на его наброске, который представляет собой лишь листок бумаги.
Демонстрационное здание и план дома – это различные способы коммуникации в архитектуре:
Аналогичное разделение может быть применено к вайрфреймам, прототипам и мокапам. Они выглядят по-разному, они передают информацию разного рода и служат разным целям.
Однако демонстрационное здание и план дома имеют нечто общее – они оба представляют финальный продукт, т.е. настоящий дом. И опять же именно такая же аналогия может быть применена для сравнения вайрфрэймов, прототипов и мокапов – все эти документы являются разными формами представления финального продукта.
Хотите верьте, хотите нет, но различия между прототипами, вайрфрэймами и мокапами – это первое, чему я старался обучить членов моей UX-команды.
Да, это действительно важно.
Давайте рассмотрим в деталях, что такое вайрфреймы, прототипы и мокапы, чтобы вы поняли идею, что используется в конкретных ситуациях.
Вайрфреймы (Wireframes)
1. Что такое вайрфрейм?
Вайрфрейм – это образ дизайна низкой точности. Он должен четко показывать:
Вайрфреймы не бессмысленный набор серых блоков, хотя он выглядит примерно так. Рассматривайте его как скелет вашего дизайна и помните, что вайрфреймы должны изображать каждую деталь финального продукта.
«Изображение» — здесь это ключевой термин, который поможет вам найти требуемую точность, удобный темп. Вы не можете показать слишком много деталей, но, с другой стороны, вы должны создать точный образ финального дизайн-продукта, не упускающего ни одной его важной детали. Вы прокладываете тропинку для целого проекта и людей, которые работают вместе с вами (разработчики, графические дизайнеры, копирайтеры, менеджеры проекта – им всем нужен хорошо сделанный вайрфрейм). По сути, вы создаете карту города. Каждая улица представлена на карте, но ее визуальное изображение упрощено. Вы можете прочувствовать архитектуру города, если посмотрите на карту, но не сможете воспринять его красоту.
Вайрфреймы нужно делать быстро и почти все остальное время тратить на общение с членами команды и … размышления. Среднее время на создание вайрфрэймов должно быть реально ограничено.
Визуализация должна быть построена по правилам эстетики, но сильно упрощена. Черный, серый и белый – это типичные цвета, которые вам понадобятся (разве что вы можете добавить синего в конкретные ссылки).
Если что-либо занимает слишком много времени на подготовку (например, выбор иконок, загрузка изображений), вы должны представить его в упрощенном виде (например, используя «заполнители» — прямоугольники, пересеченные линиями крест на крест для изображений, плюс подобающее описание). Мы обычно называем вайрфреймы данными низкой точности (lo-fi).
Запомните, хорошо созданный вайрфрейм изображает дизайн предельно точным образом и прокладывает дорогу для всей команды.
2. Когда использовать вайрфрэймы.
Вайрфреймы обычно используются как документация к проекту. Поскольку они являются статичным и фиксированным способом отображения интерфейса, их нужно соответствующе описать (от краткого пояснения, до сложной технической документации, если это необходимо).
Однако они могут быть использованы не по столь формальному назначению. Так как они удобны и просты в использовании, они полезны как быстрые наброски для внутренней коммуникации в команде. Если девелоперы спрашивают, как что-то должно быть выполнено, ответ можно представить как быстро выполненный вайрфрейм.
Имейте в виду следующее: UXpin – это старт-апы с реально быстрыми циклами разработки (выпуск каждые пару дней). Мы используем вайрфреймы для быстрой визуализации заданий (даже самых небольших!). Это уничтожает всякое недопонимание и это очень дешево.
Вайрфреймы редко используются как материал для тестирования, хотя они могут помочь получить обратную связь на начальном этапе исследования, в котором вы еще не заботитесь о методологической бедности воплощения, но уже пытаетесь получить быстрые результаты.
Вайрфреймы в контексте целостного дизайн-процесса могут быть удивительно эффективны и, не смотря на то, что за последние несколько лет они получили несколько негативных отзывов, по-прежнему незаменимы на начальных этапах комплексных проектов.
Прототипы
1. Что такое прототипы?
Прототип, который часто путается с вайрфреймом, — это середина на пути к высококачественному изображению финального продукта, стимулирующего взаимодействие с пользовательским интерфейсом.
Они должны позволить пользователю:
Прототип – это симуляция финального взаимодействия между пользователем и интерфейсом. Он может выглядеть не совсем так, как будет выглядеть финальный продукт, но очень похоже на него (определенно не сероватый набросок). Взаимодействия должны быть точно смоделированы и иметь значительное сходство с финальным опытом. Независимость между интерфейсом и механикой бэкенда обычно упускается для снижения затрат и ускорения цикла разработки.
2. Когда использовать прототип.
Прототипы используются в полной мере в тестировании пользователей. Такие симуляции финального взаимодействия формируют основу для качественных юзабилити-тестов еще до того, как начинается разработка.
Прототипы обычно не являются лучшей документацией, которую вы можете представить, поскольку они требуют он «читателя» некоторых усилий, чтобы понять интерфейс. С другой стороны, прототипы это наиболее привлекательная форма дизайн документации, так как интерфейс отчетливый, и простой.
Имейте в виду, что прототипирование достаточно дорогая и время-затратная форма дизайн коммуникации. Я бы предположил создание прототипов, которые могут быть использованы повторно в дальнейших разработках (это значит, что вы должны уметь писать HTML, CSS и, возможно, JS-код). Это особенно эффективно в относительно простых проектах.
Выполненные правильно, в сочетании с тестированием пользовательского интерфейса, прототипы могут показать себя с выгодной стороны.
Мокап
1. Что такое мокап?
Мокап – это середина на пути к высоко-точному, статичному дизайн-образу. Часто мокапы – это графические наброски или даже актуальный графический дизайн.
Хорошо сделанный мокап:
Мокапы часто путают с вайрфреймами из-за названий некоторых компаний, производящих программное обеспечение (видимо, речь идет о сервисах, подобных moqups.com — прим. ред.).
2. Когда использовать мокап.
Мокапы особенно полезны, если вы хотите добиться быстрого утверждения у стейкхолдера. Благодаря их визуальной натуре мокапам не сопротивляются из-за низкой точности исполнения и вместе с тем их гораздо быстрее создать, чем прототипы. Они хорошо подходят для получения обратной связи, и в контексте целого дизайн-проекта помогут в формировании большой главы финальной документации.
Резюме
Как начать?
Прежде чем вы выберите средство коммуникации в дизайн-процессе, вам нужно:
Это минимум. Теперь подумайте, какое решение будет наиболее подходящим в вашем случае, принимая во внимание ваш продукт и команду. Какое будет наилучшим для вас? Формализованная документация или быстрый набросок и дискуссия лицом к лицу? Достаточно ли у вас времени и денег для сложных изысканий в области пользовательского опыта или вы лишь собираетесь в ближайшее кафе с несколькими набросками для потенциальных клиентов?
Какие навыки у вас есть? Умеете ли писать код? Оценивая себя, членов команды и проект, вы должны понять, какое решение будет правильным.
Вы, конечно, можете создать все эти варианты и … во многих случаях вы так и сделаете! Не бойтесь делать этот шаг. Все они имеют значение и, выполненные хорошо, приблизят вас к потрясающему дизайну.
Что такое вайрфреймы и как их использовать в дизайне интерфейсов
В работе дизайнера есть много профессиональных терминов: мокапы, дизайн-макеты, прототипы, кернинг и другие слова. Каждый специалист графики должен знать, что кроется за этими понятиями.
В этой статье мы разберёмся с англоязычным словом wireframe, которое пришло в русскоязычную среду давно, но широкого распространения не получило.
Общие понятия
Вайрфрейм — концепция создания структуры дизайна интерфейса. В переводе с английского языка означает каркас. В Рунете его называют более знакомым словом «прототип».
Представьте, что есть задача построить двухэтажный дом. Wireframe — план здания, который отражает архитектуру. На этом этапе мы не знаем, будет он построен из красного кирпича или блоков.
Если переместиться в плоскость веб-дизайна, вайрфрейм показывает, как элементы будут размещены на макете. Где находится личный кабинет пользователя, лента новостей, форма поиска и другие компоненты.
Концепция повсеместно используется зарубежными дизайнерами. В СНГ пространстве сначала проходит обсуждение технического задания с клиентом, а затем специалист приступает к работе. Вместо wireframe он создаёт дизайн-макет во всех красках.
Может показаться, что инструмент сильно замедлит работу, но это не так. Дополнительная схема размещения контента поможет избежать проблем. После отправки на утверждение заказчику появится одобренная структура. Останется последний шаг — добавить визуальные элементы, продумать интерактивное взаимодействие и создать полноценный UI.
Классический вайрфрейм — минималистичная схема, состоящая из чёрных, серых или белых блоков. В неё можно вставлять символы и фигуры. Вместо изображений добавляются плейсхолдеры.
На картинке ниже отображен принцип работы «каркаса». Сначала создали схему, а потом превратили её в интерфейс. Исходный набор элементов не изменился. Если вернуться к примеру с постройкой дома, мы просто добавили в помещение обои, ламинат и мебель.
Визуальный прототип определяет, каким будет интерфейс и помогает проверить целостность. Вайрфрейм — не просто минималистичный шаблон, который на один шаг отодвигает от готового UI. Это «скелет», который держит на себе остальные части тела. Если дизайнер пропускает этап создания wireframe, он добавляет себе лишнюю работу.
Хоть вайфрейм и считается образом с низкой точностью, он чётко показывает:
На разработку не надо тратить несколько дней. Если подключить к работе функциональные инструменты проектирования, скорость выполнения задачи увеличивается многократно. Временные затраты зависят от сложности интерфейса и сценариев взаимодействия. Логично, что wireframe для трех страничного сайта можно создать за несколько часов, а приложение для чтения новостей за этот срок спроектировать не получится.
При разработке используйте метод упрощения. Если на оформление блока контента или формы авторизации уходит много сил, сделайте их более простыми. Суть использования инструмента как раз и заключается в этом подходе. Для дизайна проекта о защите окружающей среды не нужны детализированные изображения пейзажей. Хватит стандартных плейсхолдеров.
Когда пригодится каркас
Мы уже разобрались, что главная цель использования вайрфрейма — создать «скелет» и определить возможности продукта. Он содержит кнопки, формы, виджеты и другие элементы, но не показывает их готовый вид.
Каждый специалист сам выбирает рабочие инструменты и планирует время, но надо запомнить важную особенность. Wireframe входит в документацию к проекту, которая закрепляет образ на бумаге. Она помогает быстро перейти от чернового варианта к готовому интерфейсу и защищает интересы дизайнера в спорах с заказчиком. Если клиент в последний момент решит отказаться от важных блоков, можно показать ему утвержденный образец и аргументировать отказ.
Визуальная схема полезна не только дизайнерам и заказчикам. После воплощения графической концепции макет переходит к программистам. Дальше они должны сделать из него готовый веб-продукт. Wireframe можно использовать как карту. Верстальщик возьмёт из неё размеры и с помощью кода создаст основные блоки. Он может действовать так же, как и дизайнер. Сначала внедрить базовые элементы без мультимедийного контента и анимации, а потом заняться декорациями.
Вайрфреймы не решают задачу тестирования на фокус-группах. Они помогут собрать лишь первичную обратную связь. Опыт пользователей привязан к осязаемому объекту — приложению или сайту. Черно-белая картинка не отражает философию и эмоции готового продукта. Инструмент незаменим на начальных этапах проектирования интерфейса, когда уже есть базовое понимание.
Многие дизайнеры не хотят тратить время на ещё один вариант проекта и стремятся побыстрее подогнать макет под требования заказчика. За этим следует длительный процесс обсуждения и правок. Специалистам кажется, что время, потраченное на создание чёрно-белой копии можно было потратить более эффективно. В этом есть здравый смысл. Если клиент принял дизайн-макет с первого раза, проблем не будет. Хотя такое развитие событий происходит далеко не всегда.
Аргументы в пользу прототипа:
5 шагов на пути к созданию эффективного вайрфрейма
Нет сомнений в полезности инструмента, осталось разобраться, как правильно с ним работать.
Есть несколько способов создать wireframe. Кто-то рисует их от руки, другие предпочитают онлайн-инструменты. В этом вопросе единых правил нет. Есть лишь рекомендации, которые сильно упростят задачу и помогут быстро освоить новые возможности.
Выслушайте клиента
Любое проектирование начинается с процесса обсуждения. Подготовленность заказчика зависит от его подхода к работе. Не все делают подробное техническое задание с описанием фирменного стиля, цветовой схемы и других особенностей. Иногда у клиента есть только общие требования без чёткого понимания, каким будет графический продукт.
Поговорите с заказчиком, запишите все пожелания, спросите про удачные примеры в нише и обсудите допустимые границы.
Соберите информацию воедино
После того, как требования и рекомендации определены, сделайте из этого базовую концепцию. Проанализируйте решения конкурентов, выделите сильные и слабые стороны, выберите, какие элементы добавите в будущий макет.
На этом этапе надо правильно расставить приоритеты. Дизайнерам с хорошей фантазией не трудно представить, как будет выглядеть интерфейс без красок. Некоторые думают исключительно о конечном результате. Проектирование UI можно представить как спираль. Каждый виток зависит от общей структуры, но при этом является самостоятельным элементом. Точно также wireframe решает определённые задачи и на шаг приближает к формированию готовой структуры.
Не беспокойтесь о красоте наброска. Для оформления используйте блоки, фигуры и символы, но необязательно делать это с идеальной точностью.
Выберите рабочий инструмент
Для этих целей можно выбрать любой из существующих онлайн-редакторов или десктопные программы. Легко обойтись без установки специализированных приложений вроде Illustrator или Photoshop.
Варианты:
Облачные платформы серьезно экономят время. Их надо сделать частью рабочего процесса даже если дизайнер 10 лет изучал фотошоп и может быстро нарисовать от руки любой элемент.
Остаётся главный вопрос — надо ли тратить деньги или лучше сэкономить. На выбор влияет множество факторов: от количества проектов в месяц до уровня дохода специалиста. У того же MockFlow есть бесплатный тариф с ограниченными возможностями. Новичкам этого будет достаточно.
Создайте структуру
После согласования нюансов и сбора полезной информации переходим к самому важному шагу — разработке схемы. Важно помнить, что вайрфрейм является бесцветной концепцией. Его можно использовать для описания свойств объектов, но нельзя зацикливаться только на чёрно-белом варианте интерфейса.
Идеальная цепочка при создании UI выглядит так: набросок — wireframe — макет — вёрстка. Некоторые дизайнеры расширяют набор компонентов, и кроме обычного вайрфрейма разрабатывают схему более высокого уровня с картинками и анимацией.
Время создания зависит от масштаба проекта, навыков дизайнера и рабочих инструментов. Некоторым хватит несколько часов в Illustrator, другие потратят целый день в онлайн-редакторах.
Для облегчения задачи используйте сетки, направляющие и мощь специализированных платформ. Можно измерять расстояние от элементов с помощью линейки в Photoshop, но это неэффективно. Рутинные действия нужно автоматизировать.
Тестирование
Графический инструмент хоть и относится к инструментам небольшой точности, играет большую роль. После разработки структуры надо получить обратную связь от клиента, членов команды и независимых пользователей. В список обязательно должны входить представители целевой аудитории. Если будущий продукт рассчитан на врачей, они и должны оценивать его.
Соберите комментарии, проанализируйте их и сфокусируйтесь на замечаниях, которые встречаются чаще всего. Взгляд со стороны помогает находить слабые места и удалять их на этапе проектирования.
Преимущества и недостатки
Сам по себе wireframe — всего лишь инструмент. В умелых руках он может сэкономить время и дать чёткое понимание того, как будет выглядеть user interface. Для новичков он поначалу будет выглядеть как очередной фактор, который затягивает разработку.
Преимущества вайрфреймов:
Недостатки:
Новички в мире веб-дизайна думают, что секрет успешного UI заключается в красивых иконках, уникальном фирменном стиле и нестандартной анимации. На самом деле результат зависит от умения специалиста чувствовать потребности целевой аудитории продукта и способности контактировать с заказчиком.
Главная задача любого интерфейса — решать проблемы. Можно потратить несколько недель на красивый дизайн в стиле Material, но пользователям будет трудно выполнить определённые действия. Именно поэтому надо использовать полезные решения вроде wireframe. Они показывают, в каком направлении надо развиваться и помогают добраться до пункта назначения.
Веб-студия IDBI воплотит в жизнь любую креативную идею. Наши специалисты учтут пожелания, разработают набросок, а после и готовый макет. Затем в работу включатся программисты, которые превратят картинку в приложение или сайт.
Руководство по вайрфреймам для начинающих
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: Превращаем вайрфрейм в дизайн-макет
Вот пример вайрфрейма, который стал дизайн-макетом. Основа вайрфрема по большей части осталась нетронутой, но появились графические правки. Вы можете также посмотреть этот сайт онлайн:
Выводы
Вот и конец этого руководства. Надеюсь, оно вдохновило вас на эксперименты! Как и с любым дизайн-процессом, не бойтесь делать итерацию, за итерацией, за итерацией.
Также потратьте время на то, чтобы попробовать разные инструменты и процессы. Это время стоит того, чтобы найти то приложение, которое будет для вас наиболее наиболее понятным.
Задавайте любые вопросы в комментариях, и спасибо за то, что прочитали!
Дополнительные ресурсы
Эти ресурсы могут быть также полезны, если вы хотите получить больше информации о вайрфреймах,