Pencil

Pencil - удобный open-source бесплатный инструмент прототипирования для создания mockup'ов. Подходит для создания любых пользовательских интерфейсов, но мы будем рассматривать создание веб интерфейсов.

Может быть установлен как плагин до firefox, либо как standalone приложение (в таком случае firefox у меня все равно поставился по зависимостях).

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

Разберемся с установкой и покажем пример использования.

Установка:

Windows - скачиваем и устанавливаем в пару кликов,

Debian/Ubuntu: скачиваем пакет:

wget https://github.com/prikhi/pencil/releases/download/v2.0.14/pencil-2.0.14-ubuntu-all.deb

устанавливаем:

sudo dpkg -i pencil-2.0.14-ubuntu-all.deb

ArchLinux:

yaourt -S pencil

Можем теперь запустить Pencil

Элементов интерфейса просто огромнейшее количество. (Единственное, что не стоит останавливаться на вкладке web, она довольно скудная. Но можно использовать элементы с других вкладок (например, для кнопок))

Для примера создадим mockup этого блога. Нам понадобятся элементы из вкладок 'Basic Web Element' и 'Desktop - Sketchy GUI'.

Элемент Html texts удобен тем, что может генерировать Lorem Ipsum (Правая кнопка мыши -> Actions) При добавлении єлементов сразу появляется линейка для выравнивания (тоже удобно):

Новые страницы создаем, кликнув правой кнопкой мыши по панели вкладок, либо по кнопке "New page". Страницы можно соединять, создавая некоторое подобие поведения. (Если у вас более одной страницы, можно кликнуть по ссылке правой кнопкой и выбрать пункт "Link to"). Эта фича станет видимой, если экспортнуть файл, к примеру, в pdf или html формат.

По завершении получаем mockup главной странички этого блога:

Скачать pencil проект, описаный в заметке.

Для прототипирования web-сайтов очень удобно использовать набор bootstrap-элементов: