Выбираем инструмент прототипирования
Что такое «инструменты прототипирования?»
Это сервисы, с помощью которых вы можете быстро создать макет будущего дизайна, посмотреть, как он будет выглядеть на разных устройствах и при разном разрешении, поделиться макетами с друзьями, коллегами или заказчиками. Они полезны как при организации серьёзной коммерческой работы, так и просто, если у вас вдруг появилась идея и вам нужно её записать — эти сервисы гораздо удобнее листа бумаги.
Как эффективно ими пользоваться? Каким должен быть прототип?
Лучшими являются те прототипы, которые позволяют быстро переходить от набросков к интерактивному воплощению. Это значит, что:
- У вас не должно уходить много времени на создание макета. Этот процесс должен упрощать вашу работу, а не добавлять новых обязанностей.
- Прототипы должны быть одноразовыми. Они создаются, чтобы донести какую-либо вашу идею до кого-либо: разработчика, пользователя, коллег. Прототип может быть принят либо отвергнут, и в последнем случае у вас не должно возникать чувства, будто уничтожается созданный вами шедевр. И уж точно прототипы не должны создаваться на уровне кода.
- В создаваемом вами прототипе должны быть отражены только основные детали интерфейса, которые подразумевают какое-либо взаимодействие с пользователем.
Как правильно выбрать инструмент?
- Оцените размер вашей команды. Если вы работаете в одиночку, то у вас, вероятно, нет времени прорабатывать дизайн подробно, да оно вам и не нужно — прототип для вас как черновик, на котором вы записали свою идею, чтобы не забыть её. Если вы член небольшой, но сплочённой команды, то у вас, вероятно, есть возможность создать прототип менее, чем за день, но создать его нужно так, чтобы вся команда правильно поняла идею. Если же вы являетесь частью большой организации, то, вероятно, существует необходимость пробиваться в мутной воде корпортативной политики и различных точек зрения на наш прототип. В целом тенденция проста — чем больше команда, тем больше деталей прототипа потребуется.
- Оцените то, насколько обсуждение дизайна будет опираться именно на прототип. Где находятся люди, которым вы будете его показывать? Если они сидят с вами в одном офисе, то у вас будет возможность пояснять детали прототипа самостоятельно, но если эти люди находятся далеко — в другой стране, возможно, даже с другим часовым поясом, то возрастает необходимость создать прототип, который будет описывать себя на 100%.
- Оцените степень интеграции вашей группы в команду, занимающуюся разработкой. Вы являетесь частью команды по разработке, или привлечённой группы, занимающейся консультациями? Если вы часть команды, то сильно ли вы интегрированы с инженерной группой, или вы совершенно отдельный департамент? Группе, которую привлекли со стороны, зачастую приходится отстаивать свой концепт дизайна немного больше.
- Оцените свои финансовые возможности. Спектр цен охватывает диапазон от бесплатного до дорогого. Лучшие решения, как правило, относятся к нижней части среднего ценового диапазона. Супер-дорогие решения (как в отношении времени, так и в отношении цены), как правило, своего не стоят.
1. Pidoco
Pidoco — один из лучших сервисов для прототипирования. Начинающие найдут его удивительно простым для работы, в то время как опытные пользователи найдут в нём много удобных функций, вроде слоёв, шаблонов и большого набора обрабатываемых взаимодействий с пользователем, как, например, жесты, поворот экрана, встряхивание телефона и прочее. Есть возможность поделиться сделанным в виде ссылки, экспорт в PNG.
В Pidoco более 400 элементов интерфейса. Есть возможность просматривать созданные макеты прямо на веб странице, в том числе тестировать взаимодействие.
Стоимость: от 12$ в месяц
2. Moqups
Moqups написан на HTML5 и лишь немногим отличается от Pidoco. Он предоставляет меньше возможностей для проработки интерактивности, зато есть очень удобная фича — возможность привязки элементов интерфейса к сетке. К тому же он дешевле.
Стоимость: от 9$ в месяц
3. Fluid
Ещё одно бразуерное приложение, написанное на HTML5, которое работает по технологии drag-n-drop — Fluid. Он также несложен в освоении, есть возможность предпросмотра своей работы в том виде, в каком она будет в вашем телефоне. Особого внимания заслуживает коллекция элементов интерфейса — у Fluid их более 2000, среди них есть управляющие элементы вроде экранной клавиатуры или кнопок «закрыть», «свернуть» и т.д.
Стоимость: от 12$ в месяц
4. Balsamiq
Вот мы и встретили первое в нашем списке десктопное приложение. Balsamiq будет удобен, если вы хотите быстро и комфортно создать типовый интерфейс, но для чего-то нестандартного он не подойдёт.
Стоимость: 89$ за вечную лицензию
5. UXPin
В UXPin упор сделан, во-первых, на лёгкость и простоту, а во-вторых, это понятно из названия, на опыт взаимодействия. Здесь вы, например, сможете поэкспериментировать со звуком, что является важным шагом для формирования необходимого вам UX у конечного пользователя.
Стоимость: от 19$ в месяц
6. Justinmind
Justinmind Prototyper — ещё одно десктопное приложение. С помощью него вы сможете проработать мельчайшие детали дизайна, именно на это сделан акцент. Если вы работаете небольшой командой или вовсе в одиночку, вам, скорее всего, нужно что-то более простое.
Стоимость: от 29$ в месяц
7. SnapUp
Это ещё одно веб-приложение на HTML5. Сейчас SnapUp находится в стадии разработки, поэтому пока бесплатен для всех. Уже сейчас он смотрится весьма конкурентоспособным — там есть система комментариев и аннотаций, возможность открыть доступ к шаблону по постоянной ссылке и многие другие приятные фичи. Пожалуй, наиболее перспективный проект в нашей подборке.
Стоимость: бесплатная Beta
8. Wireframe
Wireframe хорошо подойдёт для любителей минимализма. Кто сказал, что инструмент для создания шаблона должен быть громоздким и чуть ли не досконально воспроизводить интерфейс? С помощью этого сервиса вы сможете создать и сохранить макет буквально в несколько кликов, хотя он будет очень и очень абстрактным. Wireframe — это своеобразный pastebin в мире инструментов для шаблонирования.
Стоимость: бесплатно, премиум от 15$ в месяц
9. Antetype
Antetype позиционируется как инструмент «от дизайнеров и для дизайнеров». Приложение десктопное, работает только на Mac OS X. Если вы разрабатываете что-то под продукцию Apple, выбирайте его не задумываясь.
Стоимость: 190$ вечная лицензия
10. Подручные средства
Если вы не хотите что-то покупать, скачивать и где-то регистрироваться, то для создания макета может подойти, например, MS PowerPoint. Он, в общем-то, поддерживает и изменение размера слайда, и добавление управляющих элементов, и интерактивность. А если вы купите PowerMockup за 60$, то ваш PowerPoint будет ещё и специально заточен под это.
Ещё один вариант — HTML+CSS. Серьёзно, несложные прототипы можно создавать и руками.