10 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать прототип веб-страницы: 15 лучших сервисов

Содержание

Как сделать прототип веб-страницы: 15 лучших сервисов

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

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


Так может выглядеть прототип страницы

Moqups

Язык: английский

Цена: от $13 в месяц

Бесплатная версия: есть, включает 1 прототип весом до 5 Мб

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


Так выглядит элементарный прототип в Moqups

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

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

Бесплатная версия ограничена по функционалу. Создавать эскизы можно бесплатно, но чтобы скачать их в формате PDF или PNG — надо заплатить.

Balsamiq Mockups

Язык: английский

Цена: $ 89 для локальной версии; от $ 12 в месяц в облаке; $ 5 в месяц за расширение для Google Chrome

Бесплатная версия: 30 дней во всех вариантах, полнофункциональная

Balsamiq Mockups можно установить на компьютер или открыть в браузере. Еще есть расширение Balsamiq Wireframes для Google Chrome. С расширением можно создавать эскизы сразу на Гугл Диске.

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


В отличие от обычного Moqups, меню элементов здесь горизонтальное
и расположено сверху, а не слева

Внутри лежит очень много кнопок, форм и других элементов (в платных тарифах — более 3000). Все это нарисовано в нарочито небрежном стиле, словно от руки. Если вам не нравится такой стиль — можно отключить его и заменить более строгим. Как и Moqups, Balsamiq легко освоить.

Готовый прототип вы скачиваете в формате PNG или PDF.

Mockplus

Язык: английский

Цена: $ 199 в год или $ 399 единоразово

Бесплатная версия: 8 дней, без ограничений

Mockplus мало отличается по функционалу от от обоих «Мокапсов». Здесь много эскизных элементов (около 3000) и интуитивный интерфейс. Есть версия для мобильных устройств — под iOS и Android. Можно рисовать прототипы на ноутбуке, с планшета или Айфона.

Перед созданием эскиза вы выбираете размер в соответствии с назначением. Делайте прототип для обычной web-версии или специально под мобайл.


Можно выбрать стандартное разрешение (например, 1024х1366 для iPad Pro)
или установить нужный размер

Для всех фигур предусмотрена тонкая настройка — устанавливайте размер в пикселях, смещайте, задавайте шрифт и размер текста, группируйте отдельные элементы.


В Mockplus получаются понятные симпатичные прототипы

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

Pidoco

Язык: английский

Цена: от $12 в месяц

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

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


Здесь тоже можно делать прототипы обычных веб-страниц, мобильных версий сайтов или мобильных же приложений под разные устройства

Интересно, что есть несколько уже «собранных» прототипов:


Прототип страницы поисковой выдачи Google. Возьмите его за основу —
и сделайте что-то свое

Axure

Язык: английский

Цена: от $29 в месяц либо $495 единоразово

Бесплатная версия: 30 дней, без ограничений

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

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


Начало работы с Axure

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

WireframeSketcher

Язык: английский

Цена: $ 99 единоразово

Бесплатная версия: 14 дней, без ограничений

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


Слева — панель настройки отдельных элементов, справа — склад этих элементов

Помимо Windows и Mac, сервис работает на операционной системе Linux (в отличие от большинства других). Есть режимы скетч — «набросок от руки» — и обычный. Можно делать интерактивные прототипы на несколько страниц (для комплексных сайтов).

Из минусов — «тяжелый», визуально устаревший интерфейс. К нему надо привыкать.

Ninjamock

Язык: английский

Цена: от $10 в месяц (либо бесплатно, но эскизы будут видны другим пользователям)

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

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


Рабочая область Ninjamock

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

Ninjamock работает только в браузере — десктопной версии нет.

PowerMockup

Язык: английский

Цена: от $60 (единоразово)

Бесплатная версия: есть, ограничена по функционалу

Этот сервис расширяет возможности стандартного PowerPoint (из пакета Microsoft Office). Устанавливаете — и в PowerPoint появляется вкладка PowerMockup.

Решение интересное, но пробная версия почти бесполезна. Там очень мало доступных элементов прототипа. Чтобы пользоваться сервисом полноценно, надо заплатить 60 долларов.

Iplotz

Язык: английский

Цена: от $15 в месяц

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

У Iplotz есть полноценная бесплатная версия для Windows, Mac и мобильных устройств на Android. Ограничения небольшие: можно работать только с одним проектом (максимум на 5 страниц-прототипов) и нельзя подключать к работе других людей. Если вам нужно просто набросать схему странички, это не помешает.


Рабочая область Iplotz

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

Выгрузить эскиз можно в PNG, PDF или HTML.

Другие сервисы

Если ни один из сервисов вам не понравился — попробуйте эти:

  • Gomockingbird.com — приятный несложный сервис по цене от $12 в месяц. Пробный период — 6 дней.
  • Mockflow.com — еще один простой редактор. Стоит от $14 в месяц, пробный период — 14 дней.
  • Mockupbuilder.com — ничего необычного: большой набор элементов, легкое управление, возможность совместной работы. Зато стоит недорого — от $7 в месяц. Бесплатно — в течение 14 дней.
  • Marvelapp.com — интересен тем, что есть шаблоны для прототипов на любые устройства — включая «умные часы». Есть бесплатная версия, но скачивать эскизы можно только в платной — она стоит от $14 в месяц.

Что лучше?

У всех сервисов много общего: готовые наборы шаблонов, многопользовательский режим. Все работают в браузере, некоторые — в виде отдельной программы на ПК. Все — только на английском, и почти все — платные. Это минус. Зато у большинства предусмотрен пробный период сроком 14-30 дней — это плюс.

  • если для вас важнее бесплатная версия — попробуйте Ninjamock и Iplotz ;
  • наиболее сбалансированные по возможностям, удобству и цене сервисы — Pidoco , Moqups , Balsamiq Mockups , Mockplus ;
  • для профессиональной работы лучше подойдут Axure и WireframeSketcher .

16 инструментов для создания прототипов

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

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

Спонсор перевода: Айкен

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

  • это позволит получить четкую картину того, какая именно информация будет необходима на каждой странице сайта до разработки его дизайна
  • это позволит рационально тратить время и сосредоточиваться именно на том, для чего предназначена каждая страница. Тщательное планирование имеет первостепенное значение
  • это позволит вам подстраховать себя, в случае неосведомленных клиентов, которые склонны менять свое мнение на стадии разработки проекта. Если сайт должным образом планируется на этапе каркасного моделирования, то функциональность отдельных страниц не должна сильно измениться
  • это позволит установить точку восстановления. Когда клиент подписывает каркасную модель, это означает, что он соглашается с тем, что будет находиться на этой странице
  • осведомленность клиента также играет здесь важную роль, и он должен знать, что изменение уже подписанных элементов на каркасной модели может — с очень большой вероятностью — увеличить бюджет
  • это позволит получить четкое представление о том, как будут реагировать посетители на сайт без цветовой схемы или элементов дизайна
  • это позволит удалить лишние элементы, которые могут оказаться ненужными для будущегог сайта
  • прототип довольно легко создать, позволяя плавно и эффективно осуществлять процесс планирования
  • этот процесс снижает вероятность увеличения объема работы по разработке дизайна
  • это дает дизайнеру четкое представление о том, что нужно сделать
  • это позволяет интенсивно вовлечь клиента в процесс планирования на раннем этапе разработки сайта и позволяет активно согласовывать весь процесс планирования между обеими сторонами
Читать еще:  Утилиты для Prototype

В этой статье мы рассмотрим несколько новых решений по построению прототипов и каркасному моделированию.

1. Omnigraffle

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

2. ConceptDrawPro

Тип: Приложение Windows
ConceptDraw PRO — это полнофункциональная платформа диаграммного изображения, которая позволяет отображать, передавать и динамично представлять информацию.

3. Pidoco

Тип: Онлайн
Pidoco — это объединенный инструмент каркасного изображения и создания прототипа графического интерфейса пользователя в реальном времени, который используется для улучшения программных проектов, поскольку он экономит время и снижает вероятность доработки. Picodo также увеличивает размер прибыли фирм вследствие того, что понижает затраты и повышает практичность.

4. BalsamiqMockups

Тип: Приложение AIR
Balsamiq Mockups — это инструмент построения каркаса, разработанный специально для воспроизведения проектов, нарисованных от руки, позволяя быстро и легко обновить свойства программ, таких как Microsoft Word.

5. Mockingbird

Тип: Онлайн
Mockingbird — это инструмент в режиме онлайн, позволяющий легко создавать, связывать, предварительно просматривать и передавать модели вашего или приложения.

6. Pencil

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

7. iPlotz

Тип: Онлайн / Flash-Flex
С помощью iPlotz можно создавать управляемые, активируемые кнопкой каркасы для создания образа или программного приложения. Вы также сможете получать комментарии от других лиц по поводу проектов, и как только все будет готово, управлять заданиями по построению проекта для разработчиков и проектировщиков.

8. ProtoShare

Тип: Онлайн
ProtoShare — это объединенный инструмент в режиме онлайн для построения каркасов и динамичных, управляемых прототипов , которые затем члены команды могут просматривать, а также комментировать в режиме реального времени.

9. HotGloo

Тип: Онлайн
Hot Gloo — это приложение для создания каркаса в режиме онлайн, которое в настоящее время также является бесплатной бета-версией. Вы можете перетаскивать и вставлять элементы, масштабировать, объединять, называть и переименовывать их. Также Вы сможете редактировать, комментировать и передавать любой элемент процесса разработки коллегам и клиентам.

10. MockFlow

Тип: Онлайн
MockFlow — это проектные, объединенные (в реальном времени) модели интерфейсов пользователя для вашего программного обеспечения и .

11. Gliffy

Тип: Онлайн
Бесплатное программное обеспечение для построения каркаса Gliffy дает возможность простого создания каркасов и передачи . Вы можете также экспортировать свой каркас для будущего использования в других приложениях.

12. Cacoo

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

13. Creately

Тип: Онлайн / Flash-Flex
Мощный и простой для использования диаграммный онлайн-инструмент, который работает прямо в вашем . Благодаря интуитивному интерфейсу пользователя и встроенным свойствам совместной работы, Creately облегчает работу с командами.

14. LovelyCharts

Тип: Онлайн
Lovely Charts — это приложение для создания диаграмм, позволяющее создавать профессиональные диаграммы всех видов, такие как блок-схемы, карты сайтов, бизнес-процессы, организационные структуры, каркасы и многое другое…

15. Mockup Builder

Тип: Онлайн / Silverlight
Mockup Builder — это новый взгляд на решение старой проблемы создания прототипов и предоставления набросков клиентам.

16. LucidChart

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

Как сделать прототип веб-страницы: 15 лучших сервисов

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

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


Так может выглядеть прототип страницы

Moqups

Язык: английский

Цена: от $13 в месяц

Бесплатная версия: есть, включает 1 прототип весом до 5 Мб

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


Так выглядит элементарный прототип в Moqups

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

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

Бесплатная версия ограничена по функционалу. Создавать эскизы можно бесплатно, но чтобы скачать их в формате PDF или PNG — надо заплатить.

Balsamiq Mockups

Язык: английский

Цена: $ 89 для локальной версии; от $ 12 в месяц в облаке; $ 5 в месяц за расширение для Google Chrome

Бесплатная версия: 30 дней во всех вариантах, полнофункциональная

Balsamiq Mockups можно установить на компьютер или открыть в браузере. Еще есть расширение Balsamiq Wireframes для Google Chrome. С расширением можно создавать эскизы сразу на Гугл Диске.

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


В отличие от обычного Moqups, меню элементов здесь горизонтальное
и расположено сверху, а не слева

Внутри лежит очень много кнопок, форм и других элементов (в платных тарифах — более 3000). Все это нарисовано в нарочито небрежном стиле, словно от руки. Если вам не нравится такой стиль — можно отключить его и заменить более строгим. Как и Moqups, Balsamiq легко освоить.

Готовый прототип вы скачиваете в формате PNG или PDF.

Mockplus

Язык: английский

Цена: $ 199 в год или $ 399 единоразово

Бесплатная версия: 8 дней, без ограничений

Mockplus мало отличается по функционалу от от обоих «Мокапсов». Здесь много эскизных элементов (около 3000) и интуитивный интерфейс. Есть версия для мобильных устройств — под iOS и Android. Можно рисовать прототипы на ноутбуке, с планшета или Айфона.

Перед созданием эскиза вы выбираете размер в соответствии с назначением. Делайте прототип для обычной web-версии или специально под мобайл.


Можно выбрать стандартное разрешение (например, 1024х1366 для iPad Pro)
или установить нужный размер

Для всех фигур предусмотрена тонкая настройка — устанавливайте размер в пикселях, смещайте, задавайте шрифт и размер текста, группируйте отдельные элементы.


В Mockplus получаются понятные симпатичные прототипы

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

Pidoco

Язык: английский

Цена: от $12 в месяц

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

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


Здесь тоже можно делать прототипы обычных веб-страниц, мобильных версий сайтов или мобильных же приложений под разные устройства

Интересно, что есть несколько уже «собранных» прототипов:


Прототип страницы поисковой выдачи Google. Возьмите его за основу —
и сделайте что-то свое

Axure

Язык: английский

Цена: от $29 в месяц либо $495 единоразово

Бесплатная версия: 30 дней, без ограничений

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

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


Начало работы с Axure

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

WireframeSketcher

Язык: английский

Цена: $ 99 единоразово

Бесплатная версия: 14 дней, без ограничений

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


Слева — панель настройки отдельных элементов, справа — склад этих элементов

Помимо Windows и Mac, сервис работает на операционной системе Linux (в отличие от большинства других). Есть режимы скетч — «набросок от руки» — и обычный. Можно делать интерактивные прототипы на несколько страниц (для комплексных сайтов).

Из минусов — «тяжелый», визуально устаревший интерфейс. К нему надо привыкать.

Ninjamock

Язык: английский

Цена: от $10 в месяц (либо бесплатно, но эскизы будут видны другим пользователям)

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

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


Рабочая область Ninjamock

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

Ninjamock работает только в браузере — десктопной версии нет.

PowerMockup

Язык: английский

Цена: от $60 (единоразово)

Бесплатная версия: есть, ограничена по функционалу

Этот сервис расширяет возможности стандартного PowerPoint (из пакета Microsoft Office). Устанавливаете — и в PowerPoint появляется вкладка PowerMockup.

Читать еще:  Каталог автомобилей Excalibur (Экскалибур)

Решение интересное, но пробная версия почти бесполезна. Там очень мало доступных элементов прототипа. Чтобы пользоваться сервисом полноценно, надо заплатить 60 долларов.

Iplotz

Язык: английский

Цена: от $15 в месяц

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

У Iplotz есть полноценная бесплатная версия для Windows, Mac и мобильных устройств на Android. Ограничения небольшие: можно работать только с одним проектом (максимум на 5 страниц-прототипов) и нельзя подключать к работе других людей. Если вам нужно просто набросать схему странички, это не помешает.


Рабочая область Iplotz

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

Выгрузить эскиз можно в PNG, PDF или HTML.

Другие сервисы

Если ни один из сервисов вам не понравился — попробуйте эти:

  • Gomockingbird.com — приятный несложный сервис по цене от $12 в месяц. Пробный период — 6 дней.
  • Mockflow.com — еще один простой редактор. Стоит от $14 в месяц, пробный период — 14 дней.
  • Mockupbuilder.com — ничего необычного: большой набор элементов, легкое управление, возможность совместной работы. Зато стоит недорого — от $7 в месяц. Бесплатно — в течение 14 дней.
  • Marvelapp.com — интересен тем, что есть шаблоны для прототипов на любые устройства — включая «умные часы». Есть бесплатная версия, но скачивать эскизы можно только в платной — она стоит от $14 в месяц.

Что лучше?

У всех сервисов много общего: готовые наборы шаблонов, многопользовательский режим. Все работают в браузере, некоторые — в виде отдельной программы на ПК. Все — только на английском, и почти все — платные. Это минус. Зато у большинства предусмотрен пробный период сроком 14-30 дней — это плюс.

  • если для вас важнее бесплатная версия — попробуйте Ninjamock и Iplotz;
  • наиболее сбалансированные по возможностям, удобству и цене сервисы — Pidoco, Moqups, Balsamiq Mockups, Mockplus;
  • для профессиональной работы лучше подойдут Axure и WireframeSketcher.

Бесплатные online-инструменты для прототипирования сайтов и создания wireframes

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

В этой статье мы решили собрать несколько бесплатных инструментов для создания прототипов (макетов) для сайта.

1) MockFlow

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

2) Cacoo

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

3) Mockup Builder (beta)

На данным момент бесплатное Silverlight онлайн-приложение для создания прототипов. Есть оффлайн версия. Также имеется большая библиотека готовых элементов. Проекты можно сохранять на компьютер в виде pdf, png и формата самого приложения.

4) Creately

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

5) ProtoShare

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

6) iPlotz

Довольно серьезный онлайн и оффлайн инструмент для создания прототипов сайтов. Есть большая библиотека всех необходимых элементов интерфейса, бесплатный тарифный план (только онлайн) и частично русская версия интерфейса.

7) Dabbleboard

В данном инструменте нет библиотек готовых объектов (можно сохранять только свои объекты), но, тем не менее в нем удобно рисовать. В режиме рисования вы просто рисуете контуры на своё усмотрение, но стоит переключиться в режим схем – и становится видно, как работает этот инструмент. Любые наброски система пытается распознать и на их основе рисует геометрические фигуры блок-схем: прямоугольники, эллипсы, ромбы и т.д. Сервис имеет бесплатный тариф с некоторыми ограничениями.

8) Pencil Project

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

Обзор 21 инструмента для создания прототипов

Необходимость использования прототипов при создании сайта начала активно обсуждаться несколько лет назад. Постепенно наметился отход от схемы «дизайнер рисует макет – программист прикручивает к нему код».

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

Для удобства мы свели всю информацию в отдельную таблицу, в которой сравнили сервисы по следующим параметрам:

  • Язык – язык интерфейса;
  • Бесплатный тариф – наличие бесплатного тарифа или пробной версии;
  • Самый дешевый тариф – стоимость самого дешевого тарифа или лицензии;
  • Особенности – отличительные «фишки» инструмента;
  • Интеграции – возможные интеграции с другими сервисами;
  • Скачиваемое приложение / веб-версия – некоторые из сервисов представляют из себя скачиваемые программы, некоторые работают прямо в браузере, а некоторые доступны в двух вариантах. В таблице указано наличие онлайн-версии / скачиваемого приложения и поддерживаемые ОС для каждого инструмента;
  • Мобильное приложение – наличие мобильного приложения для предпросмотра прототипов;
  • Техподдержка – возможные способы связи с технической поддержкой сервиса;
  • Клиенты – список самых известных клиентов.

Чтобы скачать таблицу, кликните на скриншот ниже.

1. Axure

Axure – крупнейшее и наиболее известное приложение для прототипирования, позволяет создавать высококачественные прототипы сайтов и мобильных приложений. Обладает широким функционалом с большим набором инструментов. Требует установки софта на ПК, онлайн-версия недоступна. Работает с Windows и macOS.

2. Origami Studio

Origami Studio – полностью бесплатное удобное приложение от Facebook. Работает с macOS. Синхронизуется с Sketch. У приложения есть сообщество на Facebook, где пользователи могут делиться своими прототипами, обсуждать их создание и помогать друг другу.

3. Proto.io

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

4. Vectr

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

5. InVision

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

6. Adobe Experience Design

Adobe Experience Design входит в пакет Creative Suite от Adobe и синхронизируется со многими сервисами из этого пакета. Главные особенности: быстрый переход из прототипа в приложение, возможность моментально посмотреть изменения в прототипе на мобильных устройствах. Главный минус – десктопное приложение доступно только для Windows 10.

7. Principle

Principle отлично подходит для создания анимированных прототипов. Приложение доступно только для Mac.

8. Just in mind

Главное преимущество Just in mind состоит в том, что в сервисе доступно множество элементов и жестов, а также готовые шаблоны прототипов.

9. Moqups

Moqups – еще один достаточно популярный сервис для создания прототипов. Главная особенность – неограниченное количество пользователей на платных тарифах.

10. Marvel

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

11. Mockplus

Основная «фишка» Mockplus – возможность просматривать прототипы на мобильных устройствах, сканируя QR-код, 3000 иконок в платных тарифах.

12. UXPin

Как и в Marvel, в UXPin можно создавать прототипы приложений для умных часов. Правда, только для часов, работающих на Android.

13. Flinto

Flinto – сервис прототипированния, в котором есть готовые шаблоны для самых распространенных разрешений мобильных устройств, а также встроенные анимации переходов в приложениях на Android и iOS.

14. Sketch

Sketch – знаменитый инструмент создан эксклюзивно для Mac, так что он лучше всего подойдет для создания прототипов для приложений на iOS.

15. OmniGraffle

OmniGraffle доступен только для Mac и iOS, причем лицензии приобретаются отдельно. Сам сервис является мультиинструментом, и создание прототипов – не самая главная его функция.

16. Pidoco

Главная особенность Pidoco – интуитивный drag’n’drop интерфейс, совместная работа над проектом.

17. Mockingbird

Mockingbird – простой сервис для создания несложных прототипов. Если вам нужно быстро создать базовый прототип, то, вполне возможно, Mockingbird вам подойдет.

18. iPlotz

iPlotz – очень простой сервис для создания несложных прототипов. Возможно, кому-то именно это и нужно.

19. Proto Share

В платных тарифах Proto Share можно создавать бесконечное количество проектов. Кроме того, у сервиса очень долгий триал-период – целых 30 дней.

20. MockFlow

Самый дешевый тариф Mockflow стоит всего $14 / месяц, при этом в лицензию входит множество инструментов, в том числе для создания сайтов и баннеров, а также сервис совместной работы над дизайн-проектами.

21. Mockup Builder

Mockup Builder – простой инструмент со стандартным набором функций. Ничего необычного. Однако среди клиентов можно встретить известные компании, так что не стоит обходить Mockup Builder стороной.

Прототип – незаменимый инструмент при разработке сайта

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

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Как создать прототип сайта

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

Читать еще:  Prototype 2 Моды Пакетная сборка 8-штук

В статье поговорим о том, что такое прототип сайта, как и где сделать прототип и какую пользу он приносит клиенту и исполнителю.

Из статьи вы узнаете:
  1. Что такое прототип сайта и зачем он нужен
  2. Какие бывают прототипы
  3. Как сделать прототип сайта
  4. Инструменты для прототипирования сайтов
  5. Шпаргалка: как и где сделать прототип сайта

Что такое прототип сайта и зачем он нужен

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

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

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

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

📍 Если резюмировать, то прототип сайта помогает:

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

Статья по теме:

Какие бывают прототипы

Готовые прототипы сайтов делят на:

  • статические — моментальный «снимок» страницы, где видно функции и основные блоки, но взаимодействовать с ними нельзя;
  • динамические — интерактивная модель, прототип веб-сайта с кликабельными элементами.

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

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

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

Эскиз от руки

Эскиз — это набросок структуры сайта на бумаге или на маркерной доске. Это быстрое прототипирование сайта, при котором вы прорабатываете только крупные блоки и можете легко менять структуру. На этом этапе проще всего зарисовывать новые идеи, стирать элементы, менять их местами. Если обсуждаете прототип в офисе, удобно пользоваться маркерной доской. Создать макет сайта с командой онлайн можно в программе Balsamiq либо аналогичной ей. Онлайн скетч сайта удобно комментировать, править и обсуждать с заказчиком.

Статичный недетализированный макет

Когда структура сайта готова, приступайте к основным элементам. Определите:

  1. где будет располагаться каждый объект страницы;
  2. какого размера он будет;
  3. как элементы будут сочетаться между собой.

На этом этапе недостаточно нарисовать структуру сайта — ее нужно дополнить разметкой блоков, создать каркас сайта. С таким уровнем детализации будет проще оценить объем работ и количество людей на проекте.

Статичный детализированный прототип

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

Интерактивная детализированная модель сайта

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

Прототип сайта на конструкторе

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

Используйте 190 готовых шаблонов нашего конструктора для вашего сайта!

Как сделать прототип сайта

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

Шаг 1 Определите цель сайта

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

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

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

Шаг 2 Сделайте набросок страниц

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

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

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

Шаг 3 Оцифруйте прототип

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

Статья по теме:

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

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

  • профессиональные программы под Windows и MacOS: Adobe Photoshop, Adobe InDesign, Sketch;
  • онлайн-инструменты.

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

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

Wireframe

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

Меню Wireframe

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

Интерфейс Wireframe

Если хотите сохранить эскиз в PDF-файл или сделать интерактивный прототип, нужно зарегистрироваться и выбрать тарифный план. Шаблоны тоже доступны после регистрации. Чем дороже пакет, тем больше пользователей может работать над проектом. Есть пробный период на семь дней.

LucidChart

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

Первая страница после регистрации в LucidChart

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

  • оргструктуры — помимо организационной структуры компании с их помощью показывают глубину разделов на сайте;
  • BPMN-диаграммы — позволяют найти место сайта и прототипирования в бизнес-процессе, а также визуализировать процесс работы над макетом;
  • Gantt-чарт — помогает отследить ход работы над разработкой сайта: от создания прототипа до передачи клиенту готового сайта.

Рабочее окно LucidChart

Diagrams

Если вы пользуетесь инструментами Google, GitHub или Dropbox, попробуйте сервис Diagrams. По концепции и функциям он похож на LucidChart, но его можно установить на десктоп или привязать к удобному вам облачному хранилищу.

Diagrams можно привязать к облачному хранилищу

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

Рабочее окно Diagrams

Нужен сайт?
Сделать сайт самому для бизнеса или хобби с нашими готовыми решениями легко как раз-два-три. Бесплатный тест 30 дней!

Источники:

Как сделать прототип веб-страницы: 15 лучших сервисов

http://habr.com/ru/company/aiken/blog/129653/

http://diastyle.ru/advancement-site/kak-sdelat-prototip-veb-stranicy-15-luchshix-servisov

Бесплатные online-инструменты для прототипирования сайтов и создания wireframes

http://texterra.ru/blog/obzor-22-instrumentov-dlya-sozdaniya-prototipov.html

Як створити прототип сайту

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector