Как нарисовать прототип: Как создать прототип сайта и зачем он вам нужен

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

47562 18

How-to

– Читать 11 минут

Прочитать позже

Ярослава Невмержицкая

SEO Expert
Weblium

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

Содержание

1. Что такое прототип сайта
— Для чего нужен прототип сайта заказчику
— Цели, которые решает прототип сайта для команды разработчиков
2. Как сделать прототип сайта
— С помощью листов А4 или маркерной доски
— С помощью профессиональных программ
— С помощью онлайн-инструментов для прототипирования
3. Лучшие инструменты прототипирования
Заключение

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

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

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

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

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

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

Вот неполный список проблем и задач, которые помогает решить прототип:

визуализация идеи, представление о внешнем виде будущего сайта на ранних сроках;

возможность внести изменения и финализировать видение ценой минимальных расходов;

возможность более точной оценки сроков и бюджета полного объема работ;

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

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

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

Как оценить рентабельность проекта и сформировать стратегию в любой нише на 2−3 года вперед

Читать!

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

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

Но есть и другие преимущества для разработки:

валидация идей (например, отхода от традиционной структуры сайта), тест расположения блоков;

разработка use cases — примеров использования, которые покажут всем сторонам, как именно будет работать сайт.

«Ты можешь быть сто раз прав, но какой от этого прок, если ТЗ составлено устно?» — грустно шутят разработчики сайтов.

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

Как продвинуть молодой сайт и не слить бюджет впустую

Читать!

Хотите узнать, как Serpstat поможет продвинуть молодой сайт?

Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉

Оставить заявку!

Узнать подробнее!

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

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

С помощью листов А4 или маркерной доски

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

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

Как с помощью Serpstat шпионить за лидерами ниши и оценить seo-перспективы сайта — опыт webit

Читать!

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

Также можно использовать десятки профессиональных программ, которые предназначены для полномасштабной работы над дизайном сайта, — Sketch, Axure Pro, Microsoft Visio, Adobe InDesign, Adobe Photoshop. Прототип, разработанный в таком инструменте, не только серьезнее и эстетичнее выглядит, но также позволяет визуализировать все задумки и элементы интерфейса. В некоторых программах можно добавить кликабельные функции.

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

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

Как создать структуру сайта на основе семантики

Читать!

С помощью онлайн-инструментов для прототипирования

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

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

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

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

Как продвинуть молодой сайт и не слить бюджет впустую

Читать!

Лучшие инструменты прототипирования

#1

Draftium

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

Если вам достаточно пятидесяти шаблонов на выбор и трех прототипов, можно оставаться на бесплатной версии. Платная версия обойдется в $99 в год — в ней больше 300 шаблонов, число прототипов не ограничено, и есть приоритетная круглосуточная техподдержка.

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

#2

Marvel

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

У Marvel 4 тарифных плана — бесплатный и платные стоимостью от $12 до $84 в месяц. Разница между планами — в числе пользователей, которые имеют доступ к аккаунту, приоритетной поддержке и некоторых pro-функциях.

#3

Wireframe

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

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

Тарифная сетка Wireframe напоминает Marvel — сильно лимитированная бесплатная версия и три платных тарифных плана. Пакеты стоимостью от $16 до $99 в месяц отличаются только числом пользователей, которые могут работать над прототипом.

#4

Just in mind

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

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

Кроме бесплатной версии, Just in Mind предлагает три платных пакета, но делает упор не на число пользователей, а на интеграцию с другими сервисами — например, с Jira в версии Enterprise. Стоимость двух стандартных пакетов — $19 и $39 в месяц, а для серверной версии цена рассчитывается индивидуально.

#5

iPlotz

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

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

Стоимость подписки — от $99 в год для одного пользователя до $495 для десяти, плюс $75 за версию за десктопа. Бесплатная версия тоже есть, но только для одного проекта.

Заключение

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

Чтобы создать прототип сайта, можно использовать разные инструменты, от листка бумаги до сложных программ уровня Adobe Photoshop или Sketch.

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

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

Получить бесплатный доступ на 7 дней

Оцените статью по 5-бальной шкале

4.47 из 5 на основе 94 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Denys Kondak

Как провести анализ эффективности ключевых фраз в органическом поиске

How-to

Denys Kondak

Что такое HSTS и как внедрить технологию на свой сайт

How-to

Denys Kondak

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

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Как создать прототип мобильного приложения за 5 шагов + 3 примера

---

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

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

Фундаментальная отсылка. Прототип — это быстрая, черновая реализация будущей системы. А еще это работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании. Термин прототип произошел от древнегреческого πρῶτος «первый» + τύπος «отпечаток, оттиск» или первообраз.

«Одна картина стоит тысячи слов. Один прототип стоит 1 000  встреч.»

— Джон Маэда, дизайнер / remix известной цитаты Конфуция

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

Содержание:

• Что такое прототип для чего он нужен
• Инструкция по разработке прототипа мобильного приложения
  • Шаг 1. Определите полезное действие и конек
  • Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте бумажный прототип
  • Шаг 3. Перенесите бумажный прототип на интерактивную бумагу
  • Шаг 4. Придайте прототипу профессиональный облик 
  • Шаг 5. Поделитесь прототипом с заинтересованными в проекте и потенциальными клиентами и сделайте корректировки
• 8 моментов, которые важно учесть при создании прототипа
• 3 примера хороших прототипов мобильных и веб-приложений
• Что еще почитать на тему подходов к прототипированию
• Вывод и рекомендация

Что такое прототип и для чего он нужен

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

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

Пример прототипа мобильного приложения:

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

Использовать прототип следует по следующим причинам:

	Без прототипа приложения	С прототипом приложения
1. Прототип дает взгляд со стороны и открывает новую точку зрения	В вашем воображении идея выглядит просто и идеально. Существенные недостатки отсутствуют. На самом деле, это портал в бесконечные срывы ожиданий как клиентов, так и всех участников.	Взгляд со стороны помогает найти пробелы в задумке. Их уже можно устранить на этапе прототипирования и усовершенствовать идею.
2. Создает простор для эксперимента и поиска наилучшего решения с учетом ограничений	Доработки идеи, реализованной в коде — это трудоемко, дорого и рискованно.	В прототип мобильного или веб-приложения можно мгновенно вносить правки без какого-либо риска. К тому же эти изменения незначительны в рамках общего бюджета и помогают выбрать для разработки лучшее решение.
3. Прототип — предмет для исследований целевой аудитории	Когда вам нечего показать потенциальным клиентам, вы не можете рассчитывать на честную обратную связь о вашей идее или продукте.	Прототип веб- или мобильного приложения — это потрясающе точный инструмент для сбора данных с потенциальных пользователей. Дайте им поиграть с ним, понаблюдайте за прототипом на деле, и вас тут же накроет десятками идей о том, как доработать идею.
4. Прототип помогает оценить стоимость разработки программистами	На вопрос: «Сколько стоит такое приложение, как Facebook?» — вы не получите ясного ответа, потому что оценивать нужно комплект полезных пользовательских сценариев (User Flow), состоящих из конкретного количества экранов и состояний элементов управления.	Покажите прототип разработчикам и они в течение недели сделают точную и сбалансированную оценку по времени и бюджету на разработку.
5. Вовлекает в разработку и инвестиции	Идея звучит клево, всем нравится, но все ждут от вас каких-то действий, так как рисковать усилиями и деньгами хочется лишь единицам.	Помогает чувственно донести идею о будущем продукте и продемонстрировать ее на деле. Прототип повышает ваши шансы убедить заинтересованных.

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Инструкция по разработке прототипа мобильного приложения

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

Шаг 1. Определите полезное действие и конек

Данный этап выполняется по классическому алгоритму дизайн-мышления и оформить результат данного этапа можно в формате POV (Point-of-View).

Хороший POV одновременно создает пространство для развития и фокусирует на поиске решения.. Хороший POV — бесконечный источник идей для развития и совершенствования. 

__Пример POV__ / Сервис по доставке пиццы к вечеру пятницы

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

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

«Мы можем изменить мир, если подкинем им идей по заказу еды и превратим их метания в понятный путь к клевому празднику. »

Близкая аудитории культура: Отдых и развлечения, Карьера и деньги

Более подробно о дизайн-мышлении вы можете найти материал в курсе Дизайн-мышление — Базовый курс. Это курс с оригинальными методиками легендарной Stanford d.school. Теория и практика дизайн-мышления для разных отраслей в экспресс-формате. Заглянуть в курс по дизайн-мышлению →

Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте плавность сценария

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

Как выглядит

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

Пример оформления Sketchflow.

Инструменты для скетчинга

Я беру карандаш, ластик и лист A4 или блокнот.

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

В чем фишка бумажного прототипа

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

Шаг 3. Перенесите бумажный прототип на интерактивную бумагу

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

Как выглядит

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

Инструменты для дизайна

Вариант 1. POP by Marvel — превращает скетчи в прототипы для  iOS and Android-платформ. Для мобильных веб-прототипов тоже годится.

В чем фишка 

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

Шаг 4. Придайте прототипу профессиональный облик 

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

Инструменты для дизайна

Здесь под настроение я беру либо просто Figma или миксую Figma + Principle | ProtoPie — особенно когда хочется сделать эффектный выход.

Как выглядит

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

Пример Wireframe в Figma

В чем фишка

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

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

Поздравляю. Ваш прототип готов к первым испытаниям. И только сейчас на самом деле начинается самое интересное — первая корректировка рынком вашего решения.

Инструменты для дизайна

С помощью Figma или Principle | ProtoPie вы можете отправить ваш прототип по ссылке потенциальному клиенту и включить режим UX-тестирования.

Как выглядит

Вы можете проводить удаленные тестирования через Skype/Zoom с записью экрана или воспользоваться профессиональным софтом, например, Lookback для проведения модерируемых UX-тестирований.

В чем фишка тестирования прототипов на потенциальных клиентах

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

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

Ричард Фейнман

Прототипы — инструмент обучения и погружения в предметную область. Прототипы помогают быстрее учиться и быстрее совершенствовать ваши идеи.

3 примера хороших прототипов мобильных и веб-приложений

1. Демонстрация мобильного UX по созданию документов в мобильном приложении Craft – Create Amazing Documents

2. Микровзаимодействия в веб-приложении крупным планом

3. Демонстрация работы навигации в приложении

Что важно учесть при создании прототипа мобильного приложения

1. Тестируйте прототипы в конкретных ситуациях и тестируйте чаще

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

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

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

2. Начинайте со скетчей, а не с графического редактора

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

Суть идеи: Со скетчем у вас будет план. А еще скетч не сковывает вас в поиске решений.

3. Используйте живой контент, а не Lorem

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

Суть идеи: С живым текстом можно оценить пользу прототипа.

4. Наращивайте дизайн слоями

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

Суть идеи: С живым текстом можно оценить пользу прототипа, и получить нечто больше, чем WOW.

5. Применяйте дизайн-мышление

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

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

6. Изучайте паттерны и готовые библиотеки компонентов: лучше вспоминать, чем изучать заново

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

Суть идеи: Готовые UI-киты сделанные на технологическом уровне значительно ускорят разработку.

7. Развивайте прототип через истории в формате POV (Point of View)

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

Суть идеи: POV помогает сформулировать гипотезу о пользе продукта и создать контекст для тестирования и почувствовать аудиторию. 

Что еще почитать на тему подходов к прототипированию

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

Девять дизайнеров-исследователей и преподавателей в сфере дизайна Университета Сиднея в течение 15 лет исследовали приемы и техники дизайн-мышления. А потом собрали их в руководство. В книге методы сгруппированы в алфавитном порядке и промаркированы четырьмя символами «Придумай. Сделай. Сломай. Повтори». Помогает расширить пространство концепций, выйти за пределы обыденных решений и привнести свежий взгляд. 😊👇🏻

Придумай. Сделай. Сломай. Повтори | Настольная книга приемов и инструментов дизайн-мышления. Подробнее →

Вывод и рекомендация

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

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

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

Что такое прототип? Полное руководство · Эскиз

Промышленность

18 марта 2022 г.

Узнайте, что такое прототип и как он может помочь вам проверить ваши дизайнерские идеи

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

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

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

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

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

Правильный прототип для вас

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

• Создать с нуля : Начните с одного базового прототипа и развивайте его, пока не закончите. Вы можете думать об этом как о проверке ваших MVP (минимально жизнеспособных продуктов), которые сосредоточены на создании поставляемого продукта только с критически важной функциональностью продукта.
• Тестируйте и двигайтесь дальше : Создавайте разные прототипы для определенных частей вашего продукта, зная, что вы можете отказаться от них или доработать их после завершения тестирования. Это поможет вам использовать Agile-подход к процессу проектирования.
• Ранние итерации : Прототипы не должны ждать окончания цикла проектирования. Вы можете проверить и протестировать любую идею как можно раньше с помощью прототипов. Постоянно выполняя итерации от процесса обнаружения до отправки, вы можете поддерживать постоянный цикл улучшения.

Прототипы по сравнению с другими инструментами проектирования

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

Sketch поможет вам создать интерактивные прототипы для проверки ваших проектов.

Каковы преимущества прототипирования?

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

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

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

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

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

Прототипы с низкой точностью

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

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

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

Плюсы	Минусы
Быстро — Быстро набрасывайте идеи, чтобы передать их заинтересованным сторонам.	Грубый — грубый набросок может выглядеть иначе в окончательном варианте, что позже может вызвать трения.
Экономичность — Для создания прототипа не нужны никакие специальные инструменты или продукты.	Неточное — Без точных измерений трудно сказать, будет ли что-то работать на практике.
Гибкость — Карандаш и бумага позволяют быстро вносить коррективы во время совещаний и мозговых штурмов.	Упрощенный — Есть очень много деталей, которые вы можете добавить к бумажному дизайну, чего нельзя сказать о цифровых прототипах.
Доступно — Любой может набросать идею, где бы он ни находился, чтобы помочь сформировать конечный продукт.	Масштабируемость — В отличие от цифрового прототипа, вы не можете легко повторять бумажный дизайн.

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

Высокоточные прототипы

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

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

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

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

---

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

Как создать эскизный прототип за 5 шагов

Peter Martinez обновлено 23. 03.2023 14:48:53

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

• Часть 1. Как использовать Sketch Create Interactive Prototype
• Часть 2. Лучший инструмент для прототипирования эскизов Альтернатива
• Часть 3. Как создать прототип с альтернативой Sketch

Как использовать Sketch Создание интерактивного прототипа

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

Шаг 1. Создайте проект в Sketch Prototyping Tool

Установите Craft и откройте платформу Sketch для прототипирования. Выберите предустановку монтажной области или создайте собственную предустановку, а затем измените ее размер в соответствии с вашими потребностями.

Шаг 2. Создайте связь для вашего проекта эскизного прототипирования

Выберите слой и нажмите значок «+», расположенный рядом с Инспектором. Выберите слой, который вы хотите связать с монтажной областью, нажмите C на клавиатуре и нажмите на целевую монтажную область. Вы должны увидеть диалоговое окно, в котором вам будет предложено выбрать тип анимации, который вы хотите. Выберите нужный жест из раскрывающегося значка «Жест» и перейдите из раскрывающейся кнопки «Переход». Наконец, нажмите «Добавить ссылку», чтобы создать ссылку. Если вы хотите создать большую интерактивную область, горячие точки могут принести большую пользу по сравнению со ссылками. Чтобы добавить точку доступа, перейдите к кнопке «Вставить» в левом верхнем углу и выберите «Точка доступа». Перетащите и начните рисовать горячую точку.

Шаг 3. Синхронизируйте проект прототипирования приложения Sketch и предварительный просмотр

Теперь, когда вы закончили со ссылками, вам нужно синхронизировать свой прототип с InVision. Перейдите на панель инструментов Craft и откройте вкладку «Синхронизация». Войдите в свою учетную запись InVision или создайте ее, если у вас ее нет. Нажмите кнопку «+», чтобы создать новый прототип. Укажите подходящее имя для вашего нового прототипа и нажмите вкладку «Создать прототип», чтобы наконец создать свой прототип. Откройте свой прототип прямо из вкладки «Синхронизация». Теперь ваш прототип готов к просмотру, комментированию, проверке и публикации.

Лучший инструмент для создания прототипов Sketch

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

Попробуйте бесплатно

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

Возможности Wondershare Mockitt

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

Попробуйте бесплатно

Как создать прототип с помощью Sketch Alternative

Шаг 1. Создайте новый проект

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

Шаг 2. Добавьте больше экранов

Wondershare Mockitt перенесет вас в окно дизайна прототипа. Если вы хотите создать более интерактивный прототип, важно добавить в проект больше экранов. Нажмите кнопку «Новый экран» и добавьте нужное количество экранов.

Шаг 3. Добавление элементов страницы

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

Шаг 4. Соедините страницы и объекты

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