В прошлых уроках мы провели анализ конкурентов, нашли лидеров ниши, построили гибридную структуру сайта и составили таблицу КФ, теперь на основе этих данных на нужно построить макет сайта (прототип). И сегодня будем говорить об одно из важных этапов разработки сайтов — прототипировании. В данной статье подробно разберем, что такое прототип, для чего он нужен, какие методы и инструменты использовать при создании прототипа web сайтов.
Что такое прототипы простыми словами и для чего они нужны
В веб-дизайне прототип – это схема страницы сайта в виде эскиза (наброска), где отображены основные структурные элементы будущего сайта: банеры, меню, формы, кнопки, …. Прототип может быть, как динамичным html-документом, так и статичным изображением.
- А прототипирование сайта — это процесс создания прототипа.
- Делается это, чтобы:
- Продумать расположение блоков / элементов дизайна.
- Правильно организовать навигацию на сайте.
- Продумать возможности взаимодействия посетителя с сайтом.
- Увидеть наглядно концепцию будущего сайта.
- Экономит время и бюджет. Делаем набросок — отдаем дизайнеру, объясняем основные концепции и получаем готовый дизайн с минимальным количеством доработок.
Виды и методы прототипирования
Рассмотрим самые популярные и их плюсы / минусы.
Бумажное прототипирование — рисуем на бумаге.
Прототипирование при помощи графических редакторов.
Прототипирование при помощи сервисов и специальных программ
Здесь минусов я не вижу, если только все равно требуется немного времени на создание и обучение работе с ПО или сервисом — хотя все можно сделать и методом тыка, да и многое платное (но есть пробный периоды).
А вот плюсов тьма: все выше перечисленные, только более удобно, быстро и интерактивно.
Лучшие инструменты для прототипирования
Существует множество сервисов и программ для прототипирования, но мы рассмотрим только самые популярные.
Balsamiq
Быстрый и простой инструмент для создания каркасов сайтов.
Principle
Приложение для MacOS, позволяет легко разрабатывать анимированные и интерактивные пользовательские интерфейсы. Независимо от того, разрабатываете ли вы поток много экранного приложения или новые взаимодействия и анимацию, Principle поможет вам создать дизайн, который выглядит и ощущается потрясающе.
Moqups
Оптимизированное веб-приложение, которое помогает создавать каркасы, макеты, диаграммы и прототипы и совместно работать над ними в режиме реального времени.
https://youtube.com/watch?v=hiC5XgK9ABQ
InVision
Позволяет создавать кликабельные интерфейсы. Так вы сможете продемонстрировать основную функциональность вашего проекта и внести изменения на ранней стадии.
Axure
Позволяет создавать кликабельные и адаптивные прототипы для ПК и мобильных, добавлять готовые средства из библиотеки — выпадающие меню, popup, и другие формы.
Сравнительная таблица инструментов
| ПО | Вид | Цена | Экспорт | Возможность командной работы | Проектирует для | Загрузка готовых элементов интерфейса | Черновые макеты / каркасы / вайрфреймы | Дополнительно |
| [mask_link href=»https://balsamiq.com/» target=»_blank»]Balsamiq[/mask_link] | Пробная веб-версия и приложение для MacOS, Windows | Бесплатно 30 дней. Далее $9 или купить полностью за $89 | По уникальной ссылке | Нет | Веб и мобильных устройств | Да | Да | Анимация элементов интерфейса из готовой библиотеки, переходы по экранам |
| [mask_link href=»https://moqups.com/» target=»_blank»]Moqups[/mask_link] | Веб-приложение + мобильное приложение для просмотра готового дизайна |
Бесплатная пробная версия. Неограниченное количество проектов и возможность комментирования за $ 13 в месяц |
PNG, PDF. Google Drive и DropBox. | Да | Веб и мобильных устройств | Нет | Да | Визуальный дизайн |
| [mask_link href=»https://www.invisionapp.com/» target=»_blank»]InVision[/mask_link] | Веб-приложение | Бесплатно | По уникальной ссылке | Да | Android. IOS | Макеты Photoshop и Sketch | Нет | Визуальный дизайн, анимация переходы по экранам, поддерживает жесты |
| [mask_link href=»https://www.axure.com/» target=»_blank»]Axure[/mask_link] | Приложение для Windows и MacOS | Бесплатная пробная версия 30 дней. Далее от $29 за человека в месяц |
HTML и PDF. Возможность выгрузить проекты в облако и делиться через уникальные ссылки | Есть в платной версии | Веб и мобильных устройств | Нет | Да | Анимация, переходы по экранам |
| [mask_link href=»https://principleformac.com/» target=»_blank»]Principle[/mask_link] | Приложение для MacOS | Пробная версия две недели, далее $129 | Экспорт в видео и gif. Возможность просмотреть прототип на мобильном устройстве |
Нет | Веб и мобильных устройств | Да | Да | Анимация. визуальный дизайн, переходы по экранам, поддержка разных типов взаимодействия (drag-and-drop, долгое нажатие, скролл) |
