Вайрфрейм, мокап и прототип

Вайрфрейм, мокап и прототип

Различают 3 вида дизайн‑макетов: вайрфрейм, мокап и прототип. Ключевой различие между ними — разная стадия готовности/проработанности.

На стадии "аналитики" проекта, когда целевое решение ещё не ясно, разрабатываются «наброски» будущей системы, их называют «вайрфреймами/эскизами».

Вайрфрейм позволят отобразить:

информационную структуру будущей системы,

базовые группы контента,

базовую логику взаимодействия системы с пользователем (визуализация некоторых use cases).

После этого в работу подключается дизайнер/проектировщик интерфейсов/разработчики и детализируют его, прорабатывая вайрфрейм до деталей с учетом компонентов, цветов, колористики, формы кнопок, интерактива и т. п. В увеличением уровня детализации вайрфрейм плавно становится мокапом, а затем прототипом.

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

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

Чтобы создавать UI- и UX-дизайн, нужно уметь пользоваться графическими редакторами и другими сервисами для презентации идей коллегам и заказчику. Вот базовый набор инструментов, который пригодится дизайнеру интерфейсов:

● Figma

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

● Sketch

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

В Sketch удобнее всего работать с коллажами и несложной графикой

● Adobe XD

Графический редактор с готовыми шаблонами и наборами интерфейсов для ОС Apple и разных тематических сайтов. При этом он интегрируется с другими сервисами Adobe, позволяя работать с фото, иллюстрациями и анимацией в рамках одного проекта. Разработчики могут приступить к вёрстке готовых макетов здесь же, чтобы создать прототип сайта или приложения.

Главное преимущество Adobe XD — большой набор инструментов и интеграция с другими сервисами Adobe. Поэтому здесь удобно работать со сложной графикой, фото и анимацией

● Miro, FigJam и другие онлайн-доски: позволяют создавать отдельные блок-схемы, чтобы наглядно представить структуру будущего сайта или приложения. В них можно управлять проектом, проводить мозговой штурм с командой, обмениваться идеями, хранить промежуточные версии макетов, передавать их разработчикам и UX-копирайтерам.

В Miro можно создавать интерактивные доски для всей команды проекта, чтобы выкладывать дизайн-макеты, обмениваться идеями и правками, добавлять текстовый контент

Сейчас Miro работает для российских аккаунтов только в рамках тех подписок, которые были оформлены до марта 2022 года. Доступна бесплатная версия, в которой можно создавать до трёх онлайн-досок. Сервисом FigJam можно пользоваться в рамках команды, если подписка оформлена на персональный аккаунт. Право на редактирование есть только у одного участника.

• Axure RP

• Balsamiq Mockups

• Lunacy итд