Moqups на русском


простой редактор для создания прототипов сайтов и приложений

Moqups — это бесплатное веб-приложение для разработки макета сайта или мобильного приложения.

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

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

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

Интерфейс редактора Moqups

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

Фрагмент интерфейса сервиса Moqups

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

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

Сохранение проекта в Moqups

Результаты своей работы можно сохранить в библиотеке сервиса для продолжения работы над ним в дальнейшем. Законченные проекты вы сможете экспортировать в формате PDF или PNG на свой компьютер или в облачное хранилище Google Drive и Dropbox. Если же вы хотите продемонстрировать созданный вами прототип в Интернете, то к вашим услугам специальная ссылка для распространения.

В целом, Moqups представляет собой простой, бесплатный и чрезвычайно удобный сервис, с помощью которого вы сможете буквально за считанные часы набросать макет своего цифрового продукта. Да, здесь нет возможности совместной работы и арсенал элементов можно было бы расширить, зато для его использования не требуется изучать многостраничные инструкции и можно сразу приступать к делу. Так что рекомендуем вам это веб-приложение к применению.

te-st.ru

11 бюджетных инструментов дизайнера для создания интерфейсов и макетов

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

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

Сейчас мы рассмотрим 11 сервисов для прототипирования, часть из которых бесплатны, а другая часть — с весьма бюджетными для данной категории программ ценниками.

PowerMockup — плагин для PowerPoint

PowerMockup — это плагин, превращающий Microsoft PowerPoint в инструмент для прототипирования. Он добавляет в PowerPoint новую панель, содержащую сотни элементов и значков, которые можно с легкостью перетащить на слайд.

PowerMockup работает с Office 2007, 2010 и 2013. Однопользовательская лицензия на PowerMockup стоит $59,95; стоимость лицензии для рабочей группы зависит от количества человек в ней.

Moqups — онлайн-инструмент для создания макетов и прототипов

Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.

Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.

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

Fluid UI — средство разработки прототипов для  iOS- , Android- и  Windows приложений

Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.

Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.

Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования

Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки.

Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.

Axure RP

Цены на это ПО начинаются с $289 за стандартную лицензию. Конечно, такая цена весьма велика. Однако, набор функций программы вполне оправдывает цену для некоторых категорий пользователей.

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

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

Axure — это десктопное ПО, доступное для Mac OS X и Windows.

Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash

Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.

Продуктом, выпущенным в 2008 году силами одного программиста, в настоящее время пользуются десятки тысяч клиентов. Команда сервиса выросла до 11 штатных сотрудников.

Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.

Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.

Pencil — инструмент для прототипирования с открытым кодом

Pencil — инструмент с открытым кодом для создания GUI-макетов и прототипов. Содержит большое количество встроенных фигур, начиная от элементов общего назначения и элементов блок-схем до элементов управления пользовательских интерфейсов (речь как о десктопных приложениях, так и о мобильных).

Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.

UXToolbox — инструмент для прототипирования под Windows

С помощью UXToolbox вы сможете создавать макеты и  интерактивные прототипы для мобильных приложений, веб-сайтов и десктопного ПО. 

Что интересно, программа позволяет в один клик переключаться между скетчем и попиксельно-выверенным прототипом.

После того, как вы закончите работу над проектом, вы сможете экспортировать макет в формат HTML, PNG, XML и Word или распечатать материалы для рабочей группы.

UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.

Mockups.me — инструмент для создания пользовательских интерфейсов

Mockups.me очень похож на Balsamiq Mockups, но имеет ряд преимуществ. В частности у Mockups.me есть приложения для IOS и Android. Кроме того, Mockups.me включает в себя встроенные коммуникационные системы для сбора обратной связи через аннотации и комментарии.

Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.

Live Wires — приложение для создания прототипов под iPad

Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов  приложений для iPhone и iPad.

Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.

Прототипы могут быть экспортированы по электронной почте а затем импортированны на другое утсройство.

Live Wires сейчас доступен по специальной начальной цене в $9,99.

HotGloo

Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.

Резюме

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

Использовали ли вы какой-то из них? Если да, пожалуйста, поделитесь своим опытом в комментариях.

lifehacker.ru

от макета, собранного на скорую руку, до полнофункциональных прототипов / Хабрахабр

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

Каждый проект по-своему уникален. Особое значение имеет то, что инструменты для создания прототипов могут помочь вам в решении любой задачи.

Сегодня я перечислил несколько лучших инструментов, существующих в индустрии.

Эти инструменты используют все многообразие различных методов по созданию прототипов. Они помогут вам сэкономить время и создать наилучший полнофункциональный прототип.

InVision

InVision поможет вам с любым веб- или мобильным проектом. Не важно для какой операционной системы создается проект – iOS или Android, данный инструмент работает с ними обеими. Также InVision рассчитан на работу в команде. С его помощью можно с легкостью работать над проектом и обмениваться идеями совместно с другими членами вашей команды.

Marvel

Marvel – это еще один крупный игрок на рынке инструментов по созданию прототипов. Он позволяет вам преобразовать ваши макеты, дизайны и наброски в прототипы мобильных и веб-приложений или даже в прототип приложения для Apple Watch.

Proto

Proto.io – это превосходный инструмент, который позволяет создавать полностью интерактивные прототипы мобильных приложений. Вы сможете создавать интерактивные высокоточные прототипы, которые будут выглядеть и работать именно так, как должно работать ваше приложение. И при этом данный инструмент не требует от вас навыков написания кода.

Moqup

Moqups – это еще один широко известный инструмент. Но он немного отличается от остальных. Платформа основана на HTML5, она является прекрасным инструментом для создания макетов с масштабируемой векторной графикой (SVG), которые не зависят от разрешения экрана.

Fluid

Fluid – это инструмент для создания прототипов мобильных приложений. Существует множество обзоров данного онлайн-инструмента, и многие пользователи говорят, что он очень быстро работает, удобен для пользователя и интуитивно понятен.

Prott

Prott – это инструмент для быстрого создания прототипов и для совместной работы. Он берет ваши идеи из первых набросков и переносит их в интерактивный прототип, который работает, как настоящее приложение. Также Prott является превосходным инструментом для создания дизайна и взаимодействия с другими членами команды.

Flinto

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

POP

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

Pixate

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

Axure

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

Framer

Framer – еще один известный инструмент. Он может быть использован для создания прототипов для iOS, Android, настольных компьютеров и веба. С использованием Framer вы сможете придумывать взаимодействия и анимацию. Вы можете интегрировать данный инструмент с Photoshop или приложением Sketch.

Webflow

Если вы хотите быстро создавать прототипы, то Webflow – это не лучшее решение. Однако он предстает во всей красе, когда прототип уже завершен. Вы можете очень быстро сделать из финального прототипа рабочий продукт всего лишь за несколько простых кликов. Также данный инструмент позволяет использовать CMS для ваших прототипов.

Mockplus

У Mockplus есть одна прекрасная особенность – он невероятно быстро работает! В основном Mockplus используется для настольных компьютеров, но он может быть с легкостью использован также и для мобильных или веб-проектов. Понятный интерфейс также позволяет вам более эффективно работать, так как вы можете сконцентрироваться на создании проекта, а не на функциях инструмента.

Justinmind

Justinmind – это один из первых появившихся на рынке инструментов для создания прототипов. Он был создан в 2008 году. За столь продолжительное время команда, создавшая данный инструмент, проделала восхитительную работу. Он очень хорошо работает! Данный инструмент – прекрасный вариант, если вам необходимо создавать веб-сайты, мобильные приложения и другие веб-проекты.

Vectr

Vectr – это новый игрок на рынке, и он все еще находится в стадии бета-тестирования. При помощи данного инструмента вы можете создавать ваши веб-приложения или приложения для настольного компьютера, использующего операционные системы Mac и Windows. К тому же он абсолютно бесплатен. Все прототипы могут быть выгружены и интегрированы в такие приложения, как Slack.

Principle

Инструмент для создания прототипов Principle доступен только для Mac. Он работает в паре с приложением для iOS, которое позволяет запускать прототипы. Principle позволяет вам экспортировать прототипы в видео или GIF-форматы. Интерфейс инструмента очень похож на интерфейс приложения Sketch. Если ранее вы пользовались приложением Sketch, то у вас не возникнет трудностей с использованием Principle.

PowerMockup

PowerMockup очень сильно отличается от других приложений. Данный инструмент – это дополнение к Microsoft PowerPoint, которое превращает эту программу в полноценный инструмент по созданию прототипов. С данным расширением вы сможете создавать макеты для любых веб-приложений или приложений для настольных компьютеров.

Atomic

Atomic – это невероятный инструмент для создания прототипов, и он формирует незабываемое первое впечатление. Atomic – это веб-приложение, которому для работы требуется Google Chrome. Если вы используете Safari, Firefox или браузеры Windows, данный инструмент может работать отвратительно. Atomic может использоваться для создания Apple Watch, Android, iOS и веб-проектов.

Balsamiq

Balsamiq – это один из самых простых инструментов. Он позволяет вам перетаскивать любой элемент на черный фон. Данный инструмент может интегрироваться с Google Docs для импорта ваших прототипов и файлов дизайна. Balsamiq доступен, как программа для Mac или Windows, а также имеет веб-версию.

Adobe Comp CC

Adobe Comp CC – это еще один великолепный инструмент от Adobe. Он позволяет вам создавать веб, мобильные и печатные проекты и далее интегрировать их с другими утилитами Adobe для создания дизайна. Например, Photoshop, Illustrator или InDesign. Также Adobe CC Comp работает с Adobe Stock, который предоставляет сотни шрифтов, картинок и графических решений.

habrahabr.ru

Онлайн приложения для создания макета или прототипа сайта | Ресурсы

19 августа 2010

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

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

А необходимо ли создание макета сайта?

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

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

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

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

Во второй части мы подробно расскажем о программах для разработки прототипа. После прочтения наших обзоров у вас будет огромных выбор более чем из 15 приложений.

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

Pencil Project скорее большой плагин для FireFox, нежели онлайн сервис или веб-приложение. После его установки создавать схемы, макеты и пользовательские интерфейсы можно будет прямо в браузере, а благодаря простому интерфейсу и большому количеству всевозможных инструментов и функций (многостраничные документы, богатая поддержка текста, экспорт html, png, файлов OpenOffice и многое другое) разработка будет упрошена до минимума.

Photoshare предоставляет собой простой инструмент для создания каркасов сайта. С помощью этого сервиса вы сможете создать прототип любой сложности т.к. сервис обладает всеми необходимыми инструментами. Вид интерфейса и его удобство настолько тонки, что окно для работы никогда не будет казаться переполненным и даст достаточно места для работы.

Очень удобное и популярное средство для разработки макетов. Яркий и простой интерфейс с гигантским набором инструментов, функции и всевозможные средства для создания, редактирования и калибровки прототипа сайта. Различные привязки, функции перетаскивания элементов, обширное количество свойств у объектов … перечислять полезные функции можно бесконечно. Нельзя не отметить возможность поделиться наработкой с коллегами и простой функцией передачи файлов при работе в команде. Но, при большом количестве плюсов всегда есть и минус. Для использования сервиса на полную мощность придется заплатить от 7 до 48 долларов в месяц, в зависимости от выбранного тарифа.

MockFlow — онлайн и оффлайн сервис с обширной библиотекой шаблонов и различных элементов, количество которых позволяет свободно управлять разработкой и тем самым делать оригинальные и технически сложные прототипы. Приложение распространяется как в свободном доступе, так и в платном варианте. При оплате безлимитного пакета (цена составляет 4.91$ в месяц) вы получаете доступ ко всем макетам, дисковую квоту в 500МБ для хранения информации, экспорт в PDF/PPT, командный чат и много других разнообразных функций.

Еще одно очень популярное и невероятно функционально приложение. Главное отличие от «собратьев» в том, что Balsamiq — Adobe Air приложение, поэтому оно работает как на Windows, так и Mac или Linux. Более 75 встроенных компонентов для пользовательского интерфейса, более 185 значков и куча генерируемых компонентов. Экспорт готового прототипа в формат PNG или PDF и, конечно же, удобный и быстро осваиваемый интерфейс, который позволит сосредоточиться именно на разработке.

Онлайн приложение для создания как прототипов, так и блок-схем и диаграмм. Частично переведено на русский язык и имеет бесплатную версию с ограниченным функционалом (ограничение снимается путем регистрации). Из всех приложений, рассмотренных в статье, у Creately самый простой интерфейс и наименьший выбор компонентов, тем не менее для создание простых макетов или же блок схем лучшего сервиса и не придумать.

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

womtec.ru

Прототипирование сайта — 11 программ и сервисов

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

Следующий шаг после создания макета – это создание прототипа. Создание прототипа, состоящее из нескольких этапов проектирования, выполняет видение дизайнера. На этом этапе дизайнер выбирает цвета и стили, которые он хочет видеть на своем сайте. Он заходит в UI и согласовывает проектирование с общим опытом пользователей на сайтах и в приложениях.

Оли опубликовал 7 шагов оптимизации выполняемых действий, касающийся разработки сайтов на WordPress для клиентов. Но давайте вернемся назад и сосредоточимся на этапе проектирования. Этот список содержит 11 лучших программ для создания макетов и прототипов, использующихся для разработки новых сайтов, тем и приложений.

Ну что ж, рассмотрим их.

1. INVISION

InVision является одной из наиболее широко используемых программ для создания прототипов на рынке. Она используется такими брендами, как Twitter, Nike и Sony. Программное обеспечение состоит из простых инструментов drag-and-drop, которые облегчают проектирование UX-проектов. Можете протестировать ваш проект в браузере, на мобильном телефоне и даже в режиме реального времени. Программа также пригодна для совместной работы с поддержкой таких облачных хранилищ, как Dropbox, Google Drive и Slack.

Цена: от 0$ за 1 прототип.

Поддерживаемые платформы: На основе браузера; Все браузеры

2. UXPIN

UXPin это мульти-программа, которая позволяет строить макеты до прототипирования различных конструкций UX. Это еще одна отличная программа для команд, так имеет функцию обмена в реальном времени, которая позволит представить ваш проект для других членов команды и клиентов. Все изменения и настройки, которые вы делаете, будут представлены в режиме реального времени. Программа используется такими компаниями как Microsoft, NBC и USA Today.

Цена: от 19$/месяц.

Поддерживаемые платформы: На основе браузера; Все браузеры

3. MARVEL APP

Marvel App является программой, которая позволяет разрабатывать схемы для веб-сайта до наслоения UX-конструкций над ними, чтобы полностью спроектировать браузер и оптимизированные для мобильного телефона сайты и приложения. Вы можете создавать свои собственные экраны или использовать изображения, которые вы сделали в Photoshop или в Sketch. Эта программа также имеет функции сотрудничества в реальном времени, которые позволяют членам команды и клиентам оставлять комментарии на экране или создавать аннотации.

Цена: от 0$ для основных функций.

Поддерживаемые платформы: Safari и Chrome; Поддержка Firefox в разработке

4. GLIFFY

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

Цена: в 0$ за 5 схем.

Поддерживаемые платформы: На основе браузера; Все браузеры

5. OMNIGRAFFLE

OmniGraffle является многоцелевой программой OmniGroup, которой можно пользоваться для создания макетов веб-сайтов, помимо всего прочего. Программа позволяет создавать основной макет для вашего сайта различными способами, включая использование Apple Pencil на iPad. Программа имеет функции распознавания формы, если вы предпочитаете черчение своих схем использованию инструментов drag-and-drop.

Цена: от 49 .99$.

Поддерживаемые платформы: Mac и iOS

6. MOQUPS

Moqups программой разработки макетов и прототипов, которая позволяет разрабатывать простые макеты для сайтов, прежде чем приняться за этапы UX. Вы сможете объединять страницы со ссылками, добавлять свои изображения, экспортировать файлы в PDF/PNG и многое другое. Это программа отлично подходит, если вам нужен простой способ показать ваши идеи клиентам и членам команды. Программа используется такими компаниями как Mozilla, Intel и BBC.

Цена: от 0$ за 1 проект.

Поддерживаемые платформы: На основе браузера; Все браузеры, Chrome App Available

7. AXURE

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

Цена: от 289$ за одну лицензию.

Поддерживаемые платформы: Windows и Mac

8. JUSTINMIND

Justinmind – популярная программа разработки макетов и прототипов, используемая Google, Adobe и Oracle. Она позволяет полностью распланировать, как будет выглядеть, восприниматься и функционировать ваш сайт, а также с ее помощью вы сможете создавать сетевые и мобильные приложения. Дизайнеры могут пользоваться многочисленными возможностями интеграции для максимизации своего опыта использования этой программы. Программа включает в себя Adobe Illustrator, используемый для равномерного переноса файлов SVG из Illustrator в Justinmind.

Цена: от 19$/месяц.

Поддерживаемые платформы: Windows и Mac

9. MOCKINGBIRD

Mockingbird – макетное приложение с простыми функциями прототипирования UX . Оно имеет инструменты drag-and-drop, которые можно использовать для быстрого построения макетов, а элементы UI позволяют установить связь между страницами, давая вам возможность разработать макет, стиль и схему веб-узла вашего сайта с помощью одного инструмента.

Цена: от 12$ в месяц за 3 проекта.

Поддерживаемые платформы: На основе браузера; Все браузеры

10. HOTGLOO

HotGloo – программа разработки макетов и прототипов, используемая такими компаниями как NBCUniversal, Disney и Sky. Помимо доступного режима создания макетов, программа обладает полным списком элементов и встроенным набором шаблонов пользовательского интерфейса. Она также подходит для сотрудничества команд, а ваши клиенты могут создавать аннотации для записи комментариев, если вам необходимо показать им макеты, прежде чем начать работу с проектами.

Цена: от 14$ в месяц за 2 проекта.

Поддерживаемые платформы: На основе браузера; Все браузеры

11. MOCKPLUS

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

Цена: от 10$/месяц.

Похожие статьи:

 Источник перевода

blog.seonic.pro

8 инструментов для создания UX/UI прототипов, на которые стоит обратить внимание

Программы для прототипирования – это связующее звено между творческой идеей и конечным продуктом. Совсем недавно в области UX/UI дизайна царил Photoshop, однако, проведенный опрос показал, что этот самый известный графический редактор стал терять популярность среди разработчиков. В опросе приняли участие более четырех тысяч респондентов из почти двухсот стран, и по его результатам можно сделать однозначный вывод: разработчики всегда открыты для новых инструментов, призванных облегчить процесс концептуализации, прототипирования и проектирования цифровых продуктов.

Инструменты для UX/UI проектирования

В последнее время на рынке появилось множество новых инструментов для прототипирования, среди них популярная программа Axure и новинка Mockplus. В данном обзоре приводится краткое описание восьми программ, на которые, по мнению редакции, стоит обратить внимание в этом году. Некоторые программные продукты могут использоваться только для создания простых прототипов, тогда как другие позволяют построить полноценный рабочий макет.

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

Mockplus – это простой инструмент для создания прототипов, созданный быстрорастущей инновационной компанией Jongde Software LLC. Программа рассчитана на автономное использование и поддерживает работу по прототипированию программного обеспечения для всех основных платформ: ПК, мобильные приложения и веб-приложения. Это хороший выбор для пользователей любого уровня подготовки, так как программа отличается простотой в освоении и интуитивно понятным интерфейсом. Если вашей целью является быстрое создание интерактивных прототипов в сжатые сроки, и вы хотите полностью сфокусироваться на работе, вместо того, чтобы тратить время на изучение инструментов проектирования, не проходите мимо Mockplus. Программа имеет необходимый набор UI-виджетов и иконок – все, что нужно для работы с вашими виджетами. Существует возможность предварительного просмотра прототипа путем экспорта HTML/изображения, либо его тестированием на существующем устройстве с помощью QR-кода.

Рекомендуем к прочтению: https://primeliber.com/mockplus/mockplus-sozdanie-prototipov-bystree-kachestvennee-i-proshche

Balsamiq Mockups – это экспресс-инструмент для прототипирования, который поможет вам работать быстрее и эффективнее. В программе реализован метод работы, максимально приближенный к рисованию на простой доске. Программа отличается простым интерфейсом и имеет большой набор UI-элементов. Стандартные виджеты упорядочиваются на экране простым перетаскиванием мышью. Существует две версии программы: для автономного использования и в виде расширения для Google Drive, Confluence и JIRA.

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

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

UX Pin – это онлайн-инструмент для прототипирования, который позволяет построить требуемую модель интерфейса простым перетаскиванием мышью, без необходимости обращаться к программированию. Данная программа представляет собой экранный редактор, позволяющий выбирать необходимые элементы и составлять из них требуемые сочетания. С помощью UX Pin можно создавать реалистичные модели и импортировать слои из таких программ, как Sketch и Photoshop.

OmniGraffle – это приложение, разработанное компанией The Omni Group, для создания диаграмм и цифровых изображений, которое работает с Mac, iPhone, iPad и iPod touch. Программа может использоваться как автономно, так и как веб-приложение; в ее состав входит несколько инструментов для разработчиков. OmniGraffle позволяет перетаскивать объекты мышью, а также снабжена функцией вставки примечаний и создания спецификаций прототипов и моделей. Данное приложение является идеальным инструментом для работы на iPhone и iPad.

C помощью Flinto разработчик может быстро создавать интерактивные прототипы и макеты для мобильных, автономных и веб-приложений. Программа снабжена всем необходимыми инструментами для создания анимации переходов, а также системой управления экраном для работы с большим количеством экранов приложений. Если вам необходим прототип для приложения под управлением iOS, Flinto – ваш выбор.

Заключение

Существует большое количество инструментов для прототипирования, и однозначно лучшего среди них нет, потому что все зависит от личных предпочтений и стиля работы. Если вам необходим простой недорогой инструмент, рекомендуем Mockplus, так как он не такой сложный, как Axure и Justinmind, а по функционалу превосходит Balsamiq. В случае, если вы можете позволить себе оплатить дорогостоящую лицензию и заинтересованы в создании сложных прототипов, есть смысл подумать об Axure.

Рекомендуем к прочтению:https://primeliber.com/Osmanov%20Emil/chto-nuyono-znat-ui-ux-dizajneram-ob-instrumentah-dlya-sozdaniya-prototipov

Источник: https://medium.com/@Mockplus/8-ux-and-ui-wireframe-tools-you-must-try-in-2016-f8fbcccf7f6e#.w17ngo3ie

spark.ru

«Moqups» —редактор для создания прототипов сайтов и приложений

Moqups — это бесплатное веб-приложение для разработки макета сайта или мобильного приложения.

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

 

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

 

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

 

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

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

Сохранение проекта в Moqups

Результаты своей работы можно сохранить в библиотеке сервиса для продолжения работы над ним в дальнейшем. Законченные проекты вы сможете экспортировать в формате PDF или PNG на свой компьютер или в облачное хранилище Google Drive и Dropbox. Если же вы хотите продемонстрировать созданный вами прототип в Интернете, то к вашим услугам специальная ссылка для распространения.

В целом, Moqups представляет собой простой, бесплатный и чрезвычайно удобный сервис, с помощью которого вы сможете буквально за считанные часы набросать макет своего цифрового продукта. Да, здесь нет возможности совместной работы и арсенал элементов можно было бы расширить, зато для его использования не требуется изучать многостраничные инструкции и можно сразу приступать к делу. Так что рекомендуем вам это веб-приложение к применению.

 

newreporter.org


Смотрите также