Программа для создания прототипа сайта на русском

Программа для создания прототипа сайта на русском

Читайте этот пост на английском языке

Поделиться этим постом

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

В этом посте я собрала для вас 10 сервисов и программ, которые, на наш взгляд, способны значительно упростить вашу работу при создании структуры сайта 😉

1. Cacoo

Бесплатная версия: есть, 14-дневный пробный период.

Удобный сервис, с помощью которого можно создавать профессиональные диаграммы для проекта. Кроме того, Cacoo поддерживает командную работу, а значит можно комментировать действия коллег и править общие проекты, как в Google Docs. Из множества шаблонов выбирайте карту сайта и начинайте работу 😉

2. XMind

Бесплатная версия: есть.

Платформа: Windows, а также версия, адаптированная для работы со смартфонами на iOS.

Десктопное приложение для создания карты сайта. Лёгкий для понимания пользовательский интерфейс делает работу с XMind максимально простой и удобной. Можно изобразить структуру сайта, используя разнообразные виды разделов и подразделов. Юзеры рекомендуют завести аккаунт на сайте программы и сохранять все документы в облаке.

3. Mockingbird

Бесплатная версия: есть.

Mockingbird — это программа для создания прототипов сайтов или приложений. Даёт возможность предварительно просматривать, связывать и передавать созданные проекты для совместной работы с командой. Экспорт проектов доступен в форматах PNG и PDF.

4. Gliffy

Бесплатная версия: есть.

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

5. Creately

Бесплатная версия: есть, 30-дневный пробный период.

Платформа: онлайн, Mac OS X, Linux, Windows, а также для смартфонов на iOS и Android.

С помощью Creately можно одновременно вести несколько проектов. Инструмент даёт возможность работать онлайн совместно с командой. Используйте множество диаграмм, макетов и схем для создания структуры сайта. Кроме того, инструмент рекомендуют для выполнения заданий на курсах «База данных» и «Веб-дизайн».

6. Axure

Бесплатная версия: есть, 30-дневный пробный период.

Платформа: Windows, Mac OS.

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

7. FlairBuilder

Бесплатная версия: есть, 15-дневный пробный период.

Платформа: Windows, Mac OS.

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

8. NinjaMock

Бесплатная версия: есть.

Платформа: Windows, Mac OS.

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

9. Moqups

Бесплатная версия: есть, 1 проект до 300 объектов и 5 Mбайт.

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

10. LucidChart

Бесплатная версия: есть.

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

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

7 бесплатных программ для создания прототипа сайта — Создание сайтов, реклама в интернете, SEO-аудит сайта

Прототип сайта – это неотъемлемая работа при создании проекта. Ни один проект не может обойтись без грамотно продуманного прототипа, также для нас является правилом – размещать прототип в ТЗ (техническом задании). Прототипы бывают разными, и сегодня мы поговорим об этом.

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

Прототип сайта можно составлять несколькими путями:

  • Бумажный прототип – это быстрый и простой способ создать прототип, не требует, каких либо навыков, легко вносить правки. Можно добавлять комментарии.
  • Прототип программный – более продвинутый вид прототипирования, имеет эстетичный вид, возможность вносить правки несколькими участниками.
  • Динамический прототип – прототип в виде кода HTML, очень подробно показывает как именно будет выглядеть проект в web.
Читайте также:  Ниссан леаф технические характеристики

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

Mockflow: удобный инструмент, с неперегруженным, понятным функционалом.

Moqups: можно создавать не только прототипы сайтов, но и карты сайта, диаграммы и многое другое.

POP: это приложение для смартфонов, бумага и карандаш — это все, что вам требуется для создания интерактивного прототипа, очень интересное решение.

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

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

Balsamiq: довольно простой и интуитивно понятный ресурс, есть версия триал с урезанным функционалом, за полноценную придется выложить порядка 90 у.е

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

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

Хакер #183. Малварь для Android

Эта программа — самый известный инструмент для создания прототипов. Balsamiq доступен для всех операционных систем, и его можно интегрировать с различными системами совместной работы, включая Jira, Confluence и Google Drive. Также есть онлайн-версия Balsamiq. Лицензия для одного ПК обойдется в 79 долларов, а доступ к веб-приложению — от 12 долларов в месяц (не более трех активных проектов).

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

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

Шаблонов для мобильных платформ в Balsamiq очень мало — всего предусмотрено семь макетов и элементов для iPhone. Это макет самого iPhone и некоторые элементы, характерные для мобильной ОС: форма picker (используется в мобильных ОС для ввода времени и других параметров), экранная клавиатура, тумблер ON/OFF и другие. Впрочем, все остальные элементы, необходимые для создания макета мобильного приложения, можно взять из других разделов библиотеки. К сожалению, шаблонов для других мобильных устройств не предусмотрено. Учитывая схематичность получаемых макетов, шаблон iPhone вполне подошел бы для прототипирования интерфейса приложения для любого смартфона или планшета. Но Balsamiq не позволяет изменять соотношение сторон экрана смартфона.

Макет интерфейса приложения для iPhone

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

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

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

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

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

Читайте также:  Поиск медианы в массиве

WireframeSketcher Studio доступна для Windows, Linux и OS X, а также в виде плагина для Eclipse. Бессрочная лицензия, включающая в себя один год технической поддержки, обойдется в 99 долларов.

Интерфейс FlairBuilder аскетичен

Эта программа по функциональности во многом повторяет Balsamiq. Разработчики даже обеспечили импорт макетов из Balsamiq. В библиотеке шаблонов присутствуют элементы для веба и iPhone, но других мобильных ОС нет. Шаблон браузера называется Chrome и представляет собой не окно, как в остальных программах, а лишь верхнюю часть интерфейса браузера: адресную строку и кнопки «Вперед», «Назад», «Домой».

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

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

Программа поддерживает импорт растровых изображений и экспорт готовых макетов в PDF, HTML и растровые форматы. Для просмотра интерактивных шаблонов на сайте разработчика доступен бесплатный viewer. Цена лицензии на FlairBuilder для одного пользователя — 99 долларов.

Возможности создания макетов приложений под Windows в DesignerVista mockup tool кажутся безграничными

DesignerVista заточен исключительно для проектирования интерфейсов десктопных приложений под Windows. Отсюда и особенности библиотеки: в ней есть, например, огромный набор шаблонов для построения ленточного интерфейса (ribbon). Даже простой шаблон окна представлен в двух вариантах: из Windows 7 и 8.

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

Интерфейс программы стилизован под последние версии Microsoft Office. Работать с ним удобно. Единственный недостаток — нет автоматического выравнивания элементов. Например, в WireframeSketcher Studio шаблон при перетаскивании его на лист старается автоматически выровняться относительно соседних элементов. При этом отображаются линии, подсказывающие логику этого выравнивания. В DesignerVista для выравнивания используются отдельные кнопки на панели инструментов, это слегка увеличивает время создания макета.

В общем, если нужно работать только с макетами десктопных Windows-приложений, то DesignerVista — идеальное решение, полученный прототип будет почти не отличаться от скриншота реальной программы. Цена лицензии — 169 долларов для одного пользователя.

Библиотека Caretta GUI Design Studio не уступает DesignerVista, хотя многие иконки в ней устарели

GUI Design Studio распространяется в двух версиях: Professional и Express, по цене 129 и 499 долларов соответственно. Эту программу отличают от остальных наиболее широкие возможности программирования поведения интерфейса, доступные только в версии Professional. Видимо, этим и объясняется столь высокая цена.

Содержимому форм макета можно присваивать имена переменных. Переменные хранятся в базе данных, которая понимает слова SELECT, FROM и WHERE. Помимо данных, вводимых пользователем, в базу можно заранее загрузить свои данные. Для каждого элемента можно задать условия видимости и активности, исходя из значения тех или иных переменных.

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

Запускать интерактивные прототипы можно либо из самой программы, либо из специального viewer’а, который распространяется бесплатно. Разумеется, ничто не мешает просто экспортировать макеты в PNG, если не требуется интерактивность. Версия Professional поддерживает контроль версий макетов с помощью SVN.

GUI Design Studio ориентирована на создание макетов программ для ОС Windows. Набор шаблонов здесь не такой богатый, как в DesignerVista. Его можно немного расширить, импортировав собственные иконки в формате ico.

Своих 266 долларов UXToolbox вряд ли стоит, тут просто нет киллер-фичи, которая бы оправдывала ценник

Продукт английской компании softandGUI в первую очередь разработан для работы с мобильными приложениями. При создании нового проекта UXToolbox просит выбрать целевое устройство, под которое будет разрабатываться интерфейс. Шаблон с изображением этого устройства будет по умолчанию помещен на каждый из листов документа. В библиотеке присутствуют шаблоны нескольких современных смартфонов, а также MP3-плееров и портативных игровых консолей. Смысл наличия этих шаблонов не только в том, чтобы повторить внешний вид устройства. Они нужны также для того, чтобы элементы интерфейса соотносились по размеру с физическим размером экрана. Учитывая разнообразие устройств на Android, полезно было бы иметь шаблон некоего обобщенного смартфона, для которого можно было бы задать любой размер экрана. К сожалению, такой шаблон не предусмотрен разработчиками UXToolbox, а предложенный набор смартфонов довольно скуден: это все поколения iPhone, HTC Desire, Samsung Galaxy S, S3, Note 2, Omnia 7, а также несколько моделей Nokia и BlackBerry.

Читайте также:  Как в ворде зафиксировать шрифт

Макеты можно просматривать как в режиме wireframe, так и в режиме high-res

Интерактивность в UXToolbox реализована довольно примитивно. Любой элемент интерфейса можно использовать как ссылку на другой лист документа. Листы одного документа представляют собой полностью независимые макеты.

В программе есть два режима отображения макета: wireframe и high-res. Последний делает изображение более приятным для глаза, интерфейс становится похожим на скриншот.

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

Просят за UXToolbox немало — 266 долларов за лицензию для одного пользователя. Обратить на нее внимание стоит, если ты хочешь быстро создавать аккуратные макеты, которые можно вставить не только в ТЗ разработчика, но и в презентацию.

Доступ к PowerMockup можно получить через панель инструментов, устанавливающуюся вместе с библиотекой

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

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

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

Беглый поиск в Google привел к набору шаблонов Updated Sketch GUI Shapes for Visio, который, по всей видимости, когда-то распространялся автором Джонатаном Аббеттом на его сайте abbett.org. На момент написания этой статьи набора шаблонов на сайте уже не было. Мне удалось скачать его только со Stack Overflow, куда ее выложил один из пользователей конференции. В отличие от плагина для PowerPoint, этот набор шаблонов доступен в качестве родного для Visio файла с расширением vss и не пытается устанавливаться в системе как отдельная программа. Набор довольно скуден — всего 34 наименования.

Набор шаблонов Updated Sketch GUI Shapes for Visio

Как выяснилось, Visio 2013 имеет родной набор шаблонов для создания схем интерфейсов. Для того чтобы им воспользоваться, нужно при создании нового файла выбрать из категории «Программное обеспечение» пункт «Проволочная диаграмма». Штатный набор шаблонов Visio более полон и включает в себя почти все, что есть в специализированных программах, кроме макетов для мобильных приложений.

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

Макеты как сервис

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

Ссылка на основную публикацию
Программа для отслеживания планшета
на Андроид Friend Locator Inc. Отслеживание по номеру телефона — это утилита-трекер, с помощью которого в режиме реального можно следить...
Препараты чтобы не стоял
Продолжительная и стойкая эрекция позволяет мужчине чувствовать себя в постели Богом, а ее ослабление становится страшной и мучительной трагедией. Проблема...
Прерывается звук в динамиках
Очень распространенной проблемой со звуком, после его отсутствия, является искажение: шипение, свист, треск и т. д. Возникает она, естественно, вследствие...
Программа для отслеживания посылки
Отследи посылку Почты России, Украины, Беларуси, Казахстана, Китая, Гонконга, AliExpress, JD.com , Joom , Pandao , GearBest , Ebay.com ,...
Adblock detector