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

* Поля обязательные для заполнения

ЗАКАЗАТЬ ЗВОНОК
Я согласен на обработку персональных данных в соответствии с политикой конфиденциальности и пользовательским соглашением

* Поля обязательные для заполнения

Инструменты для прототипирования интерфейсов

Многие знают, что прототипы представляют собой схематическое изображение страниц будущего сайта, на которых указаны элементы интерфейса: кнопки, меню, формы для ввода данных, тексты, фотографии, превью товаров или услуг и прочее. Проектирование сайта с помощью прототипа позволяет продумать взаимодействие посетителя с сайтом, исключить ошибки до того, как начнется этап дизайна, сократить число доработок системы, вызванных несоответствием функциональности и цели проекта, оптимизировать сроки разработки проекта. 

439dc5aec62d8e208685565d72cf89e7.jpg

Проектирование сайта является наиболее ответственным этапом разработки. Здесь требуются исследования рынка, клиентов, пользовательской аудитории. Именно на этом этапе закладывается фундамент успешности проекта. Потому так важно уделить этому особое внимание и не пропускать данный этап.

Наша студия создает интерактивные прототипы, используя мощное программное обеспечение – Axure RP - один из известнейших инструментов для прототипирования, любимец проектировщиков и менеджеров. Такой прототип может быстро и наглядно продемонстрировать то, что дизайнер, верстальщик и программист будут воплощать в жизнь на следующих этапах разработки проекта. Это можно сравнить с трехмерной моделью готовящегося к строительству здания. Другими словами, прототип позволяет виртуально побродить по будущему проекту и внести коррективы в структуру, если текущим интерфейсом цель проекта достигается не достаточно быстро. Прототип, подготовленный проектировщиком, в отличие от макетов, подготовленных верстальщиком, не предназначен для разработки, хоть и создается ощущение, словно мы бродим по сайту. 

77e676045adce692cdda530bbc8a100e.jpg

Интерактивный прототип – это, безусловно, очень круто, однако бывают не сложные проекты с типовыми задачами и целями. Мы прибегаем к проектированию в Axure, чтобы решить задачи больших интернет-магазинов со сложным пользовательским сценарием или порталов с большим количеством внутренних страниц. Порой достаточно скетчей и набросков, чтобы спроектировать и оценить удобство будущих интерфейсов. Существует множество простых и доступных инструментов, с помощью которых можно быстро создавать макеты пользовательских интерфейсов, позволяющие передать замысел автора о функциональности, не затрагивая вопросы графического дизайна.

1. UXPin

3b2a3b5a82a88f8eb61a57e69fe0bb04.jpg

Ресурс для создания адаптивных мокапов, инструмент прототипирования с широкими для этого возможностями и большой библиотекой ресурсов и шаблонов.

2. Moqups

a3c6915af79c55510f4c62945f32cbf9.jpg

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

3. Sneakpeekit

46ba67bce6497ea3ba408c50dda0605c.jpg

Приложение предоставляет набор инструментов для генерации прототипов веб-сайтов и создания различных фреймов. Подходит для тех, кто любит проектировать интерфейсы вручную. Иногда полезно порисовать руками, почеркать, дать себе возможность ошибиться и исправиться. Можно скачать шаблон, распечатать его на листе А4 и передать свою идею с помощью ручек и маркеров.

4. WireframeSketcher Studio 

15b6b52b0a451228c60edfa40469dd68.jpg

Программа содержит большую библиотеку шаблонов, есть макеты под все популярные мобильные ОС (iOS, Windows Phone и Android) и даже некоторые веб-фреймворки, например Bootstrap. Интерфейс этой программы очень удобен: наиболее часто используемые функции, такие как группировка элементов и вынос их на передний или задний план, выполняется кнопками на главной панели, а не из меню. Проект может включать в себя несколько «экранов», а внутри каждого экрана элементы интерфейса можно объединять в группы. 

5. FlairBuilder

9b75b77b8e0cce02a9d8eb9be5c3453b.jpg

В библиотеке шаблонов присутствуют элементы для веба и iPhone, но других мобильных ОС нет. Настройка шаблонов производится примитивно, но удобно: при выборе одного из элементов, уже помещенных на лист, рядом с ним появляется несколько кнопок, назначение которых очевидно из пиктограмм. FlairBuilder поддерживает интерактивность. По клику на любой элемент интерфейса можно перейти на другую страницу документа, спрятать/показать или сделать активным/неактивным какой-либо элемент макета, перелистывать табы, изменять положение и размер элементов интерфейса.

6. UXToolbox 

02a57c8b0c8359bc0c29fb34b41411bb.jpg

К сожалению, библиотека шаблонов довольно скудна. С другой стороны, в ней есть специфические элементы интерфейса из iOS и Android. В программах, способных генерировать только схематические изображения, многие элементы (например, кнопки или полосы прокрутки) изображаются одними и теми же шаблонами для макетов веб-сайтов и мобильных приложений. Но если необходимо создать более реалистичный макет, такой подход неприемлем. Обратить внимание на эту программу стоит тем, кто хочет быстро создавать аккуратные макеты, которые можно вставить не только в ТЗ разработчика, но и в презентацию.

7. И наконец, мой любимый Balsamiq Mockups

dab80e546edc1b669d8a0ee0db4a156a.jpg

Все программы хороши по своему, но мне милее именно эта. Я выбрала ее для себя, чтобы быстро создавать скетчи будущих страниц типовых проектов, согласовывать функционал с владельцем будущего проекта, вставлять в техническое задание и передавать далее на этап дизайна. Также ставя задачу другому дизайнеру на разработку, я зачастую прибегаю к наброскам с помощью этой программы. Balsamiq доступен для всех операционных систем, и его можно интегрировать с различными системами совместной работы, включая Jira, Confluence и Google Drive. Также есть онлайн-версия Balsamiq. 

Здесь есть большая библиотека шаблонов, причем почти любой элемент интерфейса можно настроить под конкретный сценарий. Например, добавив на форму выпадающее меню, можно задать, какое из его полей должно быть подсвечено как выбранное. Полученные макеты можно сохранять в собственном формате программы для дальнейшего редактирования либо экспортировать в PNG или PDF. Также есть режим презентации макета. Очень рекомендую эту программу всем, кто хочет донести свои мысли до разработчика или заказчика.

Поделиться в соцсетях