пошаговая инструкция — Ringostat Blog

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

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

Что такое прототип? Это первоначальный образец чего-либо.

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

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

 

Плюсы и минусы прототипирования сайтов

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

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

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

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

Шаг 1. Продумайте путь клиента до того, как создать прототип сайта

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

 

Узнайте больше о пути клиента в нашей статье «Короче: что такое customer journey за 4 минуты».

 

Шаг 2. Сделайте набросок

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

 

Шаг 3. Оживите прототип

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

Ringostat для агентства

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

 

Программы для создания прототипов офлайн

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

Esk.one

Платформа: Онлайн-сервис

Цена: бесплатно, пользователь может сделать пожертвование на свое усмотрение

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

Интерфейс esk.one

 

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

Раздел «Получить идею» подсказывает, что еще можно разместить на сайте

 

NinjaMock

Платформа: Онлайн-сервис

Цена: от 7,7$/месяц 

Бесплатный тариф: бессрочный, с ограничениями

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

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

У сервиса есть бесплатный тариф, в котором можно создать только один проект с не более чем 200 элементами. Созданные на бесплатном тарифе проекты доступны для просмотра всем посетителям сервиса, так что этот вариант вряд ли подойдет для коммерческого использования. Экспортировать прототип тоже получится лишь после оплаты. На PRO-планах доступны форматы PDF, PNG и HTML.

Здесь можно создавать проекты под разные платформы:

• смартфоны;
• планшеты;
• умные часы;
• браузер.

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

Moqups

Платформа: Онлайн-сервис

Цена: от 13$/месяц для фрилансеров, от 20$/месяц для команд

Бесплатный тариф: бессрочный, с ограничениями

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

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

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

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

Бесплатная версия сервиса ограничена одним проектом с не более чем 200 элементами. Этого лимита хватит на 2-3 страницы или небольшой лендинг. Совместная работа над прототипом доступна только по подписке, но можно открывать право просмотра другим пользователям сервиса, так что коллеги смогут смотреть онлайн-прототип.

У Moqups также есть расширение для браузера Chrome. Пока оно умеет делать скриншоты страниц и отправлять их в сервис. 

 

Origami

Платформа: macOS

Цена: бесплатно

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

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

 

Figma

Платформа: кроссплатформенный сервис, Windows, macOS, браузерная версия

Цена: от 12$/месяц

Бесплатный тариф: бессрочный, с ограничениями.

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

В сервисе есть шаблоны для сайтов, диаграмм, путей клиента и пользователя, постов для соцсетей и даже коллекция шрифтов. Доступна разработка под разные модели смартфонов и smart-часов. Есть векторный редактор и масса smart-функций. Figma пригодится на крупных проектах, когда прототип должен быть идеальным, прежде чем пойдет в работу. К слову, экспортировать файлы можно в форматах PNG, JPG, PDF и SVG.

 

Пользуясь бесплатной версией, можно создать до трех проектов, история изменений которых хранится 30 дней. Также можно добавлять в проект одного соавтора. Студентам сервис предлагает бесплатный доступ к PRO-версии. Но попытка перейти на страницу подтверждение статуса студента привела нас на страницу 404. Возможно этот функционал доработают.

 

Выводы

1. Создание прототипа — важный этап в разработке сайта. Он дает видение конечной точки, к которой уже прокладывается roadmap.
2. Чтобы прототипирование было целесообразным и облегчило работу, а не съело время впустую, нужно сразу определиться с необходимым уровнем детализации. Чем больше людей вовлечено в разработку и чем больше времени на нее отведено, тем больше прототип должен быть похож на готовый сайт. При этом небольшой команде для создания одной страницы может хватить и схематического наброска.
3. Создание прототипа следует начать с расчета пути пользователя к целевому действию. Уже после разработки сценариев взаимодействия с сайтом можно начинать рисовать блоки и выбирать формы кнопок. Первый набросок можно сделать хоть от руки в блокноте — лишь бы получить общее видение.
4. Сервисы для создания прототипов имеют схожие функционал и интерфейсы. Поэтому при выборе стоит обратить внимание на возможность совместной работы и доступные для экспорта форматы.

 

Подписывайтесь на наш Telegram-канал

Подпишитесь на обновления

Раз в неделю мы отправляем дайджест самых интересных новостей о digital 

Email*

Подписаться

Если вы нашли ошибку — выделите её и нажмите Ctrl + Enter или нажмите сюда.

Как создать прототип приложения за пару часов

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

Flinto (от $8 в месяц)

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

InVision (бесплатно / $15 в месяц)

В добавок к стандартным функциям этот инструмент реализует функции сбора отзывов от тестировщиков и совместную работу.

Proto.io (бесплатно / $24 в месяц)

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

Marvel (бесплатно)

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

UXPin ($14.99 в месяц)

Ещё один сверхбыстрый инструмент с перелинковкой экранов и очень интуитивным интерфейсом.

FluidUI (от $12 в месяц)

Данная разработка полноценно реализует все прелести Drag&Drop, содержит в себе множество вспомогательных инстурментов и прекрасно справляется с HTML5 экспортом прототипа.

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

MockingBot (от $7 в месяц)

Специализированный инструмент, заточенный под iOS разработку. Drag&Drop и совместная работа присутствуют.

Concept.ly (бесплатно)

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

Justinmind (от $19 в месяц)

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

FieldTest (бесплатно)

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

Этот инструмент даёт возможность строить макеты прямо на iPhone. По непонятным причинам до сих пор не сдружился с iOS 7.

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

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

Прототип сайта: что это такое, как сделать прототип

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

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

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

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

Для чего нужен прототип сайта заказчику?

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

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

То, что вы увидите на макете, потом увидите в готовом виде.

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

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

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

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

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

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

С помощью листов А4

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

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

С помощью профессиональных программ

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

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

Программы для создания прототипов

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

Axure RP

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

Balsamiq

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

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

Figma

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

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

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

Origami

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

Draftium

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

InVision

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

Выводы

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

FAQ

Что такое прототип сайта?

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

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

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

Какая разница между мокапом и прототипом?

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

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

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

У вас остались вопросы?

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

Отправить заявку

Создание прототипа сайта: 7 инструментов для маркетолога | Блог YAGLA

Как объяснить четко, каким вы видите будущий сайт или мобильное приложение? Решение – создание прототипа.

В этой статье вы узнаете что такое прототип и как его создать с помощью 7 онлайн-сервисов.

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

Прототип – макет, или физическая реализация концепта интерфейса. Ещё 15 лет назад, когда о принципе «Mobile first» ещё никто не думал, страница-прототип содержала образцы дизайна всех элементов сайта – заголовков, списков, цитат, абзацев.

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

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

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

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

Далее – 7 вариантов, у каждого свой спектр возможностей, сложность работы и цена. Выбор за вами.

InVision

Это идеальное решение, если вам нужно «оживить» готовые макеты Photoshop или Sketch.

Примечание: плагин для Adobe Photoshop и для Sketch поможет отправить проект из редактора прямо в InVision. Работает синхронизация файлов внутри проекта, с рабочим столом либо Dropbox (для этого нужны дополнительные приложения).

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

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

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

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

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

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

Большой плюс – инструмент бесплатный.

InVision

Balsamiq

Нет Photoshop или Sketch? Возможно, Balsamiq – лучший инструмент для вас. Он работает, как приложение для рабочего стола. Есть и веб-версия.

Инструмент содержит внушительную библиотеку встроенных элементов UI для использования в проектах. Это экономит время: вы используете готовые пресеты (например, выпадающие меню или «аккордеоны»).

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

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

Нужно оценить несколько вариантов дизайна? Не вопрос, инструмент предлагает средства контроля версий и историю версий. Можете вернуться назад по времени и оценить, насколько продвинулся ваш дизайн.

Balsamiq предусматривает расширения сторонних разработчиков – можно добавить дополнительные иконки или инструменты управления.

Главный минус – приложение платное. Хотя цены вполне подъемны: версия для десктопа стоит $89 за одну лицензию, веб-версия на 3 проекта – $12 в месяц. Есть бесплатный пробный период на 1 месяц для некоммерческих проектов.

Balsamiq

Moqups

Это полноценное веб-приложение позволит разработать дизайн от простого эскиза до готового макета.

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

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

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

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

Сервис платный, стоимость тарифа зависит от количества проектов и места на сервере.

Базовый тариф на 10 проектов и 1 GB на сервере обойдется в $13. Есть стартовый бесплатный тариф на 1 проект, ограниченный 300 объектами и 5 MB. Для простейшего макета (одностраничного лендинга) и полноценного общения с дизайнером этого вполне достаточно.

Вот что из этого может получиться:

Moqups

Marvel

Marvel — простой и интуитивный инструмент прототипирования. Его инструмент Canvas создает эскизы и каркасные интерфейсы.

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

Главная фишка Marvel – ориентация на разработку мобильных интерфейсов. При создании нового проекта вы выбираете тип прототипа: сайт, приложение для iPhone, iPad,Android и даже AppleWatch.

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

Добавляйте жесты (протаскивания и т.д.): выбираете активную область, назначаете на неё действие из набора пресетов, смотрите результат. Есть подсказки, так что не запутаетесь.

Печальный момент: Marvel разрабатывался для пользователей MacOS – для них разработчики припасли дополнительные плагины и приложения. Есть, например, плагин для Sketch. Для пользователей Windows и Linux подарочков нет.

Marvel предлагает три тарифа:

 

• Бесплатный – на 1 пользователя и 2 проекта.
• Профессиональный – $12 в месяц, 1 пользователь и неограниченное число проектов.
• Корпоративный – $48 в месяц, 4 пользователя.

Marvel

Justmind

Библиотека встроенных элементов позволяет создавать примитивные эскизы и почти готовые интерфейсы. Инструмент Justmind предусматривает библиотеки для десктопных и мобильных приложений. Работает как для iOS, так и для Android и Surface.

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

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

Профессиональный тариф обойдётся в $19 за 1 пользователя в месяц.

Justmind

Origami

Origami — более узкоспециализированный инструмент прототипирования, так как доступен только для MacOS. Его функции – создавать эскизы и макеты для iPad и iPhone.

Origami содержит 4 главные панели:

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

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

Origami бесплатен, веб-версии нет.

Origami

Proto.io

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

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

Гордость разработчиков – продвинутый редактор Proto.io:

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

Разработчики предлагают привязку к учетной записи Dropbox для хранения и загрузки файлов, клиент для iOS и Android и плагины для Sketch и Photoshop.

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

Тариф «Фрилансер» стоит $24 в месяц и позволяет вести 5 проектов. Если вы не работаете в веб-студии, этого хватит с избытком.

Proto.io

Заключение

Этих сервисов достаточно для решения любой задачи, остается только выбрать подходящий.

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

Как сделать прототип сайта? Лучшие сервисы для прототипирования сайтов

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

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

Что такое прототип сайта и зачем он нужен

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

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

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

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

📍 Если резюмировать, то прототип сайта помогает:

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

Какие бывают прототипы

Готовые прототипы сайтов делят на:

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

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

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

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

Эскиз от руки 

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

Статичный недетализированный макет

Когда структура сайта готова, приступайте к основным элементам. Определите:

1. где будет располагаться каждый объект страницы;
2. какого размера он будет;
3. как элементы будут сочетаться между собой.  

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

Статичный детализированный прототип

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

Интерактивная детализированная модель сайта

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

Прототип сайта на конструкторе

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

Используйте 190 готовых шаблонов нашего конструктора для вашего сайта!

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

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

Шаг 1 Определите цель сайта

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

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

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

Шаг 2 Сделайте набросок страниц

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

Вы можете творить на бумаге, на доске или набросать прототип сайта в Фигме. На данном этапе важно думать, зачем вам сайт, и не увлекаться детализацией. Программа для создания макетов сайта в этом плане более «коварна», потому что в порыве творчества можете не заметить, как спустя несколько часов выбираете цвет для кнопки «Добавить в корзину». 

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

Шаг 3 Оцифруйте прототип

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

Инструменты для прототипирования сайтов

В статье мы говорили о бумаге, программах и онлайн-сервисах для прототипирования сайтов. Если вы впервые задались вопросом, как сделать прототип сайта, бумагу и карандаш для эскиза вы найдете без нашей помощи. С инструментами для прототипирования разобраться сложнее. Здесь есть два варианта:

• профессиональные программы под Windows и MacOS: Adobe Photoshop, Adobe InDesign, Sketch;
• онлайн-инструменты.

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

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

Wireframe

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

Меню Wireframe

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

Интерфейс Wireframe

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

LucidChart

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

Первая страница после регистрации в LucidChart

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

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

Рабочее окно LucidChart

Diagrams

Если вы пользуетесь инструментами Google, GitHub или Dropbox, попробуйте сервис Diagrams. По концепции и функциям он похож на LucidChart, но его можно установить на десктоп или привязать к удобному вам облачному хранилищу.

Diagrams можно привязать к облачному хранилищу

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

Рабочее окно Diagrams

Нужен сайт?
Сделать сайт самому для бизнеса или хобби с нашими готовыми решениями легко как раз-два-три. Бесплатный тест 30 дней!

XMind

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

Функционал XMind

Figma

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

Если вы не знаете, как сделать прототип в Фигме, в программе есть шаблоны, а на сайте — подсказки и руководства пользователя. В бесплатной версии сервиса вы можете сохранить созданный макет в PDF-формате или как картинку в SVG, PNG и JPG. В Figma можно создать дизайн сайта онлайн либо установить программу на Windows и MacOS.

Шаблон прототипа для мобильного приложения

Draftium

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

Примеры прототипов Draftium

Marvel

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

Примеры прототипов Marvel

Шпаргалка: как и где сделать прототип сайта

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

Чтобы создать макет сайта, нужно:

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

📌 Программы для прототипирования и онлайн-сервисы, которые вам пригодятся при создании макета: Wireframe, XMind, Diagrams, Figma, Draftium, Marvel.

Поделитесь в комментариях, приходилось ли вам ранее делать прототип сайта и с какими сложностями столкнулись в процессе!

Пробуйте качественный хостинг с рейтингом 9,7 из 10 баллов
на основе 1900 отзывов клиентов!

7 бесплатных программ для создания прототипа сайта

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

 

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

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

• Бумажный прототип – это быстрый и простой способ создать прототип, не требует, каких либо навыков, легко вносить правки. Можно добавлять комментарии.
• Прототип программный – более продвинутый вид прототипирования, имеет эстетичный вид, возможность вносить правки несколькими участниками.
• Динамический прототип – прототип в виде кода HTML, очень подробно показывает как именно будет выглядеть проект в web.

 

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

 

Mockflow: удобный инструмент, с неперегруженным, понятным функционалом.

 

Moqups: можно создавать не только прототипы сайтов, но и карты сайта, диаграммы и многое другое.

 

POP: это приложение для смартфонов, бумага и карандаш — это все, что вам требуется для создания интерактивного прототипа, очень интересное решение.

 

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

 

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

 

Balsamiq: довольно простой и интуитивно понятный ресурс, есть версия триал с урезанным функционалом, за полноценную придется выложить порядка 90 у. е

 

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

 

Как нарисовать прототип продукта? — Русские Блоги

Как нарисовать прототип продукта?

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

1. Определение прототипа

Давайте поговорим о концепции прототипов продукта. Теперь, когда все слышат прототипы, они сразу же думают о прототипах веб-сайтов или приложений, нарисованных в Интернете или мобильном Интернете. Но первая веб-страница, принадлежащая людям, появилась 6 августа 1991 г. Она была создана Тимом Тимом Бернерсом-Ли на компьютере NeXT и объясняла концепцию всемирной паутины, как использовать веб-браузер и как создать веб-сервер. Содержание.

Адрес: http://info.cern.ch

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

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

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

Сказав это, постучите по доске, определение прототипа здесь!

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

2. Проблемы, решаемые прототипом.

1) Предоставление менеджерам по продукту более удобного способа представления продуктов и облегчения пользовательского интерфейса и технического понимания продуктов;

2) Менеджеры по продукту могут изменять и корректировать прототипы быстро и с минимальными затратами, чтобы не тратить впустую затраты на разработку;

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

Три, четыре элемента хорошего прототипа

1. Уточните цели продукта и цели каждой страницы.

Чтобы проиллюстрировать эту проблему, возьмем приложение для путешествий — Ctrip и приложение для фитнеса — keep. Ниже приведен снимок экрана домашней страницы Ctrip и KEEP:

Первое изображение — Ctrip, второе — сохранить

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

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

Если бы KEEP также следовала идеям продуктов Ctrip, это могло бы выглядеть так:

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

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

2. Don‘t makeme think

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

Например:

Ситуация 1: Я хочу купить рубашку Uniqlo (я знаю, что хочу купить). Путь пользователя следующий: найдите рубашки Uniqlo, выберите продукты, выберите цвета и модели, и процесс оплаты заказа завершится.

Ситуация 2: Я хочу купить новую одежду (не знаю, что покупать). В настоящее время пользовательский путь заключается в том, чтобы просмотреть домашнюю страницу Taobao [рекомендуется для вас] и найти свой любимый стиль одежды. Войдите в магазин и продолжайте просмотр. Отметьте самый новый товар. Отметьте самый популярный товар и добавьте его в корзину, а затем выполните указанные выше операции.

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

3. Масштабируемость прототипа.

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

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

Вот два примера приложений для чтения новостей: Curiosity Daily и Today’s Headlines.

Интерфейс Curiosity Daily очень прост, всего две навигации вверху: НОВОСТИ и ЛАБОРАТОРИИ, а другая — плавающая буква Q внизу, а внутри — личный центр.

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

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

В-четвертых, этапы рисования прототипа.

1. Четкие цели

Первый шаг в рисовании прототипа — определение цели. Уточняйте цели продукта, цели страницы и цели функционального модуля. Только когда у вас есть четкая цель, вы можете сосредоточиться на ней и прояснить ее. Мы уже продемонстрировали это в первом элементе рисования хорошего прототипа.

2. Нарисуйте диаграмму структуры информации о продукте.

Информационную структуру продукта можно понимать как план или каталог книги.

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

3. Схема производства продукции

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

Прилагаем нарисованную от руки блок-схему молока:

В блок-схеме рисования прототипа есть несколько секретов проверки, которые обобщает молоко, чтобы научить вас.

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

Статья 1: Добавление, удаление, изменение и проверка функций проверки

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

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

Удаление легко понять: вы публикуете нежелательные моменты, просто нажимаете удалить в правом нижнем углу.

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

Проверка — это просто наблюдение. Опубликованные вами моменты можно просмотреть на вашей личной домашней странице.

Статья 2: Проверка актуальности

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

Статья 3: рассмотрите две ситуации успеха и неудачи

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

Статья 4: Ненормальная ситуация

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

4. Прототипирование

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

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

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

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

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

https://vimeo.com/253465074

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

Создание экранов с помощью ручки и бумаги

Бумажный подход имеет много преимуществ:

1. Он быстрее.

2. Исправление ошибок стоит недорого.

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

4. Мы можем избежать слишком быстрой оптимизации графических элементов.

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

1. Человек думает, что не умеет рисовать.

2. Никто не обратит внимания, если это не выглядит хорошо.

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

Вот причины, по которым эти «причины» не должны вас останавливать.

1. Вы просто рисуете несколько экранов для самостоятельно , чтобы помочь развить свое мышление о проблеме/решении.

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

3. Вы не собираетесь его никому показывать.Или, если вы это сделаете, они узнают, что это было просто что-то быстро набросанное на бумаге.

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

Право, я не умею рисовать!

Наброски экранов мобильных приложений на бумаге

Чтобы начать рисовать на бумаге, вам потребуется:

Посмотрев видео выше, вы сможете увидеть, как я создавал эти экраны. Вот еще несколько экранов, которые я создал.

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

3 дизайна экрана мобильного приложения, сделанные ручкой и бумагой

Начало работы

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

1. Начните с меню. Спросите себя, каковы основные параметры основной навигации.

2. Подумайте об основных потоках. Какой поток самый важный?

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

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

5. Нарисуй что-нибудь. Нарисуй что угодно. Со временем это становится легче, поэтому лучше нарисовать что-то не то, чем ничего не рисовать!

Я всегда бросаю свои скомканные страницы в угол комнаты и немного смеюсь, когда заканчиваю и сгребаю все эти скомканные клочки бумаги в мусорную корзину!

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

Как выглядит пачка бумажных рисунков!

Использование приложения POP

Приложение «Прототипирование на бумаге» (или POP) — чрезвычайно легкий и простой в использовании инструмент для создания прототипов, созданный компанией Marvel.

Вам понадобится телефон Android или iPhone, чтобы установить приложение POP на свое устройство.

Процесс создания вашего первого прототипа из бумажных экранов очень прост с POP:

1. Нарисуйте несколько экранов на бумаге.

2. Установите и откройте приложение POP.

3. Создайте проект в POP и добавьте изображения (фотографируйте свои бумажные наброски).

4. Соедините их вместе, добавив точки доступа.

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

Поскольку мы уже набросали наши бумажные экраны, все, что осталось, это открыть приложение POP и добавить изображения:

Затем мы просто добавляем горячую точку на каждое изображение, где мы хотим создать связь между одним изображением/экраном и другим.Например, если на экране 1 есть кнопка входа в систему, которая ведет на экран 2, то мы добавим точку доступа (область, на которую можно нажать) поверх области кнопки на экране 1 и укажем, что пунктом назначения является экран 2:

. Затем вы можете нажать кнопку Опция «Играть» для предварительного просмотра прототипа!

Резюме

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

Самое приятное то, что если я совершу ошибку и мне придется начинать сначала, это не кризис.Это займет у меня еще десять минут.

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

Дополнительные ресурсы

Загрузить схему мобильного телефона (в формате PDF для печати).

Читайте Томаса Льюиса о том, как бумажные прототипы приводят к мобильным приложениям Microsoft 8.

4 шага к созданию первого прототипа вашего продукта

В 2015 г. Управление по патентам и товарным знакам США обработало 629 647 патентных заявок.В среднем около 55 процентов поданных заявок получают патенты. Один из способов повысить свои шансы на получение патента — создать свой первый прототип. Хотя представление прототипа не является обязательным требованием Патентного ведомства США для подачи вашей заявки, оно служит для демонстрации того, что ваша идея была продумана достаточно подробно, чтобы заслуживать рассмотрения.

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

1. Создание концептуального эскиза

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

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

2. Разработка виртуального прототипа

В какой-то момент создание цифрового наброска вашей идеи станет бесценным. Стандартным инструментом цифрового проектирования, используемым инженерами и другими специалистами, является AutoCAD, который позволяет им создавать как 2-D, так и 3-D изображения.

Трехмерная визуализация позволяет вращать и анимировать виртуальный эскиз, чтобы вы могли визуализировать его со всех сторон. Такие инструменты, как NVIDIA Iray, CATIA Live Rendering и Quadro, также могут помочь вам преобразовать ваш 3D-чертеж в фотореалистичный прототип, помогая вам приблизительно увидеть, как будет выглядеть физическая версия вашего проекта. Если вы не разбираетесь в компьютерных инструментах для рисования и рендеринга, профессиональные графические дизайнеры или дизайнеры прототипов могут помочь вам с этим шагом.

3.Построить физический прототип

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

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

4. Найдите производителя

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

Производители, предлагающие бесплатные образцы и 3D-печать, могут помочь вам сократить расходы как на этапе тестирования, так и на этапе производства. Например, производитель Apple Rubber предоставляет индивидуальные образцы уплотнительных колец, чтобы помочь вам протестировать прототип и определить, как производить его по рентабельной цене. Обратитесь к нескольким поставщикам и производителям, чтобы получить оценки, чтобы вы могли определить наиболее экономичные материалы и методы для запуска вашего прототипа в производство.

6 шагов к созданию прототипа

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

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

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

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

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

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

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

6 шагов для создания прототипа.

1. Определите основные требования.

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

2. Создайте концептуальный эскиз.

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

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

3. Разработать виртуальный прототип.

После того, как ваш бумажный набросок будет готов, вы захотите создать цифровой эскиз своей идеи. AudoCAD, который можно использовать для создания как 2D-, так и 3D-визуализации, является стандартным инструментом проектирования для этой цели. 3D-рендеринг позволяет вращать и анимировать виртуальный эскиз — это позволяет визуализировать продукт со всех сторон. Этот дизайн должен быть гораздо более подробным, чем ваш концептуальный набросок, поскольку именно его вы будете использовать для разработки прототипа.

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

4. Создайте первоначальный прототип ручной работы.

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

В связи с быстрым распространением 3D-печати (процесс, в котором используются проекты САПР из отсканированных или компьютерных 3D-моделей для наложения материала на рабочий прототип), вы можете рассмотреть возможность 3D-печати, а не ручного изготовления своего прототипа.История Салли Данн, создательницы Pedal Petals, иллюстрирует преимущества 3D-печати по сравнению с традиционным прототипированием. Используя 3D-печать, Данн смогла создать прототип своего продукта за считанные часы, напечатать первый прототип в тот же день на домашнем 3D-принтере и в тот же день совершить первую продажу на Etsy.

5. Используйте первоначальный прототип для выявления и исправления проблем в проекте.

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

6. Завершите свой дизайн, чтобы создать окончательный прототип.

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

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

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

Не пропустите такие статьи.

Подпишитесь! консультант и независимый писатель/исследователь.Найдите ее в Twitter и LinkedIn.

Руководство по дизайну прототипов — процесс проектирования UX

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

Как и зачем на самом деле строить прототип, часто остается загадкой. Спросите многих дизайнеров, и они склонят головы, как растерянные щенки. «Что ты имеешь в виду? Просто сделай это», — скажут они. И правда: все мы умеем создавать прототипы. Мы просто не знаем , как мы знаем .

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

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

Дизайн прототипа — Что такое прототипы для

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

Так что же такое прототип? Прототип — это инструмент для визуализации «шведского стола» интерактивной дизайнерской работы; по сути, прототипы (практически на любой стадии) представляют собой объединение всей предшествующей работы в единую, видимую, функциональную часть. Это визуальное представление демонстрирует, что продукт делает в любой момент, что представляют собой интерактивные элементы и как продукт будет функционировать в реальном мире.

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

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

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

Тим Браун, генеральный директор и президент IDEO

Прототипы можно рассматривать как механизм для демонстрации функциональности.

Практическое объяснение того, как что-то работает, имеет ряд ценных преимуществ, в том числе:

• Воплощение в жизнь – Перед созданием каких-либо прототипов продукт полностью концептуален! Какое-то время это нормально, но в конечном итоге это должно стать чем-то, что заинтересованные стороны и пользователи в конечном итоге поймут и оценят.Прототип — это первый шаг на пути от концепции к реальности.
• Решить проблему — Иногда у нас возникает проектная задача без решения. Как навык прототипирование — отличный способ визуализировать проблему и быстро представить решения. Если это не сработает, выбросьте прототип и попробуйте снова.
• Итерация – Прототипирование происходит поэтапно, но результат один и тот же: развитие ваших идей. Каждая новая итерация, от эскизов до Hi-Fi, предлагает множество вариантов поведения и функций для тестирования.А с большим количеством данных мы можем выполнять итерации быстрее и эффективнее.
• Обнаружение непреднамеренных сценариев — Как только что-то становится видимым, у нас есть ограничения нашего продукта, доступные для изучения, что также обеспечивает лучший контекст о том, что должно быть там… и что не должно!
• Обнаружение проблем с юзабилити — Это то, чем живут многие дизайнеры: как только у продукта есть какой-либо прототип, проблемы с юзабилити внезапно становятся легко обнаруживаемыми и устраняемыми.
• Презентация – Прототипы на любом этапе являются стандартом для презентации.Независимо от того, тестируете ли вы версию страницы или представляете продукт клиенту, прототип в той или иной форме должен присутствовать. А если нет, то можно поспорить, что кто-нибудь спросит, где он и почему его не включили.

Как начать процесс прототипирования

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

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

1. Каковы цели проекта?

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

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

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

3. Кто является аудиторией? Каковы их цели?

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

4. Что это за продукт и для чего он (устройство) предназначен?

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

5. Есть ли визуальные прецеденты для подражания?

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

6. Каковы результаты?

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

Прототип карты доставки (от Ramotion).

Нарисуйте свои прототипы

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

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

01 | Пользовательские потоки — Следуйте идентификации пользовательских потоков. Посмотрите, как пользователи достигают своих целей и как они взаимодействуют в системе.

02 | Информационные объекты — Каждый пользовательский поток будет отображать некоторые пользовательские входы и выходы. Определите, что они из себя представляют, как они связаны с поведением и ожиданиями пользователей, в какие взаимодействия они вовлечены и как они работают.

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

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

Пример рудиментарного эскиза автора.

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

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

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

Переход к цифровым технологиям (прототипы от низкой до высокой точности)

Когда будет достаточно полных эскизов, чтобы двигаться вперед, пришло время их оцифровать. Будь то Adobe XD, Sketch, Framer, Flinto или что-то еще, создание цифровых версий эскизов — это первый шаг к их формализации. Таким образом, акцент смещается с творческого добавления необходимых элементов на организацию активов и структуры в дизайне.

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

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

Прототипирование с помощью Justinmind.

С каждым новым проводом и итерацией задавайте два основных вопроса: Учитывает ли эта страница свое предназначение в более широком пользовательском потоке? И имеет ли взаимодействие смысл (имеется в виду, понял ли пользователь, как выполнить действие)? Мы очень часто задаем эти вопросы. Чем больше мы делаем, тем больше вероятность того, что каждая новая итерация будет приближать прототипы к окончательному варианту.

Цифровые прототипы также намного проще тестировать, поскольку они не только более разборчивы, но и быстрее воспроизводятся и итерируются в массовом порядке.Именно здесь инструменты прототипирования UX, такие как InVision и Proto.io, очень удобны для создания интерактивных прототипов. Когда это кликабельно, становится легко проверить удобство использования различных аспектов, от отдельных кнопок до целых потоков.

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

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

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

Функциональный прототип, разработанный Автором.

Прототип с назначением

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

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

Итак, создавая следующий набор прототипов, не забудьте задать хотя бы один крайне важный вопрос: дает ли это желаемый результат? Если нет, то это еще одна возможность набросать новую версию.

• • •

Дальнейшее чтение в блоге Toptal Design:

Создание прототипа продукта — Entrepreneur.com

Мнения, выраженные участниками Entrepreneur , являются их собственными.

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

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

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

Прототип имеет и другие преимущества:

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

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

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

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

Разработка вашего прототипа
Итак, теперь, когда вы знаете, что создание прототипа является жизненно важным шагом в процессе вашего изобретения, как именно вы будете продвигаться вперед и на самом деле это делать? Этот этап процесса изобретения, возможно, является периодом наибольшего обучения…а также мой личный фаворит. Мне нравится творческое исследование, которое вдохновляет прототипирование! Здесь ваши слова и мысли меняются от «Могу ли я?» на «Как я буду?»

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

Если вы предполагаете, что ваш продукт будет сделан из пластика, я недавно открыл для себя отличный продукт, который идеально подходит для создания домашних прототипов.Он называется Shapelock и недавно был выпущен на рынок США. При нагревании в микроволновке или феном он становится податливым, как глина, так что вы можете лепить из него все, что захотите. При высыхании становится твердым пластиком. Лучшая часть? Это всего около 14,95 долларов за контейнер, и вы можете разогревать его и использовать снова и снова. Найдите его на сайте www.shapelock.com.

Конечно, ваш продукт также может быть изготовлен из любого количества материалов, от металлов до химикатов и текстиля.При использовании любого материала старайтесь быть открытыми для альтернатив, которые вы, возможно, изначально не рассматривали. Например, вы можете быть уверены, что хотите использовать хлопок. Если это так, бросьте вызов себе, спросив «Почему?» Возможно, лучше подойдет другой материал, например эластичный материал, такой как лайкра. Или как насчет использования сетки, холста, нейлона или кожи? Как насчет того, чтобы попробовать неопрен? Это время, чтобы сказать «Что, если» и позволить себе свободу исследовать. Отложите в сторону свои первоначальные мысли — возможно, вы в конце концов вернетесь к ним, но, по крайней мере, тогда вы будете знать, что приняли лучшее решение.

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

Если вы решите воспользоваться услугами профессионального разработчика прототипов, найти его можно несколькими способами. Я нашел разработчика прототипа в своих Желтых страницах, потому что в то время я не знал, какие другие ресурсы доступны. Но с тех пор я узнал о бесплатном ресурсе под названием www.thomasnet.com (ранее известный как www.thomasregister.com), универсальный ресурс со всей необходимой вам информацией. Жаль, что я не знал об этом, когда я только начинал! Он предлагает базу данных 650 000 производителей, дистрибьюторов и поставщиков услуг, включая разработчиков прототипов, на выбор с разбивкой по штатам. За считанные минуты вы можете найти специалиста, который ищете.

Вам также следует провести исследование и изучить новые и появляющиеся технологии. Например, при создании прототипов моих собственных пластиковых изделий я обнаружил относительно новый метод производства прототипов, который сэкономил мне тысячи долларов.Это процесс, называемый быстрым прототипированием , в котором используется технология стереолитография . Это позволяет мне быстро изготавливать пластиковые прототипы из компьютерных чертежей (САПР) на большом инструментальном станке, а не из дорогой формы для литья под давлением. Быстрые прототипы могут стоить всего несколько сотен долларов каждый (в зависимости от сложности), но они часто являются выгодной сделкой, учитывая альтернативы. Например, создание пресс-формы для литья под давлением в США может стоить от 10 000 до 100 000 долларов.

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

Как сделать прототип за 4 простых шага

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

 

1. Набросайте свою концепцию

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

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

Эскизы помогут организовать ваши идеи. Мы рекомендуем иметь организационную систему для всех ваших рисунков. Используете ли вы систему нумерации, такую ​​как Drawing A v.2.0 или система, основанная на дате, не имеет значения, главное, чтобы чертежи были организованы и согласованы. К тому времени, когда вы приступите к производству, у вас, вероятно, будут десятки, если не сотни эскизов, поэтому поддержание порядка имеет решающее значение для того, чтобы не сбиться с пути. При наброске концепций мы обычно придумываем от 2 до 3 надежных идей, прежде чем переходить к моделированию

 

2. Создаем виртуальную модель

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

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

 

3. Создайте свой физический прототип

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

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

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

 

4. Протестируйте и доработайте свой дизайн

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

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

 

Мы не можем не подчеркнуть, насколько важным является прототипирование в процессе разработки продукта. Цикл «доработка, прототип, испытание» повторяется несколько раз для компонентов и всей конструкции перед изготовлением. Если у вас нет надежного рабочего прототипа до того, как вы закончите разработку инструментов и начнете процесс внедрения нового продукта, ваш продукт может не работать.Отказ продукта может привести к тому, что вы потеряете сотни тысяч долларов на инструменты, настройку и производственные затраты. В худшем случае ваш продукт окажется в руках покупателя, и он серьезно поранится из-за конструктивного недостатка. Ни один владелец бизнеса не хочет столкнуться с судебным иском или отзывом после запуска продукта. Надлежащее прототипирование и тестирование предотвращают подобные вещи. Если вы не знаете, с чего начать создание прототипа, или застряли на определенной проблеме с дизайном прототипа, свяжитесь с нами, и мы поможем запустить ваш проект.

 

---

О компании Synectic Product Development : Synectic Product Development — полномасштабная компания по разработке продуктов, сертифицированная по стандарту ISO 13485. Вертикально интегрированные в Mack Group, наши возможности позволяют нам довести ваш дизайн от концепции до производства. Обладая более чем 40-летним опытом проектирования, разработки и производства, мы стремимся к изобретательности, экономической эффективности и эстетике в наших проектах. Узнайте больше о наших услугах по прототипированию и узнайте, как мы можем помочь вашему следующему проекту.

14 лучших инструментов прототипирования для дизайнеров UI/UX

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

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

14 инструментов прототипирования для дизайнеров UI/UX

Вот 14 инструментов прототипирования, которые помогут вам в вашем собственном процессе проектирования:

1. Figma

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

Согласованность является приоритетом в веб-дизайне, и вы можете использовать гибкие стили Figma для управления внешним видом текста, сеток и других элементов в проекте. А множество полезных плагинов, таких как Autoflow для иллюстрации пользовательских потоков, Figmotion для создания анимации и многие другие, расширяют функциональность Figma.

2. InVision Studio

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

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

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

3. Adobe XD

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

Adobe XD хорошо работает вместе с другими приложениями семейства Adobe, такими как Illustrator и Photoshop.Приятно иметь возможность редактировать изображения Adobe, например .psd, прямо в приложении.

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

Читайте по теме: Лучшие альтернативы Photoshop (бесплатно + платно)

4. Webflow

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

Webflow выполняет две задачи одновременно. Пока вы разрабатываете и создаете высокоточный прототип, вы создаете работающий веб-сайт со всеми элементами HTML, CSS и связанными с ними JavaScript. Вы не получите просто макет — у вас будет настоящая сделка.

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

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

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

5. Axure RP 9

Axure RP 9 объединяет в себе все возможности создания каркасов и прототипов.Это позволяет дизайнерам создавать интерактивные прототипы веб-сайтов и приложений с низким и высоким разрешением без необходимости написания кода.

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

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

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

6. Origami Studio

Если вы Facebook и у ваших дизайнеров нет нужного приложения, вы создаете его для них. Origami Studio была создана для дизайнеров Facebook по необходимости, и Facebook любезно поделился ею с остальным миром дизайна.

Для дизайнеров, которым нужна более совершенная система, Origami Studio предлагает мощные инструменты прототипирования для веб-сайтов и мобильных приложений.Центральным элементом Origami Studio является редактор патчей, который позволяет создавать логику, поведение, анимацию и взаимодействие. Он поставляется с множеством готовых патчей, и на сайте говорится, что вы, скорее всего, будете использовать только 15–20 из них для большей части своей работы по прототипированию.

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

7. Justinmind

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

Justinmind поставляется с библиотеками пользовательского интерфейса и шаблонами, а также многими другими полезными функциями.Он позволяет создавать логику для условной навигации, позволяет проводить тестирование пользователями, упрощает управление проектной группой и многое другое. Существует также ряд интеграций, которые позволяют использовать Justinmind со Sketch, Adobe Suite, Azure DevOps Server и Jira в рабочем процессе.

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

8. Sketch

Многие UX-дизайнеры используют Sketch как часть своего рабочего процесса — и не зря.

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

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

9. Fluid UI

Программное обеспечение Fluid UI обеспечивает молниеносное прототипирование. Благодаря готовым библиотекам для дизайна материалов, iOS и Windows, а также жестам Fluid UI дает вам так много возможностей для начала работы. А их простой пользовательский интерфейс позволяет очень легко собрать эти компоненты вместе.

10. Framer

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

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

11. Marvel

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

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

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

12. Proto.io

ESPN, Amazon и PayPal — это лишь некоторые из громких имен, которые использовали Proto.io. Благодаря широкому выбору компонентов и инструментов интерактивные прототипы становятся возможными без ввода ни одной строки кода.

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

Благодаря множеству шаблонов, инструментов и других компонентов для создания прототипов Proto.io может многое предложить.

13. Principle

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

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

Благодаря вниманию к движению и интерактивности, Principle выделяется среди других приложений для прототипирования.

14. Balsamiq

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

No related posts.