Компания
24,58
рейтинг
25 марта 2012 в 00:41

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



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

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

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

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


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


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



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, каркас, проект интерфейса пользователя и другие чертежи в режиме онлайн с помощью бесплатного программного обеспечения, предназначенного для создания блок-схем.

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

Автор: @Hetmanchuk Dezinerfolio
Айкен
рейтинг 24,58
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Похожие публикации

Комментарии (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
  • 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. Довольно простой инструмент, есть ограниченная бесплатная версия.

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

Самое читаемое Разработка