Прототип сайта создать – Как сделать прототип веб-страницы: 15 лучших сервисов | Академия Лидогенерации | Официальный сайт

Содержание

7 бесплатных программ для создания прототипа сайта

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

1. POP

Самый простой способ сделать прототип лендинга – это рисунок от руки. Макет рисуем на бумаге, затем фотографируем и после этого преобразуем в программе POP. Но, признаться, проще и аккуратнее нарисовать отдельный макет прямо в программе. Для этого в POP есть несколько самых необходимых функций: вставить картинку, нарисовать область прямоугольной или круглой формы, указать, где разместить текст (или прямо написать тот, который подскажет копирайтер).

b_5978aa107f565.jpg

Процесс создания прототипа в программе POP. Минимум функций, зато и минимум усилий

Программа простейшая. Здесь не получится крутого прототипа. Минимум инструментов для минимума задач. Но при этом POP поддерживает любой девайс: iPhone, iPad, Apple Watch, Apple TV, Android. Здесь есть также рабочая сеть, куда можно позвать коллег и клиентов, чтобы обсуждать весь нехитрый процесс. И, конечно, POP интегрируется с Dropbox.Стоимость: от 14$ в месяц. Есть бесплатная версия.

2. Balsamiq

Тоже несложная программа и по функционалу не лучшая. Однако Balsamiq предлагает более широкие возможности, имеет большой набор UI-элементов. Здесь можно выбирать значки, рисовать кнопки разных форм, добавлять таблицы, работать со шрифтами. Удобнее выглядит само рабочее поле: есть разметка. В Balsamiq также можно создавать макеты сайтов и карты. Он подходит тем, кто не силен в фотошопе.

b_5978aa1228db8.jpg

Прототипирование в Balsamiq: как на бумаге…

Программу используют непосредственно в браузере или загружают в качестве приложения Adobe AIR. Работает на Mac или Windows, интегрируется с Google Docs.Стоимость: от 12$ в месяц. 30 дней бесплатного тестирования.

3. InVision

Это приложение для преобразования статических макетов в прототипы и мокапы с интерактивными элементами, то есть средство «оживления» макета. InVision имитирует полноценную работу будущего сайта. На нем можно связывать макеты отдельных страниц в прототип. Кроме того, это отличный инструмент для работы в студии. Программное обеспечение включает несложные инструменты drag-and-drop, благодаря которым процесс проектирования UX-проектов становится легче.

b_5978aa133ad89.jpg

Invision: простые инструменты оживят ваш макет

Проект можно тестировать в браузере, на мобильнике и в режиме реального времени. Приложение позволяет подключать к обсуждению коллег и заказчиков, причем общаться можно как в чате, так и с помощью персональных приватных комментариев: дизайнеру, разработчику, заказчику. Функционирует на основе браузера, поддерживает все браузеры. Работает с iOS и Android. Интегрируется с Dropbox, Google Drive, Box, GitHub, Slack и другими программами. Стоимость: от 15$ в месяц. Есть бесплатная версия.

4. PowerMockup

PowerMockup – это простой набор инструментов, подходящий тем, кто любит работать в PowerPoint. Он своего рода дополнение к PowerPoint, встроен в пакет Microsoft Office и предлагает дополнительные возможности и эскизы для прототипирования. Имеется множество разнообразных UI-элементов пользовательского интерфейса и порядка 650 значков. Библиотеку форм можно пополнять своими элементами. В PowerMockup коллеги могут работать над проектом вместе, файлы легко экспортируются в PNG, JPEG, BMP, в векторных графических символах, таких, как WMF или EPS, а также видео и документах PDF. Благодаря принадлежности Microsoft Office работа возможна также в Word и Excel. К примеру, делаем спецификацию в PowerPoint, а после открываем ее в Word.

b_5978aa14e08a5.jpg

PowerMockup: поможет сделать прототип прямо в PowerPoint

PowerMockup доступен только для Windows. Стоимость: от 60$ (разовый платеж). 30 дней тестирования.

5. Axure

Это профессиональный UX-инструмент, помогающий разработчикам создавать уже сложные интерактивные прототипы. Делает веб-приложения, работает на Mac и Windows. Здесь удобно перетаскивать элементы, форматировать и менять размеры виджетов, создавать страницы, папки, также очень легко тестировать виды будущего лендинга под различные устройства. То есть, можно быстро визуально редактировать, а также скачивать библиотеки для виджетов. В программе имеется поддержка фреймов под iOS, а также библиотеки для iPhone, iPad и Android. Axure удобен для прорисовки диаграмм, аннотаций, спецификаций. В программе можно делать целые сайты. Во время работы над проектом формируются файлы HTML, Javascript, CSS.

b_5978aa168ab03.jpg

Разработка прототипа в Axure: максимум возможностей для дизайнера

Есть возможность бесплатной работы в течение месяца. Наши дизайнеры используют Axure. Стоимость: от 300$ (разовый платеж).

6. Principle

Довольно быстрая, интуитивно понятная десктопная программа, не требующая подключения к интернету. В ней можно делать интерактивные прототипы с анимациями. Есть инструменты для устройств с тач-экранами, позволяющими определить разные типы взаимодействия: tap, scroll, drag-and-drop, долгое нажатие и др. Из прочих функций доступны: артборды, маски, предустановки. Драйвер-панель позволяет делать с прототипом интересные штуки: например, вращение какого-нибудь элемента во время свайпа.

b_5978aa186d7d1.jpg

Прототипирование в Principle

Работает на Mac, удобна пользователям Mac OSX благодаря похожим элементам интерфейса. Сложна из-за необходимости правильной организации файлов Sketch перед синхронизацией.Стоимость: 129$ (разовый платеж). 14 дней бесплатного тестирования.

7. Fluid

Программа работает с мобильными приложениями. В ней можно сделать прототип для Android, iOS, а также Windows. По сути, это приложение для браузера на HTML5. Также проста в использовании, с быстрым функционалом, позволяет сразу же оценивать результат на мобильнике. Имеет библиотеку из более 1500 элементов. С Fluid легко редактировать перетаскиванием, создавать анимации, программа поддерживает жесты, действия на прикосновения, drag-and-drop, повторение шаблона на страницах и переходы между ними, библиотеки iPhone и Android, работу со своими изображениями и скриншотами. Готовый макет можно переводить в различные форматы, в том числе в PDF и HTML. Есть возможность совместного рабочего процесса с коллегами.

b_5978aa19ab40a.jpg

Рабочее пространство для создания прототипа в Fluid

Сервис облегчает задачи программистам: с ним легче разобраться со структурой, функциональностью проекта, представить все в конечном варианте. Таким образом, оптимизируется вся разработка и связь с базой данных. В Fluid проще собирать все экраны в один проект. Стоимость: от 15$ в месяц. Есть бесплатная версия.

8. Framer

Это инструмент для продвинутых. Здесь прототип разрабатывается в коде, c использованием языка CoffeeScript. Но не стоит пугаться, создание кода во Framer — достаточно увлекательный процесс, программа снабжена инструкциями, освоить ее может даже неподготовленный. Во Framer можно делать интерактивные анимации. Пользователям нравится то, что программа заставляет как следует продумывать логику и структуру дизайна.

b_5978aa1aed80b.jpg

Framer: прототипирование в коде

Работает на Mac. Интегрируется со Sketch и Photoshop. Во Framer возможно все в рамках JavaScript — например, использование живых данных или акселерометра .Стоимость: от 129$ в год.

9. Flinto

Еще один давно известный инструмент. С его помощью также можно делать интерактивные прототипы. Здесь представлены все нужные инструменты для создания анимаций, а также специальная система, с помощью которой можно работать с несколькими экранами приложений. Можно выбрать две версии: Flinto Lite, а также Flinto for Mac. Последняя обладает широким функционалом для создания анимаций, мощная удобная программа. Ее быстрее всего освоить тем, кто работал на Mac OSX. Имеется плагин для Sketch, это упрощает воссоздание дизайнов. Есть недостатки: Flinto for Mac работает с шаблонами под мобильники и прототипом здесь возможно делиться исключительно с теми, кто установил Flinto for Mac.

b_5978aa1c3480e.jpg

Процесс создания прототипа в Flinto for Mac

Стоимость: от 20$ в месяц.

Какой сервис выбрать?

Ваш выбор будет зависеть от задачи и бюджета. Простой макет, который поможет собрать мысли воедино, можно создать в программе, вроде POP или PowerMockup. Для более масштабных проектов используйте многофункциональные программы типа: Axure, Fluid, Principle.

Главное, что вы должны понимать, — это то, что даже лендинг на шаблоне нуждается в прототипировании. Внимание к деталям на этом этапе предупредит появление багов.

пошаговая инструкция — Ringostat Blog

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

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

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

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

 

Плюсы и минусы прототипирования сайтов

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

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

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

 

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

Шаг 1. Продумайте путь клиента

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

 

good-path

Узнайте больше о пути клиента в нашей статье «Короче: что такое customer journey за 4 минуты».

 

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

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

 

Шаг 3. Оживите прототип

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

 

Программы для создания прототипов офлайн

Esk.one

Платформа: Онлайн-сервис

Цена: бесплатно, пользователь может сделать пожертвование на свое усмотрение

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

Интерфейс esk.one

 

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

 Раздел «Получить идею» подсказывает, что еще можно разместить на сайте

 

NinjaMock

Платформа: Онлайн-сервис

Цена: от 7,7$/месяц 

Бесплатный тариф: бессрочный, с ограничениями

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

Интерфейс реализован на английском, но в самом прототипе кириллический текст выглядит органично, не превращается в «крокозябры» или пустые квадраты.

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

У сервиса есть бесплатный тариф, в котором можно создать только один проект с не более чем 200 элементами. Созданные на бесплатном тарифе проекты доступны для просмотра всем посетителям сервиса, так что этот вариант вряд ли подойдет для коммерческого использования. Экспортировать прототип тоже получится лишь после оплаты. На PRO-планах доступны форматы PDF, PNG и HTML.

Здесь можно создавать проекты под разные платформы:

  • смартфоны;
  • планшеты;
  • умные часы;
  • браузер.

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

 

Moqups

Платформа: Онлайн-сервис

Цена: от 13$/месяц для фрилансеров, от 20$/месяц для команд

Бесплатный тариф: бессрочный, с ограничениями

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

Программы создать прототип сайта

При редактуре Moqups подсказывает похожие элементы, подсвечивает поля

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

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

Бесплатная версия сервиса ограничена одним проектом с не более чем 200 элементами. Этого лимита хватит на 2-3 страницы или небольшой лендинг. Совместная работа над прототипом доступна только по подписке, но можно открывать право просмотра другим пользователям сервиса, так что коллеги смогут смотреть онлайн-прототип.

Программе предлагает оплатить тариф
У Moqups также есть расширение для браузера Chrome. Пока оно умеет делать скриншоты страниц и отправлять их в сервис. 

 

Origami

Платформа: macOS

Цена: бесплатно

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

Прототип сайта для мобайла

У сервиса есть приложения для iPhone и Android, но они предназначены для тестирования, а не разработки прототипов. Если синхронизировать их с программой на Mac, можно посмотреть работу созданных прототипов на телефоне.

 

Figma 

Платформа: кроссплатформенный сервис, Windows, macOS, браузерная версия

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

Бесплатный тариф: бессрочный, с ограничениями.

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

В сервисе есть шаблоны для сайтов, диаграмм, путей клиента и пользователя, постов для соцсетей и даже коллекция шрифтов. Доступна разработка под разные модели смартфонов и smart-часов. Есть векторный редактор и масса smart-функций. Figma пригодится на крупных проектах, когда прототип должен быть идеальным, прежде чем пойдет в работу. К слову, экспортировать файлы можно в форматах PNG, JPG, PDF и SVG.

Пользуясь бесплатной версией, можно создать до трех проектов, история изменений которых хранится 30 дней. Также можно добавлять в проект одного соавтора. Студентам сервис предлагает бесплатный доступ к PRO-версии. Но попытка перейти на страницу подтверждение статуса студента привела нас на страницу 404. Возможно этот функционал доработают.

 

Выводы

  1. Создание прототипа — важный этап в разработке сайта. Он дает видение конечной точки, к которой уже прокладывается roadmap.
  2. Чтобы прототипирование было целесообразным и облегчило работу, а не съело время впустую, нужно сразу определиться с необходимым уровнем детализации. Чем больше людей вовлечено в разработку и чем больше времени на нее отведено, тем больше прототип должен быть похож на готовый сайт. При этом небольшой команде для создания одной страницы может хватить и схематического наброска.
  3. Создание прототипа следует начать с расчета пути пользователя к целевому действию. Уже после разработки сценариев взаимодействия с сайтом можно начинать рисовать блоки и выбирать формы кнопок. Первый набросок можно сделать хоть от руки в блокноте — лишь бы получить общее видение.
  4. Сервисы для создания прототипов имеют схожие функционал и интерфейсы. Поэтому при выборе стоит обратить внимание на возможность совместной работы и доступные для экспорта форматы.

Задайте нам вопрос

Если вы нашли ошибку — выделите её и нажмите Ctrl + Enter или нажмите сюда.

Пять онлайн-сервисов для создания прототипов сайтов, мобильных приложений

— Василий Королевский · · 1.8K

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

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

Wireframe.cc

https://wireframe.cc/

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

Премиум версия доступна от 15 долларов.

wireframe.cc

Сacoo.com

https://cacoo.com

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

Платная версия от 4.95 долларов

cacoo.com

Fluidui.com

https://www.fluidui.com/

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

Я было расстроился, но обнаружил кнопочку share. Она формирует ссылку, по которой будет доступен проект для просмотра.

fluidui.com

Платная расширенная версия от 8.25 долларов

Balsamiq.com

https://balsamiq.com/
Популярный инструмент с очень широкими возможностями. Регистрация нужна.
30 дней — бесплатная версия.
От 12 долларов в месяц платная версия.

balsamiq.com

Lumzy.com

http://lumzy.com
После регистрации доступно сохранение проекта в PDF, JPEG, и можно создать ссылку для просмотра проекта в браузере.

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

Хрюша просит денег

Один жетон оплачивает 12 часов работы, стоит всего 50 центов. Правда, минимум нужно купить 10 за 5 долларов. Хрюша не очень надоедливая — работать можно даже с ней.

lumzy.com

 

Василий Александров

1

Чтоб оставить комментарий нужно войти или зарегистрироваться

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

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

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

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

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

Зачем нужен прототип сайта

Зачем нужен прототип сайта

Содержание статьи

Зачем нужен прототип?

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

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

Приведу несколько причин, почему это необходимо:

  • Наглядное представление – каркасное моделирование расставит все страницы по местам с указанием отдельных блоков на каждой из них;
  • Планирование – есть возможность наметить шаги реализации и дальнейшего развития ресурса. Используя программу для создания прототипа сайта бесплатно и на выгодных условиях, вы сможете поэкспериментировать над отображением отдельных блоков;
  • Экономия времени – предварительный рисунок позволит рационально распределить собственные ресурсы;
  • Определение работы дизайнера – детальное отображение элементов помогает при дальнейшей разработке дизайна.

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

прототип сайта пример

прототип сайта пример

Виды прототипов

Существует несколько разновидностей, каждый из которых имеет свои особенности:

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

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

Программы для создания прототипа

Рассмотрим наиболее простые и доступные варианты:

  1. Cacoo – красочный сервис с макетами для использования. Лёгкая версия в режиме онлайн. Программа для создания прототипа сайта на русском имеет красочные элементы. Полученный проект будет обладать оригинальностью и креативностью. Результат экспортируется в формате в png;
  2. «Moqups» – прекрасная альтернатива предыдущему аналогу. Встроенные диаграммы и схемы позволяют создать эскиз на многостраничный портал. Предоставляется объединение страниц со ссылками, добавление изображений, а также экспорт файлов;
  3. HotGloo – полезное приложение для отрисовки макета в режиме онлайн. Достаточно просто перетаскивать элементы, вставлять тематические картинки, изменять масштаб деталей, объединять в единую концепцию. Также есть полезная функция переименования файлов;
  4. Gliffy – простой интерфейс и продуманная блок-схема являются главными преимуществами. Программа для создания прототипа сайта содержит множество инструментов для реализации каркаса страниц, после чего они связываются между собой;
  5. Axure – функциональное приложение для представления диаграмм и схем прототипирования. Здесь можно разработать карты сайтов, проекты на тему бизнеса, организовать подробную структуру портала, построить примерный каркас в виде связанных разделов;
  6. Creately – мощный редактор с полезными опциями. Работает напрямую через браузер. Отзывчив к диаграммам и сложным схематическим конструкциям;
  7. MockFlow – программа для создания прототипа сайта заточена под редактирование элементов в режиме реального времени. Обширная библиотека шаблонов и графики. Помогает разработать проекты различной сложности с дальнейшим экспортом.

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

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

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

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

​Сервисы для создания прототипа сайта

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

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

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

4 причины создать прототип сайта:

  1. Четкое представление о том, какая информация необходима на каждой странице веб-сайта. Вы контролируете конечный результат и вам не нужно объяснять «на пальцах», что вы хотите получить.
  2. Прототип легко изменять, ведь он состоит из схематичных черно-белых элементов. Если в процессе разработки сайта вы захотите внести изменения в структуру, то сделать это гораздо проще именно на схеме, а не в готовом дизайне.
  3. Экономия времени. Тщательное планирование этапов разработки помогает концентрироваться на одной задаче и эффективно её решать в установленные сроки. То есть, создавая прототип, вы не распыляетесь на подборку цветовой схемы сайта и оформления.
  4. Точка восстановления и подстраховка. Если вы работаете на заказ, то утвержденный клиентом прототип защитит от бесплатных переделок. Если клиент требует значительных правок в уже принятом им макете, то они вносятся за дополнительную плату.

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

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

Команда SMS Aero выбрала несколько популярных сервисов для прототипирования и решили рассказать об их особенностях.

Balsamiq Mockups

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

Кроме стандартных десктопных решений сервис предлагает несколько макетов для мобильных устройств, но для прототипирования под iPhone и Android – это не самое лучшее решение.

Проекты сохраняются в собственном формате для последующего редактирования или в PDF и PNG для экспорта. Имеется опция просмотра прототипа в полноэкранном виде. Доступ к сервису стоит 12 долларов в месяц (можно одновременно вести не более 3 активных проектов).

Wireframe.cc

Главное преимущество этого сервиса – минималистичный подход к созданию прототипов. Сервис имеет простейший интерфейс, который понятен начинающему разработчику. Wireframe.cc – ничего лишнего, только самые необходимые элементы для создания каркаса сайта.

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

Стандартная версия сервиса бесплатна. Разработчики планируют выпуск платной премиум версии с расширенным функционалом.

Pencil Project

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

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

HotGloo

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

Сервис платный: от 7 до 48 долларов в месяц.

iPlotz

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

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

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

Напоследок ещё один небольшой обзор бесплатных сервисов для прототипирования:

  • NinjaMock – предоставляются основные векторные элементы для строительства макета: прямоугольники, эллипсы, кривые, формы, меню и т.д. Поддерживает все популярные платформы и ОС.
  • Mockingbot – сервис для создания прототипов мобильных приложений. Бесплатная версия позволяет вести один полноценный проект. Сервис имеет все необходимые графические элементы, чтобы создавать макеты для AppStore.
  • CogTool – сервис создает довольно простые прототипы пользовательского интерфейса. Фишка инструмента в том, что он дает прогноз эффективности макета, а также вычисляет необходимое время на реализацию проекта.

Инструменты быстрого прототипирования / Habr

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

Создание эффективных прототипов
Для того чтобы оценить инструменты или техники прототипирования нам в первую очередь необходимо определить критерии эффективного прототипа. Лучшими являются те прототипы, которые вливаются в процесс дизайна. Мы хотим иметь возможность быстро переходить от набросков к интерактивному воплощению.
Эффективные прототипы быстры. Мы хотим использовать методики, которые помогают делать итерации короче. Этап создания прототипа не должно быть жестко закреплен в конце процесса дизайна. Включение создания прототипа в вашу ежедневную дизайнерскую работу способствует возникновению идей и бытрой проверке концепций.
Эффективные прототипы являются одноразовыми.
Как и любой другой дизайн, предназначеный для реализации, мы создаём артефакт, предназначенный для того, чтобы донести идею до кого-то ещё (заинтересованного лица, разработчика, пользователя и т.д.). После того как дизайнерская идея была донесена, прототип реализации может быть отвергнут. Мы не должны переживать тяжёлое чувство, что создаём шедевр, который обязательно будет реализован, и безусловно не должны создавать прототип, работая на уровне кода.
Эффективные прототипы являются сфокусированными. Мы хотим выбирать интерактивные элементы нашего дизайна, которые действительно должны быть прототипированы. Ищите части вашего дизайна, которые сложны. Ищите паттерны взаимодействия, кторые давно известны в теории user experience. Ищите элементы взаимодействия, которые принесут пользу вашему продукту. Прототип, который продемонстрирует эти элементы, будет лучшим использованием вашего времени и энергии. […]
Выбор инструмента

Вместе с базовым набором, который инструмент прототипирования должен предоставлять нам для создания эффективного прототипа, мы рассмотрим, что подойдет нашей конкретной организации.
Первым делом давайте бросим взгляд на команду. Кто-нибудь из сотрудников умеет программировать? Является технолог дизайна членом нашей группы, занимающейся user experience? Есть ли у нас прочные отношения с инженерным отделом, кторый может помочь в создании прототипов? Что насчёт штатных разработчиков, кторые могут помочь? Определение наших технических возможностей укажет нам направление на программирование прототипа вручную или на использование основанного на рисовании ПО для прототипирования.
Как велика наша команда? Мы являемся командой по user experience, состоящей из одного человека, занимающегося одновременно и исследованиями, и рисованием скетчей и прототипированием? Или мы члены небольшой, сплоченой команды, которая может осуществить процесс создания готового прототипа менее чем за один день? Или мы являемся частью большой организации, и существует необходимость пробиваться в мутной воде корпортативной политики и различных точек зрения на наш прототип? Зачастую, чем больше команда, тем больше деталей прототипа (описания) потребуется.
Где находится люди, которые будут оценивать наш прототип? Находятся ли они в одном с нами офисе, заглядывая через плечо? Или они далеко? Находятся ли они в стране с тем-же самым часовым поясом? Положительный ответ на этот вопрос увеличивает вероятность обсуждения с помощью прототипа, так как он на все 100% описывает себя сам.
Является ли команда, занимающаяся user experience, частью команды по разработке, или привлечённой группой, занимающейся консалтингом? Если мы часть команды, то сильно ли мы интегрированы с инженерной группой, или мы совершенно отдельный департамент? Группе по user experience, которую привлекли со стороны, зачастую приходится отстаивать свой концепт дизайна немного больше.
Какой у нас бюджет на средство прототипирования? Как и с большинством ПО, границы предложений охватывают диапазон от бесплатного до дорогого. Лучшие решения как правило относятся к нижней части среднего ценового диапазона. Супер-дорогие решения (как в отношении времени, так и в отношении цены) как правило своего не стоят.
Насколько гибким должен быть наш инструмент прототипирования? Ориентируемся ли мы только лишь на одну платформу, например на веб? Или мы создаём дизайн для многих платформ, мобильной, терминалов, телевидения, бытовой электроники, интернета? Многие средства прототипирования создаются лишь для одного направления (чаще всего для веб-сайтов), поэтому мы либо должны выбрать что-то одно, что нам нравится, или остановиться на методах создания прототипов с помощью программирования.
Инструменты прототипирования
С учётом указанных критериев создан список инструментов прототипирования. […] Я надеюсь, что вместе мы сможем сформулировать подробные критерии выбора и варианты аспектов прототипирования. Этот список будет пересматриваться на основе обратной связи с сообществом.
Название инструмента Описание Платформа/Цена/Производитель Ссылка
Axure RP Pro Инструмент, ориентированный на создание прототипов веб-сайтов. Генерирует кликабельный HTML и документацию в формате Word. Поддерживает комплексное взаимодействие. Windows / $ 589 / Axure www.axure.com/p101_5.aspx
Balsamiq Mockups Позволяет очень быстро создават макеты вашего ПО. Сгенерированное содержимое выглядит как скетчи, что поможет не вводить в заблуждение тех, кто может подумать, что программа уже готова. Веб / $ 79 / Balsamig www.balsamiq.com
CogTool* Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность. Предсказывает, сколько времени опытному пользователю понадобиться для выполнения той или иной задачи. Кроссплатформенный / Бесплатный / Bonnie E. John cogtool.hcii.cs.cmu.edu
Coutline* Веб-приложение для создания и просмотра интерактивных прототипов. Включает в себя функции по управлению проектом и участию контролирующей группы. Веб /? / Coutline www.coutline.com www.usability.by/coutline
Dreamweaver Используйте визуальную часть Dreamweaver для перетаскивания и размещения элементов дизайна с помощью drag-and-drop, добавления элементов интерактивности, и погружайтесь в код для более комплексного прототипирования. Кроссплатформенный / $ 399 / Adobe www.adobe.com/products/dreamweaver
EasyPrototype* Очень похож на популярный Axure, легкий инструмент, позволяет проектировать экранные формы, экспортировать интерактивные HTML-прототипы и документацию. Кроссплатформенный / $ 69 / ExtremePlanner Software www.extremeplanner.com/easyprototype
Excel* Вы думаете, «Excel, ты с ума сошел»? Авторы этой книги так не считают. Кроссплатформенный / $ 229 / Microsoft www.effectiveprototyping.com/ep_excel.shtm excelprototyping.weebly.com
Expression Blend Генерирует прототипы для Silverlight и WPF приложений с богатыми интерактивными возможностями, быстрая скорость работы посредством Drag-и-Drop. Windows / $ 499 / Microsoft www.microsoft.com/expression/products/Overview.aspx?key=blend#page-top
Expression Blend + SketchFlow* Cоздание карт потока задач и концепций интерфейсов, которые выглядят как скетчи. Прототипы можно преобразовывать в конечный продукт с помощью Expression Suite. Windows / $ 599 / Microsoft www.microsoft.com/expression/products/Sketchflow_Overview.asp
Expression Design Мощный инструмент рисования для создания прототипов HTML, Silverlight и WPF приложений с ограниченной интерактивностью. Windows / $ 699 / Microsoft www.microsoft.com/expression/products/Overview.aspx?key=design
Fireworks Возможно создание сложных интерактивных прототипов. Множество инструментов аналогичны некоторым инструментам из Adobe suite. Имеется возможность экспорта в PDF или HTML. Кроссплатформенный / $ 299 / Adobe tv.adobe.com/#VI+f1498v1659
FlairBuilder* Создаёт интерактивные экранные формы с помощью десктопного Air приложения. Отправляет результат клиенту для просмотра в виде самостоятельного приложения. Кросплатформенный / $ 99 / Cristian Pascu www.flairbuilder.com
Flash Быстро генерирует анимацию или простые интерактивные прототипы. При наличиии знаний ActionScript позволяет создавать сложные интерактивные прототипы. Кроссплатформенный / $ 699 / Adobe www.boxesandarrows.com/view/quick-and-easy-flash
Flash Catalyst Инструмент, еще находящийся в процессе раработки, призван помочь дизайнерам в создании интерфейсов для флэш-приложений. Кроссплатформенный /? / Adobe labs.adobe.com/technologies/flashcatalyst
Flex Несмотря на то, что более приспособлен для разработчиков, WYSIWYG редактор и поддержка импорта скинов из Ilustrator дают возможность быстро пройти путь от проекта до опытного образца. Есть возможность экспорта Flash или Air приложений. Кроссплатформенный / $ 249 / Adobe www.adobe.com/products/flex
ForeUI* Создаёт макеты, определяет и моделирует поведение приложения в браузере. Кроссплатформенный / $ 79 / EaSynth Solution www.foreui.com
FormBuilder for Drupal Имеет веб-интерфейс с возможностью перетаскивания элементов на страницу. Создаёт рабочтающие формы, включая требования к вводимым параметрам, за считанные минуты. Веб / Бесплатный / Lullabot www.lullabot.com/blog/drupals-form-building-future
GUI Design Studio* Создаёт интерфейсы, аннотации к ним, строит раскадровки для определения рабочего прототипа. Имеет прекрасный визуальный стиль, похожий на скетчи. Windows / $ 499 / Caretta Software www.carettasoftware.com/guidesignstudio
iPlotz* Веб-приложение, создающее интерактивные экранные формы.Также включает в себя базовый набор для управления проектом, вроде присваивания задач. Доступна версия для десктопа (Air). Веб / $ 99 [1] / iPlotz iplotz.com
iRise Комплексный инструмент для моделирования бизнес-процессов и проектирования интерфейса приложения. Windows / $ 6995 / iRise www.irise.com
Justinmind Prototyper* Создаёт экранные формы с возможностью определения их поведения через описание с помощью use case-диаграмм. Кроссплатформенный (Для Mac пока только бета-версия) / $ 690 / Justinmind justinmind.com
JustProto* Веб-приложение, ориентированное на работу с удалённой командой. Веб / $ 99 [1] / DeSmar www.justproto.com/en
Keynote Похож на Powerpoint. Позволяет объектам быть кликабельными, открывать внешние ссылки, проигрывать Quicktime формат, атовматически переходить к новому слайду. Mac / $ 79 / Apple www.apple.com/iwork/keynote
LiveView Просмотр вашего рабочего стола на виртуальном iPhone, или в качестве приложения на реальном iPhone. Mac / Бесплатный / IDEO labs.ideo.com/2009/01/20/liveview-an-iphone-app-for-on-screen-prototyping
Lucid Spec* Дизайн экранных форм и моделировние рабочих приложений с использованием стандартных элементов управления и простого в использовании инструмента рисования. Windows / $ 499 / Elegance Technologies www.elegancetech.com/LS/LS.aspx
MockApp* Библиотека элементов интерфейса iPhone для Keynote. Есть также неоттестированная версия для Powerpoint, производящая некорректный экспорт. Кроссплатформенный / Бесплатный / Dotan Saguy mockapp.com
MockupScreens* Простой инструмент для создания экранных форм без интерактивных возможнстей. Windows / $ 100 / MockupScreens mockupscreens.com
OmniGraffle Инструмент для построения диаграмм и макетов, которые можно экспортировать в виде кликабельного HTML или PDF. Mac / $ 200 / OmniGroup urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle
OverSite* Создаёт структуру приложения, позволяет проектировать интерфейсы и моделировать приложения в виде кликабельного прототипа. Существует возможность импорта существующего сайта для использования в качестве отправной точки. Кроссплатформенный / $ 65 / OverSite taubler.com/oversite
Pencil Дополнение для Firefox, представляющее из себя нечто большее, чем просто создатель экранных форм или инструмент прототипирования. Кроссплатформенный / Бесплатный / Duong Thanh An www.evolus.vn/Pencil
pidoco* […] Веб-инструмент для прототипирования, с возможностью совместной работы в стандартном режиме и режиме скетчей. Веб / $ 600 [2] / pidoco pidoco.com/en
Polypage* jQuery-плагин, позволяющий показывать/скрывать элементы страницы. С его помощью можно моделировать изменение состояния через панель инструментов. Кроссплатформенный / Бесплатный / ClearLeft 24ways.org/2008/easier-page-states-for-wireframes
Powerpoint Слайды Powerpoint — прототип? Да, это малоизвестный факт, но Powerpoint поддерживает интерактивные горячие точки, кторые можно использовать для переходов между слайдами. Это можно скомбинировать с анимацией переходов. Кроссплатформенный / $ 229 / Microsoft www.boxesandarrows.com/view/interactive
Protonotes Не является инструсментом прототипирования, но позволяет разрозненной команде комментировать проект через интернет. Веб / Бесплатный / Webanza www.protonotes.com
Protoscript Супер-упрощенный скриптовой язык, дающий дизайнерам возможность добавления элементов динамики к существующим HTML-страницам. Веб / Бесплатный / Bill Scott protoscript.com
Protoshare Веб-приложение, ориентированное на команды, которым требуется возможность совместной работы с интерактивными экранными формами. Веб / $ 156 [1] / Site 9 www.protoshare.com
Prototype Composer Даёт возможность прототипирования для веб и десктоп-приложений. […] Windows / Бесплатный / Serena www.serena.com/products/prototype-composer/index.html
Screen Architect* Работает совместно с инструментом UML-моделирования Enterprise Architect для создания прототипов интерфейса в формате RTF и HTML. Windows / $ 120 [3] / CATCH www.screenarchitect.com
Tinderbox* Комплексный инструмент для записей, который может быть использован для экспорта в кликабельный HTML. Mac / $ 229 / Eastgate Systems www.eastgate.com/Tinderbox
Visio Professional Многие называют Visio «золотым стандартом» для инструментов создания экранных форм. Может создавать интерактивные прототипы. Windows / $ 560 / Microsoft office.microsoft.com/en-us/visio/FX100487861033.aspx
XHTML & CSS Овладейте навыками программирования, избавьтесь от программ для прототипирования и создавайте прототипы руками! Кроссплатформенный / Бесплатный / W3C? 😉 www.boxesandarrows.com/view/prototyping-with

* Выпущен, или добавлен в таблицу после опубликования поста в марте 2009
[1] За год
[2] За год
[3] Плюс $ 135 за Enterprise Architect
grumbler_chester: Таблица, содержащая список инструментов прототипирования, в оригинальном посте регулярно дополняется.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *