Важный навык проектировщика — владение несколькими инструментами и умение их применить в нужной ситуации. Расскажу о тех инструментах, которые я применяю для прототипирования и ситуациях, при которых инструменты актуальны.

1. Бумага и ручка (доска и маркер)

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

Когда применять:

• Обсуждение с заказчиком.
• Обсуждение с командой (доска и маркер) .
• Предварительное проектирование (прототипирование).

Как применять:

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

«Как это должно работать?» — с таким вопросом ко мне часто заходят программисты. Я достаю ручку и бумагу, прорисовываю, прописываю всё на бумаге, рассказывая при этом вслух требования, и отдаю листок программисту. Человек такую подачу пояснений запоминает гораздо лучше, чем длинное техническое задание или рассказ без рисунка.

Плюсы:

• Скорость.
• Наглядность, ведущая к лучшему запоминанию.
• Отсутствие зависимости от связи и электричества.

Минусы (много):

• Не накапливаются электронные знания по проекту (но можно сканить/фоткать).
• Понятно только тому, кому объяснял. Кто отсутствовал при объяснении, тот может не понять зарисовку на бумаге.
• Малый цикл жизни — через месяц не все детали вспомнятся.
• Через год не вспомнишь сходу, о чём речь в зарисовке. Вносить изменения сложно.
• Одноразовый прототип.

2. wireframe.cc

Часто достаточно лишь концептуального макета, в котором не проработаны мелкие детали (wireframe — каркас). Для каркасов я использую инструмент wireframe.сс — это веб-сервис, в котором без регистрации и оплаты можно быстро набросать каркас. Каркас при этом можно сохранить: присваивается уникальная ссылка, по которой он доступен.

Когда применять:

• Макеты для спецификаций и официальных заданий/отчётов.
• Концепт для обсуждения с заказчиком, командой.
• Пояснение для задачи.

Плюсы:

• Скорость.
• Простота использования.
• Минимализм.

Минусы:

• Для некоторых макетов не хватает элементов: нет иконок, цвета ограничены.
• Если не нажимал Сохранить, то закрытие вкладки браузера или перезагрузка лишат тебя наработанного.

3. draw.io

Интерактивный прототип требуется гораздо реже, чем проектировщики пытаются это показать. Чаще можно обойтись «плоским» прототипом и пояснениями к нему. Когда мне нужен проработанный прототип (с акцентами на мелочах) для 1-2 страниц, тогда я использую сервис draw.io (через Гугл.Диск). Сервис позволяет сделать прототип интерфейса, сохранить его в виде картинки, pdf или html. Есть даже элементы интерактива (на отдельные элементы можно ставить ссылки). Всё бесплатно.

Когда применять:

• Когда страниц (фрагментов страниц) немного. Если много, то лучше Axure.
• Когда важны детали и мелочи при постановке задачи.
• Когда заказчик лучше понимает не каркасы, а почти итоговый вид.

Плюсы:

• Готовые библиотеки элементов (есть bootstrap, материал дизайн).
• Возможность управлять внешним видом интерфейсов — при желании можно сделать прототип финального вида.
• Интеграция с Гугл.Диск.
• Сохранение изменений в фоновом режиме.
• Многопользовательская работа.

Минусы:

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

4. Axure

Axure позволяет делать интерактивные адаптивные прототипы, анимацию, показывать логику и зависимость внешнего вида, от ранее выполненных действий. Я делал прототипы, в которых интерфейс зависел от того, какие данные пользователь вводил на форме входа в личный кабинет. Возможности очень широкие, использую Axure с 2009 года (обновляясь, конечно).

Axure позволяет сделать в том числе всё то, что можно сделать в wireframe.cc и draw.io, но порой быстрее и удобнее закрутить шуруп отвёрткой, чем доставать для этого шуруповёрт. Axure платный.

www.axure.com — там можно уже более детально познакомиться с инструментом.

Когда применять:

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

Плюсы (самые тяжёлые):

• Библиотеки элементов.
• Возможность встроить средства сбора статистики (Яндекс.Метрика, например) — после этого можно анализировать поведение фокус-группы.
• Можно выгрузить итог в виде проекта, загрузить на сервер и дать ссылку.
• Автогенерация спецификации: если верно именовать элементы, заполнять комментарии к элементам.
• Возможность сделать прототип, который не требует больше никакой дизайн-проработки.

Минусы:

• Порог вхождения: чтобы освоить все функции, придётся поучиться.
• Инсталлируемое приложение.

Резюме

Для каждого представленного инструмента есть аналог или даже несколько — используйте те, которые удобны вам. Смысл не в инструментах, а в умении использовать тот инструмент, который максимально быстро способен качественно решить возникшую задачу. Быстрое решение задачи — быстрое движение проекта вперёд. Копошение и оттачивание деталей не всегда оправдано.

Материалы по теме:

1. Axure-прототип у Собаки Павлова, который имеет дизайнерский вид
2. Другие инструменты МГ