16 инструментов для создания прототипов

http://www.dezinerfolio.com/2011/02/21/14-prototyping-and-wireframing-tools-for-designers
  • Перевод


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

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

Спонсор перевода: Айкен

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


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


В этой статье мы рассмотрим несколько новых решений по построению прототипов и каркасному моделированию.



1. Omnigraffle




Тип: Приложение OSX
OmniGraffle поможет вам быстро создать потрясающие графические документы путем соединения линий с фигурами, даже если они перемещаются, и предусматривает инструменты моделирования, файлы импорта и экспорта Microsoft Visio, а также простейшее построение диаграмм всего одним щелчком мыши.

2. ConceptDrawPro




Тип: Приложение Windows
ConceptDraw PRO — это полнофункциональная платформа диаграммного изображения, которая позволяет отображать, передавать и динамично представлять информацию.

3. Pidoco




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

4. BalsamiqMockups




Тип: Приложение AIR
Balsamiq Mockups — это инструмент построения каркаса, разработанный специально для воспроизведения проектов, нарисованных от руки, позволяя быстро и легко обновить свойства программ, таких как Microsoft Word.

5. Mockingbird




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

6. Pencil




Тип: Дополнение Firefox
Проект Pencil предназначен только для построения свободного и открытого инструмента создания диаграмм и прототипов графического интерфейса пользователя, который может использовать каждый.

7. iPlotz




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

8. ProtoShare




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

9. HotGloo




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

10. MockFlow




Тип: Онлайн
MockFlow — это проектные, объединенные (в реальном времени) модели интерфейсов пользователя для вашего программного обеспечения и веб-сайтов.

11. Gliffy




Тип: Онлайн
Бесплатное программное обеспечение для построения каркаса Gliffy дает возможность простого создания каркасов веб-сайтов и передачи веб-моделей. Вы можете также экспортировать свой каркас для будущего использования в других приложениях.

12. Cacoo




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

13. Creately




Тип: Онлайн / Flash-Flex
Мощный и простой для использования диаграммный онлайн-инструмент, который работает прямо в вашем веб-браузере. Благодаря интуитивному интерфейсу пользователя и встроенным свойствам совместной работы, Creately облегчает работу с командами.

14. LovelyCharts




Тип: Онлайн
Lovely Charts — это приложение для создания диаграмм, позволяющее создавать профессиональные диаграммы всех видов, такие как блок-схемы, карты сайтов, бизнес-процессы, организационные структуры, каркасы и многое другое…

15. Mockup Builder




Тип: Онлайн / Silverlight
Mockup Builder — это новый взгляд на решение старой проблемы создания прототипов и предоставления набросков клиентам.

16. LucidChart




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

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

Айкен 22,90
Компания
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Похожие публикации
Комментарии 33
  • +11
    Поделюсь ссылкой на неупомянутый Axure. Инструмент офлайновый. (axure.com)
    • +5
      Вообще удивлен, почему автор пропустил столь замечательное ПО, как Axure RP. С плагинами (с оф. сайта) перекроет любой иной аналог.
      • +4
        На мой взгляд, самое лучшее решение для прототипирования.
        • 0
          Оно конечно классно, но лучше 10$ в месяц какому-нить saas типа gomockingbird платить, чем 600$ за год с продлением в 150$ axure'у.
          • 0
            Для фрилансеров и небольших компаний да, но в случае с более крупными компаниями решение вполне приемлемое по цене.
        • 0
          Denim — старый, но интересный. Java.
          dub.washington.edu:2007/denim/
          • 0
            На вид страшненькое… Надо будет скачать для под Мак глянуть.
          • +3
            В свое время перепробовал почти все эти инструменты. К сожалению сделать с их помощью более менее функциональный интерфейс очень непросто. ( в качестве оценивающего примера брал гугломыло и пытался сделать его макет)

            Особенно непросто в плане: сделали первую версию, попробовали, поняли проблемы, переделываем. в 90% случаев проще с 0 сделать новый макет, чем переделать старый.

            В итоге остановился на Axure, как на самом эффективном с точки зрения затрат времени. При этом основное правило — делать макеты как можно более «тупо». То есть не пытаться использовать встроенные в продукт возможности псевдопрограммирования + полностью забивать на визуальные эффекты, только «поведение» гуя. Экономится масса времени, особенно при изменении макета
            • 0
              Pencil разве совместим с последними версиями фокса (так то инструмент был неплохой)
              • +4
                Pencil работает и как самостоятельное приложение на базе XULRunner.
                Считаю такой вариант более правильным чем дополнение к браузеру.
                • +1
                  Отлично работает с xulrunner 11.0-1 из 11го FF.
                • 0
                  Перебровал почти все, упомянутое в статье. Остановился на FlairBuilder. Рекомендую!
                  • 0
                    Спасибо за ссылку! отличная штука, остановлюсь пожалуй тоже на нем.
                  • +5
                    Пожалуйста, поделитесь названиями и ссылками на достойные инструменты, не упомянутые в этой статье нашими «забугорными» коллегами.


                    Я это тут оставлю, пусть полежит

                    habrahabr.ru/post/132403/
                    habrahabr.ru/post/70001/
                    • +4
                      Вы промптом переводили что ли?
                      Проект Pencil предназначен только для построения свободного и открытого инструмента создания диаграмм и прототипов графического интерфейса пользователя, который может использовать каждый.


                        • +1
                          FrameBox. Неоднократно упоминался на хабре ранее.
                          • 0
                            Origramy. Мелкий онлайн сервис, но можно встроить в свой сайт.
                            • 0
                              И почему нет самого вменяемого online-инструмента aka tiggzi?
                              Это лучшее из всего, что пробовал. Есть версия для mobile UI. Цена на него умеренная :)
                                • 0
                                  Почему-то игнорируется Adobe Fireworks. По мне, так лучший инструмент на сегодняшний день. В нем можно легко прототипеть даже давольно крупные проекты и сразу просматривать их в браузере. Можно связать с Catalyst, для большей интерактивности проекта. Можно сверстать прямо с него, если понадобиться.
                                  • 0
                                    Возможно потому, что он «не подъемный» для менеджеров проектов? И если говорить о цене продукта, то тоже как бы, она кусается.
                                    • 0
                                      По цене почти в 2 раза дешевле вышеупомянутой Axure, освоить FW не особо сложно
                                    • 0
                                      А как там с интерактивностью?
                                      • 0
                                        С интерактивностю там всё хорошо, но он больше подходит дизайнерам для детальных прототипов, нежели менеджерам для интерактивных скетчей.
                                    • 0
                                      А у нас все в ms Visio с guuui www.guuui.com/issues/02_07.php делается
                                      • 0
                                        Любителям тач-интерфейсов я бы порекомендовал iMockups для айпада — www.endloop.ca/imockups/
                                        • 0
                                          GUI Machine — инструмент прототипирования, разработанный в России. Подходит для создания реалистичных интерактивных прототипов, но не для схематичных эскизов и скетчей. Обзор на хабре
                                          • 0
                                            Использовал Axure, Pencil proj. Сейчас остановился на Balsamiq, считаю его одним из самих лучших тузлов для ваерфрейминга.
                                            Из плюсов:
                                            большая библиотека компонентов (расширяемая сообществом)
                                            достаточно легко начать проект, как с нового листа, так и править старые
                                            так же нравится что я могу забить на всякие мелочи и сосредоточится на главном, что никогда не получалось с Axure
                                            ну и кросс-платформенность тож плюс.
                                            Минусов хватает, но я на их закрываю глаза…
                                            • 0
                                              карандаш или ручка + фотоаппарат или сканнер.
                                              на большинстве уровней имхо это гораздо более гибко, быстро и т.п.
                                              • 0
                                                LucidChart удобная штука. Недавно очень пригодилась для блок-схемы, когда не было времени скачивать соответствующее ПО. А тут только зарегистрироваться достаточно и ты уже можешь что-то набрасывать.
                                                • 0
                                                  Pencil кстати не только как дополнение к FX, но почему то это не упомянули
                                                  • 0
                                                    Время от времени, когда нужно набросать вайрфрейм, пользуюсь Ninjamock. Довольно простой инструмент, есть ограниченная бесплатная версия.

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

                                                    Самое читаемое