Prototype программа что это

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

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

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

Оглавление

• Зачем нужен прототип
• Виды прототипов
• Как сделать прототип сайта
• Рекомендации по созданию прототипов
• Частые вопросы о прототипах
• 40+ сервисов и программ для создания прототипов

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

Проектирование сайта равносильно составлению очень подробного технического задания и включает в себя:

Прототип сайта (примеры). Что такое прототипирование сайта.

1. Постановку целей и задач;
2. Исследование контекста;
3. Создание концепции;
4. Моделирование;
5. Согласование.

Мокап или, как его иногда называют, макет — отражает набросок предварительного дизайна. Чтобы не путать с дизайн-макетом рекомендуем использовать термин мокап. В иностранном лексиконе часто относится к этапам Low Fidelity Design (дословно — дизайн низкого разрешения).

Пример мокапа или макета сайта (Low Fidelity Design)

Вайрфрейм — тот же мокап в черно-белом виде с упором на состав секции. То есть это детализированный мокап из High Fidelity Design (дословно — дизайн высокого разрешения).

Пример wireframe — мокап с повышенной детализацией (High Fidelity Design)

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

Пример прототипа сайта

Зачем нужен прототип

Хороший прототип помогает заказчику сэкономить деньги, команде — визуализировать идеи и объяснить логику взаимодействия пользователя с продуктом. Грамотно проработанный прототип позволяет:

● Визуализировать и проверить гипотезы;
● Построить полноценную логику и структуру сайта;
● Оценить точные сроки и бюджет работ;
● Быстро вносить корректировки и правки;
● Минимизировать затраты и количество правок.

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

Преимущества прототипа для заказчика

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

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

Задачи прототипа для команды разработчиков или фрилансера

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

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

Виды прототипов

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

Прототипы для проработки логики сайта

В нашей студии для проработки логики и структуры сайта создаются следующие виды прототипов:

Прототип структуры с минимальной проработкой

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

Проработка структуры сайта и навигации между разделами для оценки стоимости и объема работ

Функциональный прототип

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

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

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

Скетчинг: прототип для команды или наброски гипотез

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

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

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

Пример скетчинга для наброска гипотез

Виды прототипов по степени детализации

По детализации прототипы делятся на:

● Прототипы с низкой детализацией (мокап);

● Прототипы с высокой детализацией (wireframe).

Слева — мокап с низкой детализацией, в центре и справа — wireframe с высокой детализацией.

Виды прототипов по возможности взаимодействия

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

Статичный (графический) прототип

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

Пример статичного прототипа с высокой детализацией

Интерактивный прототип

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

Пример интерактивного прототипа

Прототипы по месту хранения

В зависимости от носителя прототипы делятся на:

Аналоговые

Статичные прототипы в виде графического рисунка или изображения.

Цифровые

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

Облачные

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

Как сделать прототип сайта

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

Общая последовательность реализации прототипа:

● Проведение интервью — подробный брифинг;
● Агрегация требований — аналитика, исследования, цели и задачи проекта;
● Составление функционального прототипа;
● Подготовка скетчей / мокапа;
● Составление варфрейма;
● Разработка прототипа с финальным текстом;
● Передача прототипа в отдел дизайна с техническим заданием UI-дизайнеру.

Разберемся детальнее, как проходит работа над прототипом.

Постановка целей

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

● Повышение престижа бренда, узнаваемости;
● Рассказ о событии, истории;
● Подготовка к участию в конкурсе, тендере;
● Демонстрация продукта в действии, рассказ о технологии;
● Ведение отчетности, справка, информирование и привлечение инвесторов;
● Научная / просветительская цель;
● Агрегация, арбитраж трафика;
● Продвижение бренда в интернете (контекст / SEO);
● Поиск точек роста, развития бренда, тестирование гипотез;
● Редизайн проекта для одной из целей из этого списка;
● Расширение функционала сайта для повышения удобства, конверсии;

Можно привести ещё десяток целей, главное в этом всём понимать — для чего вообще создаём сайт компании. Всё дальнейшее будет зависеть от этой задачи. Зайдя на информационный сайт NASA или Брэнсона (компании Virgin Galactic) вы не найдёте конверсии, там не торгуют спутниками, у этих проектов другая цель =)

После чёткой постановки целей и задач проекта, переходите к следующему шагу.

Формирование гипотез

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

● Предполагаем, что разработка ЛК с сохранением данных пользователей и историей заказов повысит лояльность аудитории и % повторной конверсии; Однако это увеличит стоимость разработки и сильно замедлит производство проекта. Для быстрого старта можем это решение сдвинуть на вторую волну работ по проекту;

● Для повышения престижа и доверия к строительной компании можем на сайт разместить крупные рендеры объектов в высоком качестве или даже 3D-тур; Необходимо запросить информацию у заказчика или предложить услуги;

● Видеоролик с описанием и демонстрацией мега-пупер-вау технологии в данном продукте позволит пользователю реально оценить «качественное качество» продукта. Давайте, вместо того чтобы, как все 100 500 конкурентов, написать в карточку товара бронированного стекла на айфон мега характеристику «Extra Powerful Hardcore Hard-Wearing Glass with Soft-Touch Technology» снимем ролик как по айфону с этим стеклом едет танк. Телефон размочило, а стекло осталось живо. Это однозначно увеличит конверсию в покупку и наглядно покажет всю навороченность продукта;

● Так как мы известны на рынке и не первый год продаём страховки ОСАГО, нам нет смысла рассказывать о самом продукте и распинаться по этому поводу. Давайте к чертям снесём лишний километр груза на глаза нашего пользователя и отразим бонусы, которые он получит, заказав страховку у нас, ведь всё, что нам нужно — более выгодные условия;

● На разрабатываемом сайте мемориальной компании больше 30 услуг, видов камня, типов памятников и прочего. Стандартная навигация нужна, но мы можем упростить жизнь пользователю, сократить время поиска нужной страницы и время принятия решения. Давайте продумаем раскрывающееся меню на весь экран с рендером благоустроенного памятника, а при наведении на каждую деталь будет осуществляться переход в нужный раздел. Так мы упростим навигацию, зацепив 90% ключевых товаров и услуг, а значит в разы обойдём конкурентов и поднимем конверсию;

● Разработка функционала для определения размера обуви, а также таблицы соотношения размеров разных стран поможет пользователю определиться с выбором и повысит вероятность покупки;

● Вставка квиза на каждый лендинг услуги в 3−4 вопроса даст повышенный поток целевых заявок на услугу и сократит этап квалификации отделом продаж, наш заказчик ещё и на менеджерах сэкономит;

● Вставка лид-магнита в стиле «Чек-лист по анализу SEO» в каждый из квизов приведёт больше лидов, однако есть минус — некоторые из них окажутся халявщиками. С другой стороны, среди не халявщиков окажутся изучившие материал и ещё более доверительно к нам настроенные заказчики. Надо протестировать решение в течение 2−3 месяцев с контекстной рекламы для однозначного «да».

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

Этим подходом принципиально отличаются дорогие командные агентства от бюджетных или потоковых digital агентств с сайтами до 50к ₽. И как вы понимаете, заказчик здесь платит не только за симпатичный дизайн. С фрилансерами — та же история. Желая зарабатывать на бизнесе миллионы — нужно и вложиться в этот бизнес, а не ждать манны небесной за три копейки и неделю работы. Нельзя надеяться построить виллу на Кайманах, располагая временем и ресурсами на бытовку в Тамбове.

Источник: web-valley.ru

Что такое MVP и чем он отличается от прототипа

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

Что такое прототип

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

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

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

Прототип:

✅ Сразу позволяет оценить или проверить работоспособность идеи.

✅ Легко переделать, если что-то пойдёт не так.

❌ Не получится пользоваться в обычной жизни.

❌ Если задача выйдет за рамки прототипа, то программа сразу выдаст ошибку.

Что такое MVP

MVP — это аббревиатура от английского Minimum Viable Product, что означает «минимально жизнеспособный продукт». Это уже почти полноценная программа, но с ограничениями.

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

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

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

MVP:

✅ Удобный и понятный интерфейс.

✅ Решает основную задачу пользователя.

✅ Не падает с ошибками, если ввести что-то не то.

❌ Разрабатывается дольше и дороже, чем прототип.

❌ Выполняет только базовые действия по сравнению с полноценным приложением.

А можно по-русски?

Вот несколько примеров перевода с айтишного на русский:

Айтишный	Русский
Нашли опенсорсную либу, запилили прототип, окнули у стейкхолдеров и ушли в спринт на MVP.	Мы нашли библиотеку с открытым кодом, которая решала нашу задачу. Проверили её в действии на прототипе и убедились, что она работает. Далее мы согласовали с руководителями разработку минимального продукта, чтобы показать приложение пользователям.
Ментор сказал, что наш MVP больше похож на прототип, а прежде чем выйти на IPO, мы должны допилить кор-продукт, чтобы он стал ярдовой историей.	Наставник раскритиковал качество нашего приложения: по его мнению, в нём не хватает важных пользователю возможностей, без которых приложение не будет интересно. И прежде чем думать о выходе на биржу и продаже акций предприятия, сначала нужно создать такой продукт, который потенциально может привлечь более миллиарда долларов инвестиций.
Начинайте с недорогих MVP и следуйте принципу fail fast.	Выпускайте простые, но рабочие продукты. Если вы видите, что продукт не идёт и вы в чём-то ошиблись — не бойтесь это быстро признать и работать дальше.

Источник: thecode.media

Инструменты для создания прототипов: от макета, собранного на скорую руку, до полнофункциональных прототипов

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

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

Сегодня я перечислил несколько лучших инструментов, существующих в индустрии.

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

InVision поможет вам с любым веб- или мобильным проектом. Не важно для какой операционной системы создается проект – iOS или Android, данный инструмент работает с ними обеими. Также InVision рассчитан на работу в команде. С его помощью можно с легкостью работать над проектом и обмениваться идеями совместно с другими членами вашей команды.

Marvel – это еще один крупный игрок на рынке инструментов по созданию прототипов. Он позволяет вам преобразовать ваши макеты, дизайны и наброски в прототипы мобильных и веб-приложений или даже в прототип приложения для Apple Watch.

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

Moqups – это еще один широко известный инструмент. Но он немного отличается от остальных. Платформа основана на HTML5, она является прекрасным инструментом для создания макетов с масштабируемой векторной графикой (SVG), которые не зависят от разрешения экрана.

Fluid – это инструмент для создания прототипов мобильных приложений. Существует множество обзоров данного онлайн-инструмента, и многие пользователи говорят, что он очень быстро работает, удобен для пользователя и интуитивно понятен.

Prott – это инструмент для быстрого создания прототипов и для совместной работы. Он берет ваши идеи из первых набросков и переносит их в интерактивный прототип, который работает, как настоящее приложение. Также Prott является превосходным инструментом для создания дизайна и взаимодействия с другими членами команды.

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

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

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

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

Framer – еще один известный инструмент. Он может быть использован для создания прототипов для iOS, Android, настольных компьютеров и веба. С использованием Framer вы сможете придумывать взаимодействия и анимацию. Вы можете интегрировать данный инструмент с Photoshop или приложением Sketch.

Если вы хотите быстро создавать прототипы, то Webflow – это не лучшее решение. Однако он предстает во всей красе, когда прототип уже завершен. Вы можете очень быстро сделать из финального прототипа рабочий продукт всего лишь за несколько простых кликов. Также данный инструмент позволяет использовать CMS для ваших прототипов.

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

Justinmind – это один из первых появившихся на рынке инструментов для создания прототипов. Он был создан в 2008 году. За столь продолжительное время команда, создавшая данный инструмент, проделала восхитительную работу. Он очень хорошо работает! Данный инструмент – прекрасный вариант, если вам необходимо создавать веб-сайты, мобильные приложения и другие веб-проекты.

Vectr – это новый игрок на рынке, и он все еще находится в стадии бета-тестирования. При помощи данного инструмента вы можете создавать ваши веб-приложения или приложения для настольного компьютера, использующего операционные системы Mac и Windows. К тому же он абсолютно бесплатен. Все прототипы могут быть выгружены и интегрированы в такие приложения, как Slack.

Инструмент для создания прототипов Principle доступен только для Mac. Он работает в паре с приложением для iOS, которое позволяет запускать прототипы. Principle позволяет вам экспортировать прототипы в видео или GIF-форматы. Интерфейс инструмента очень похож на интерфейс приложения Sketch. Если ранее вы пользовались приложением Sketch, то у вас не возникнет трудностей с использованием Principle.

PowerMockup очень сильно отличается от других приложений. Данный инструмент – это дополнение к Microsoft PowerPoint, которое превращает эту программу в полноценный инструмент по созданию прототипов. С данным расширением вы сможете создавать макеты для любых веб-приложений или приложений для настольных компьютеров.

Atomic – это невероятный инструмент для создания прототипов, и он формирует незабываемое первое впечатление. Atomic – это веб-приложение, которому для работы требуется Google Chrome. Если вы используете Safari, Firefox или браузеры Windows, данный инструмент может работать отвратительно. Atomic может использоваться для создания Apple Watch, Android, iOS и веб-проектов.

Balsamiq – это один из самых простых инструментов. Он позволяет вам перетаскивать любой элемент на черный фон. Данный инструмент может интегрироваться с Google Docs для импорта ваших прототипов и файлов дизайна. Balsamiq доступен, как программа для Mac или Windows, а также имеет веб-версию.

Adobe Comp CC – это еще один великолепный инструмент от Adobe. Он позволяет вам создавать веб, мобильные и печатные проекты и далее интегрировать их с другими утилитами Adobe для создания дизайна. Например, Photoshop, Illustrator или InDesign. Также Adobe CC Comp работает с Adobe Stock, который предоставляет сотни шрифтов, картинок и графических решений.

• Веб-дизайн
• Интерфейсы
• Usability
• Дизайн мобильных приложений
• Прототипирование

Источник: habr.com

8 инструментов для создания UX/UI прототипов, на которые стоит обратить внимание

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

Программы для прототипирования – это связующее звено между творческой идеей и конечным продуктом. Совсем недавно в области UX/UI дизайна царил Photoshop, однако, проведенный опрос показал, что этот самый известный графический редактор стал терять популярность среди разработчиков. В опросе приняли участие более четырех тысяч респондентов из почти двухсот стран, и по его результатам можно сделать однозначный вывод: разработчики всегда открыты для новых инструментов, призванных облегчить процесс концептуализации, прототипирования и проектирования цифровых продуктов.

Инструменты для UX/UI проектирования

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

1. Axure RP

Axure RP Pro – это программное обеспечение для создания прототипов, макетов, спецификаций веб-сайтов и приложений. Программа позволяет вставлять виджеты простым перетаскиванием мышью, а также изменять их размер и формат. Axure RP Pro является полноценным UX-инструментом, позволяющим разработчикам проектировать сложные интерактивные прототипы, но для ее освоения потребуется время. Если вы профессиональный разработчик, с помощью Axure RP Pro вы сможете создавать более сложные интерактивные прототипы.

2. Mockplus

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

Это хороший выбор для пользователей любого уровня подготовки, так как программа отличается простотой в освоении и интуитивно понятным интерфейсом. Если вашей целью является быстрое создание интерактивных прототипов в сжатые сроки, и вы хотите полностью сфокусироваться на работе, вместо того, чтобы тратить время на изучение инструментов проектирования, не проходите мимо Mockplus. Программа имеет необходимый набор UI-виджетов и иконок – все, что нужно для работы с вашими виджетами. Существует возможность предварительного просмотра прототипа путем экспорта HTML/изображения, либо его тестированием на существующем устройстве с помощью QR-кода.

3. Balsamiq Mockups

Balsamiq Mockups – это экспресс-инструмент для прототипирования, который поможет вам работать быстрее и эффективнее. В программе реализован метод работы, максимально приближенный к рисованию на простой доске. Программа отличается простым интерфейсом и имеет большой набор UI-элементов. Стандартные виджеты упорядочиваются на экране простым перетаскиванием мышью. Существует две версии программы: для автономного использования и в виде расширения для Google Drive, Confluence и JIRA.

4. Justinmind

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

5. InVision

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

6. UX Pin

UX Pin – это онлайн-инструмент для прототипирования, который позволяет построить требуемую модель интерфейса простым перетаскиванием мышью, без необходимости обращаться к программированию. Данная программа представляет собой экранный редактор, позволяющий выбирать необходимые элементы и составлять из них требуемые сочетания. С помощью UX Pin можно создавать реалистичные модели и импортировать слои из таких программ, как Sketch и Photoshop.

7. OmniGraffle

OmniGraffle – это приложение, разработанное компанией The Omni Group, для создания диаграмм и цифровых изображений, которое работает с Mac, iPhone, iPad и iPod touch. Программа может использоваться как автономно, так и как веб-приложение; в ее состав входит несколько инструментов для разработчиков. OmniGraffle позволяет перетаскивать объекты мышью, а также снабжена функцией вставки примечаний и создания спецификаций прототипов и моделей. Данное приложение является идеальным инструментом для работы на iPhone и iPad.

8. Flinto

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

Заключение

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

Источник: spark.ru

Протипирование: как сделать прототип сайта или мобильного приложения

Для чего нужны прототипы и как их делать? Разберем прототипирование в деталях.

Где-то год назад посчастливилось мне работать с одной командой. Необходимо было создать сайт под определенные задачи. Моя зона ответственности была на уровне: найди исполнителей, поставь задачу и проконтролируй, чтобы все было как надо. Подрядчиков нашли, начали ставить задачи. Разбили проект на несколько частей, поехали.

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

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

Прототипирование это

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

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

Зачем нужно прототипирование

Собрал чек-лист по основным задачам, который решает создание прототипа:

• Обзор конечного продукта/системы в целом.
• Выявление слабых мест в системе.
• Тестирование и проверка гипотез.
• Отладка процессов.
• Постановка задач на уровне тех.задания
• …(можно добавить свой вариант в комментариях)

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

Прототип танка времен Второй Мировой Войны

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

Требования к прототипам

• Высокая скорость создания.
• Определенный уровень детализации от задач.
• Легкость для внесения изменений.
• Интерактивность в случае взаимодействия с реальным пользователем.
• Доступность для участников процесса.

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

Кто обычно занимается прототипированием

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

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

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

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

Как сделать прототип сайта или мобильного приложения

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

Различаются они по точности: low fidelity – низкая точность прототипа, medium – средняя и high – высокая, соответственно. Давайте разберем каждый из них подробнее.

Простите, что прерываю чтение. Присоединяйтесь к моему telegram канал. Свежие анонсы статей, развитие digital продуктов и growth hack, там все. Жду вас! Продолжаем…

Low fidelity или бумажный прототип

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

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

Человек нажимает на нарисованные кнопки/элементы, а мы ему подсовываем следующие экраны.

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

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

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

Medium fidelity или интерактивный прототип

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

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

Пример, который я сделал в программе Marvel для мобильного приложения: ссылка

Все кнопочки и элементы можно брать из библиотеки софта, доступны разные варианты по видам устройств (Android, IOS, Desktop). Или же, просто нарисовать, сфотографировать и загрузить в программу. Ссылки от экрана к экрану можно цеплять, просто выделив какой-то объект в “View”.

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

Попробуйте немного покопаться в софте, он не очень сложный, но зато катастрофически полезный. Как всегда есть бесплатный доступ с ограничением по кол-ву проектов вроде бы. Но что мешает зарегистрироваться под разными почтами, если уж нужно много проектов? Или же купить подписку 12$ в месяц, тоже небольшие деньги, если много работать будете с подобными задачами.

Софтины для создания интерактивных прототипов:

Меня лично устраивает вариант такой: нарисовал что-то в графическом редакторе под прототипы (типа Figma) и закинул картинки в Marvel. Или же с помощью карандаша и ручки набросал эскиз и через фото бросил опять же все в Marvel. Быстро, бесплатно, эффективно.

High fidelity или интерактивный прототип с кусками кода

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

Как видите на рисунке выше, high fidelity прототип, это уже практически готовый продукт. Создать такой образец собственными усилиями будет проблематично, если у вас нет продвинутых навыков владения графическими программами. Поэтому, привлекайте дизайнера интерфейсов (UX/UI). С вас логика продукта/системы, с него визуализация и интерактивность.

Софты, которые понадобятся для создания высокоточного прототипа все те же:

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

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

Если обобщить все способы прототипирования, то у меня сложилась следующая картина мира:

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

Заканчиваем про прототипирование

Прототипирование, это мощная практика, которая позволяет закрывать целый ряд задач. Теперь вы знаете, как создавать прототипы сайтов и мобильных приложений, используйте эти знания и если когда-нибудь вас спросят: “Будете ли вы делать прототип?”, – смело отвечайте: “Буду!”.

• Техническое задание
• Не нужно все сразу, начните с MVP

Короткий сериал от Ростелекома. Посмотрим один из эпизодов.

Источник: www.alexcouncil.com