Прототипирование сайта

В прошлых уроках мы провели анализ конкурентов, нашли лидеров ниши, построили гибридную структуру сайта и составили таблицу КФ, теперь на основе этих данных на нужно построить макет сайта (прототип). И сегодня будем говорить об одно из важных этапов разработки сайтов — прототипировании. В данной статье подробно разберем, что такое прототип, для чего он нужен, какие методы и инструменты использовать при создании прототипа web сайтов.

Что такое прототипы простыми словами и для чего они нужны

В веб-дизайне прототип – это схема страницы сайта в виде эскиза (наброска), где отображены основные структурные элементы будущего сайта: банеры, меню, формы, кнопки, …. Прототип может быть, как динамичным html-документом, так и статичным изображением.

• А прототипирование сайта — это процесс создания прототипа.
• Делается это, чтобы:
• Продумать расположение блоков / элементов дизайна.
• Правильно организовать навигацию на сайте.
• Продумать возможности взаимодействия посетителя с сайтом.
• Увидеть наглядно концепцию будущего сайта.
• Экономит время и бюджет. Делаем набросок — отдаем дизайнеру, объясняем основные концепции и получаем готовый дизайн с минимальным количеством доработок.

Виды и методы прототипирования

Рассмотрим самые популярные и их плюсы / минусы.

Бумажное прототипирование — рисуем на бумаге.

Прототипирование при помощи графических редакторов.

Прототипирование при помощи сервисов и специальных программ

Здесь минусов я не вижу, если только все равно требуется немного времени на создание и обучение работе с ПО или сервисом — хотя все можно сделать и методом тыка, да и многое платное (но есть пробный периоды).

А вот плюсов тьма: все выше перечисленные, только более удобно, быстро и интерактивно.

Лучшие инструменты для прототипирования

Существует множество сервисов и программ для прототипирования, но мы рассмотрим только самые популярные.

Balsamiq

Быстрый и простой инструмент для создания каркасов сайтов.

Principle

Приложение для MacOS, позволяет легко разрабатывать анимированные и интерактивные пользовательские интерфейсы. Независимо от того, разрабатываете ли вы поток много экранного приложения или новые взаимодействия и анимацию, Principle поможет вам создать дизайн, который выглядит и ощущается потрясающе.

Moqups

Оптимизированное веб-приложение, которое помогает создавать каркасы, макеты, диаграммы и прототипы и совместно работать над ними в режиме реального времени.

InVision

Позволяет создавать кликабельные интерфейсы. Так вы сможете продемонстрировать основную функциональность вашего проекта и внести изменения на ранней стадии.

Axure

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

Сравнительная таблица инструментов