Прототипирование – понятие, применение

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

Источник

Какие проблемы решает прототип?

Прототипы используются для выяснения и решения потребностей клиента. Цели этой стадии разработки следующие:

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

А еще прототип – это легко. Заниматься планированием можно даже на бумажках и салфетках.

Три типа прототипирования

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

Низкая детализация

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

Средняя детализация

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

Высокая детализация

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

Стадии разработки прототипа

Удачный прототип можно сделать за 6 шагов.

Обсуждение идеи с заказчиком

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

Старая версия выполняет свою функцию, но у новой есть следующие преимущества:

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

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

• Подкрепляйте тейк результатом. Пример: “Если на первый план вывести ключевые услуги, клиенту будет проще понять, чем вы занимаетесь. Для этого предлагаю…”
• Больше слушайте и спрашивайте. Разберем на двух ситуациях: в одной дизайнер интересуется проектом и пытается понять, что можно сделать для привлечения денег. В другой дизайнер постоянно закатывает глаза и говорит: “Это неправильно, у меня 10 лет опыта работы, вот как нужно сделать”. Пример утрирован, но никто не любит, когда его выставляют дураком.
  
• Записывайте и резюмируйте ваш разговор.
  
• При выполнении большого количества типовых заказов время на переговоры лучше сокращать. Для этого пропишите план или сделайте бланк с интересующими вас вопросами.
  

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

По возможности нужно узнать как можно больше о пользователях сайта. Вот вопросы на которые нужно ответить (разберем на примере сайта):

• Какая у сайта аудитория?
• Что ей нужно?
  
• Чего нет у конкурентов?
  
• Почему этого нет у конкурентов?
  
• Какие правила вы будете применять при создании сайта?
  
• Зачем клиенту нужен именно ваш сайт?
  
• Почему именно на этом сайте нужно задержаться?
  
• Как будут вести себя клиенты на сайте?
  

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

Делаем эскиз (прототип низкого качества)

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

Создание цифрового варианта

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

Подготовка дизайна

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

Обсуждения и улучшения

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

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

Будем затрагивать создание сайтов, программ и 3D-объектов:

• Для создания сайтов используйте Figma. Инструмент предназначен для веб-дизайнеров. Можно делать макеты, обозначать навигацию стрелочками, писать комментарии и работать группой над одним проектом. Если Figma недоступна - используйте Pixso. Функционал почти такой же, но кроме этого есть поддержка русского языка.

• Работаете на Mac? Рекомендуем Sketch. Он подходит для создания дизайна проекта. Из особенностей:
  - Большое пространство для создания страниц сайта или программы.
  - Возможность векторного редактирования.
  - Поддержка большого количества библиотек.
  - Десятки функций в панели инструментов.
  
  
• Adobe XD. Похож на Sketch, иногда их даже сравнивают. Может интегрировать рисунки из других программ Adobe. Главное преимущество - инструмент прототипирования. Вам будет проще сделать план сайта без добавления цветов и прочих лишних элементов.
  

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

1. Создается 3D-модель.
2. Изготавливается прототип.
   
3. Проводится тестирование с последующей корректировкой.
   
4. Печатается тестовая партия.
   
5. Если все прошло успешно - начинается производство. Если нет - перепроверка и корректировка.
   

Программ для создания 3D-моделей много. Но самой доступной является Blender 3D. Кратко о преимуществах:

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

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

Вам могут не понравиться программы, показанные в топе, поэтому вот несколько критериев, по которым мы советуем выбирать софт:

• Он должен быть популярным. Если вы устроитесь на работу и будете заниматься прототипами, то лучше выбирать известную программу. Кроме того, для распространенных приложений вы найдете больше пособий в интернете.
• Первая программа, которую вы начали изучать, должна закрывать крупнейшую потребность. Если вы делаете прототипы сайтов, сперва начинайте с Figma или ее аналогов. Только после этого переходить на Photoshop, Illustrator и т.д.
  
• Соберите набор, который поможет выполнить любую потенциальную задачу. Сюда может войти Figma, Photoshop, сервисы для подбора цвета и т.д.
  

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