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

Это подводит нас к идее прототипирования и создания MVP.

Чем может быть полезно прототипирование?

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

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

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

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

Неудивительно, что веб-браузеры хороши не только для просмотра веб-сайтов. Современные веб-браузеры, такие как Google Chrome или Mozilla Firefox, могут помочь нам создавать хорошие прототипы веб-сайтов или приложений. Мы можем легко изменить веб-сайт, чтобы он выглядел так, как мы хотим, что полезно при создании снимков экрана продукта. Давайте рассмотрим несколько распространенных способов создания хороших прототипов с помощью браузеров.

Делайте скриншоты узлов в инструментах разработки браузера

Изображение говорит более тысячи слов. Поэтому веб-сайты и приложения используют изображения для передачи информации понятным посетителям способом. Некоторые браузеры, такие как Opera или Firefox, позволяют создавать скриншоты веб-сайтов. Кроме того, такие операционные системы, как Windows и MacOS, также поддерживают ярлыки для создания снимков экрана. Распространенная проблема: вас интересует только часть веб-сайта или изображение. Создание идеального снимка экрана может быть обременительным.

И Chrome (начиная с версии 86), и Firefox позволяют делать снимки экрана любого элемента DOM.

Включить редактирование текста на веб-сайтах

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

  • Кто моя аудитория? Должен ли я писать более формально или неформально?
  • Текст должен быть коротким и кратким или длинным и подробным?

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

document.designMode = "on";

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

document.designMode = "off"; // this is the default

Редактируйте HTML и CSS прямо в браузере

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

Более того, мы также можем изменить структуру HTML, чтобы получить желаемый макет. Не нужны две полоски посередине? Вы можете удалить их полностью. Хотите видеть две диаграммы вместо одной? Легко - просто скопируйте элемент DOM и вставьте его куда хотите.

Заключение

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

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

Каков ваш опыт создания прототипов и MVP? Дай мне знать в комментариях. Я планирую вскоре написать следующий пост, так что следите за обновлениями.