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

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

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

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

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

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

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

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

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

Бумажное прототипирование

Плюсы и минусы
Не требуется каких либо специальных знаний и умений.
Быстрая скорость создания, или наоборот медленная.
Возможно оставить пометки (комментарии) где угодно.
Нужно рисовать заново, чтобы что-то поменять местами.
Нет интерактивности

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

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

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

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

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

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

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

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

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

Balsamiq

Balsamiq

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

Principle

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

Moqups

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

InVision

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

Axure

axure

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

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

ПО Вид Цена Экспорт Возможность командной работы Проектирует для Загрузка готовых элементов интерфейса Черновые макеты / каркасы / вайрфреймы Дополнительно
Balsamiq Пробная веб-версия и приложение для MacOS, Windows Бесплатно 30 дней. Далее $9 или купить полностью за $89 По уникальной ссылке Нет Веб и мобильных устройств Да Да Анимация элементов интерфейса из готовой библиотеки, переходы по экранам
Moqups Веб-приложение + мобильное приложение для просмотра
готового дизайна
Бесплатная пробная версия. Неограниченное количество
проектов и возможность комментирования за $ 13 в месяц
PNG, PDF. Google Drive и DropBox. Да Веб и мобильных устройств Нет Да Визуальный дизайн
InVision Веб-приложение Бесплатно По уникальной ссылке Да Android. IOS Макеты Photoshop и Sketch Нет Визуальный дизайн, анимация переходы по экранам, поддерживает жесты
Axure Приложение для Windows и MacOS Бесплатная пробная версия 30 дней. Далее от $29 за
человека в месяц
HTML и PDF. Возможность выгрузить проекты в облако и делиться через уникальные ссылки Есть в платной версии Веб и мобильных устройств Нет Да Анимация, переходы по экранам
Principle Приложение для MacOS Пробная версия две недели, далее $129 Экспорт в видео и gif. Возможность просмотреть прототип
на мобильном устройстве
Нет Веб и мобильных устройств Да Да Анимация. визуальный дизайн, переходы по экранам, поддержка разных типов взаимодействия (drag-and-drop, долгое нажатие, скролл)

 

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
web-revenue.ru
Добавить комментарий