20 ресурсов для прототипирования


Содержание

Выбираем инструмент прототипирования

Что такое «инструменты прототипирования?»

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

Как эффективно ими пользоваться? Каким должен быть прототип?

Лучшими являются те прототипы, которые позволяют быстро переходить от набросков к интерактивному воплощению. Это значит, что:

  1. У вас не должно уходить много времени на создание макета. Этот процесс должен упрощать вашу работу, а не добавлять новых обязанностей.
  2. Прототипы должны быть одноразовыми. Они создаются, чтобы донести какую-либо вашу идею до кого-либо: разработчика, пользователя, коллег. Прототип может быть принят либо отвергнут, и в последнем случае у вас не должно возникать чувства, будто уничтожается созданный вами шедевр. И уж точно прототипы не должны создаваться на уровне кода.
  3. В создаваемом вами прототипе должны быть отражены только основные детали интерфейса, которые подразумевают какое-либо взаимодействие с пользователем.

Как правильно выбрать инструмент?

  1. Оцените размер вашей команды. Если вы работаете в одиночку, то у вас, вероятно, нет времени прорабатывать дизайн подробно, да оно вам и не нужно — прототип для вас как черновик, на котором вы записали свою идею, чтобы не забыть её. Если вы член небольшой, но сплочённой команды, то у вас, вероятно, есть возможность создать прототип менее, чем за день, но создать его нужно так, чтобы вся команда правильно поняла идею. Если же вы являетесь частью большой организации, то, вероятно, существует необходимость пробиваться в мутной воде корпортативной политики и различных точек зрения на наш прототип. В целом тенденция проста — чем больше команда, тем больше деталей прототипа потребуется.
  2. Оцените то, насколько обсуждение дизайна будет опираться именно на прототип. Где находятся люди, которым вы будете его показывать? Если они сидят с вами в одном офисе, то у вас будет возможность пояснять детали прототипа самостоятельно, но если эти люди находятся далеко — в другой стране, возможно, даже с другим часовым поясом, то возрастает необходимость создать прототип, который будет описывать себя на 100%.
  3. Оцените степень интеграции вашей группы в команду, занимающуюся разработкой. Вы являетесь частью команды по разработке, или привлечённой группы, занимающейся консультациями? Если вы часть команды, то сильно ли вы интегрированы с инженерной группой, или вы совершенно отдельный департамент? Группе, которую привлекли со стороны, зачастую приходится отстаивать свой концепт дизайна немного больше.
  4. Оцените свои финансовые возможности. Спектр цен охватывает диапазон от бесплатного до дорогого. Лучшие решения, как правило, относятся к нижней части среднего ценового диапазона. Супер-дорогие решения (как в отношении времени, так и в отношении цены), как правило, своего не стоят.

1. Pidoco

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

В Pidoco более 400 элементов интерфейса. Есть возможность просматривать созданные макеты прямо на веб странице, в том числе тестировать взаимодействие.

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

2. Moqups

Moqups написан на HTML5 и лишь немногим отличается от Pidoco. Он предоставляет меньше возможностей для проработки интерактивности, зато есть очень удобная фича — возможность привязки элементов интерфейса к сетке. К тому же он дешевле.

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

3. Fluid

Ещё одно бразуерное приложение, написанное на HTML5, которое работает по технологии drag-n-drop — Fluid. Он также несложен в освоении, есть возможность предпросмотра своей работы в том виде, в каком она будет в вашем телефоне. Особого внимания заслуживает коллекция элементов интерфейса — у Fluid их более 2000, среди них есть управляющие элементы вроде экранной клавиатуры или кнопок «закрыть», «свернуть» и т.д.

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

4. Balsamiq

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

Стоимость: 89$ за вечную лицензию

5. UXPin

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

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

6. Justinmind

Justinmind Prototyper — ещё одно десктопное приложение. С помощью него вы сможете проработать мельчайшие детали дизайна, именно на это сделан акцент. Если вы работаете небольшой командой или вовсе в одиночку, вам, скорее всего, нужно что-то более простое.

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

7. SnapUp

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

Стоимость: бесплатная Beta

8. Wireframe

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

Стоимость: бесплатно, премиум от 15$ в месяц

9. Antetype

Antetype позиционируется как инструмент «от дизайнеров и для дизайнеров». Приложение десктопное, работает только на Mac OS X. Если вы разрабатываете что-то под продукцию Apple, выбирайте его не задумываясь.

Стоимость: 190$ вечная лицензия

10. Подручные средства

Если вы не хотите что-то покупать, скачивать и где-то регистрироваться, то для создания макета может подойти, например, MS PowerPoint. Он, в общем-то, поддерживает и изменение размера слайда, и добавление управляющих элементов, и интерактивность. А если вы купите PowerMockup за 60$, то ваш PowerPoint будет ещё и специально заточен под это.

Ещё один вариант — HTML+CSS. Серьёзно, несложные прототипы можно создавать и руками.

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

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

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

POP App

Это был первый сервис для прототипирования, с которой я познакомился. Она позиционирует себя как простой инструмент для работы даже с очень сырым макетом. Вы прикидываете на бумаге, как будут выглядеть экраны в вашем приложении, фотографируете наброски и обрабатываете с помощью POP App. Объекты интерфейса, которые должны быть интерактивными, можно выделить и связать с другими объектами и экранами; например, кнопка login связывается с экраном регистрации. В итоге у вас получается быстрый прототип, экраны которого нарисованы на бумаге в буквальном смысле. Но вместо ручных эскизов вы можете использовать и макеты, созданные в графических редакторах.


POP App работает по принципу постраничных программ для прототипирования пользовательского интерфейса. Вы загружаете в них кипу экранов (порядка 50–100) и соединяете их переходами. Редактор воспринимает каждый экран в макете как слитую картинку. На ней вы выделяете область и указываете, на какой экран человек попадёт, если нажмёт на эту область.

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

Как показать прототип заказчику или пользователю: попросить его поставить на свой девайс специальное приложение.

Цена: бесплатно для двух проектов и одного пользователя. Создать в POP App больше проектов можно, заплатив от 12 $ в месяц.

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

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

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

Минусы: нет удобных символов (как, например, в InVision) и разных состояний экранов. На десктопе приложение работает только в вебе.

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

Цена: бесплатно — для двух проектов, больше — 14 $.

InVision

Эта программа для прототипирования интерфейса более продвинутая, чем Marvel, и позиционирует она себя как инструмент для профессионалов. У программы есть плагин для Sketch — Craft, который позволяет превращать в прототип прямо в Sketch, без отрыва от производства. Среди других бонусов быстрая подстановка шаблонов имён, заголовков, дат и текстов. Например, в макете вам нужно быстро представить кучу разных имён, тогда вы выделяете нужные слои и нажимаете соответствующую кнопку в плагине, и вуаля, плагин сам подставляет рандомный контент. Этот же плагин даёт возможность использовать фото с бесплатного стока Unsplash. Сделать дизайн прямо в InVision пока не получится, но, по слухам, скоро появится и такая возможность.

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

Плюсы: удобные комментарии к прототипам — можно прямо в чате обсуждать ту или иную функцию. Также недавно появилась возможность «инспектить» макет: разработчик может посмотреть размеры объектов в прототипе, расстояние между ними и так далее — прямо как в Zeplin. А ещё есть возможность совместной работы и менеджер задач, похожий на Trello.

Минусы: после Marvel интерфейс InVision не самый удобный. Чтобы выбрать нужный экран, нужно долго искать его в списке, то есть предварительно нужно запоминать название. А если экранов больше 50, это превращается в сущий ад.

Как показать прототип заказчику или пользователю. Показывать прототип пользователю можно также через мобильное приложение.

Цена: бесплатно навсегда.

Origami Studio от Facebook

На фоне вышеописанных программ для прототипирования приложений интерфейс Origami Studio самый сложный. Работает инструмент только на Mac и только с аккаунтом разработчика Apple. К программе можно подключить очень много патчей, что расширяет её возможности, но разобраться в них без туториала сложно.

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

Как показать прототип заказчику или пользователю. Это ещё одно слабое место редактора. Чтобы пользователь смог посмотреть прототип, у него тоже должен быть установлен Origami, что требует наличия Mac и аккаунта разработчика.

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

Другие бесплатные программы для прототипирования

Atomic

Цена: бесплатно для одного проекта; 19 $ в месяц для неограниченного количества проектов; 99 $ в месяц, если программой пользуется команда до пяти человек, от 145 $ в месяц, если больше.

Adobe XD

RapidUI

Цена: бесплатно, и это тоже .

Webflow

Цена: бесплатно для двух проектов. Для десяти — 16 $ в месяц, за 35 $ в месяц можно получить неограниченный доступ. Эти цены не включают стоимость поддержки хостинга и действуют, если вы платите за год использования.

MockFlow

бесплатно для одного проекта. Лимит в количестве проектов снимается за 14 $ в месяц. Для команд подписка стоит от 29 $ в месяц.

MOCKUP.IO

Заключение

Прототипирование — обязательный этап при создании дизайна в компании Лайв Тайпинг. После того как прототип утверждён, мы создаём макет, который идёт в разработку (подробнее о смысле этого этапа мы писали в нашей статье «Как мы делаем проекты: проектирование и прототипирование»). И это только начало работы над вашим проектом, но очень важное. Подробно о каждом этапе создания мобильного приложения вы можете на нашей бесплатной консультации. Расскажите о своём проекте в форме заявки , и мы вам позвоним.

Прототип сайта: создание прототипа с примерами и инструментами

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

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

  • контактные данные;
  • навигация;
  • СТА-кнопки;
  • логотипы;
  • шапка сайта, или хедер;
  • нижняя часть сайта, или футер и т.д.

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

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

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

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

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

Кстати, мы занимаемся созданием сайтов!

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

Axure

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

  • Возможность создания блок-схем, каркасов, макетов, маршрута пользователей по сайту;
  • Обратная связь;
  • Пробный период составляет 30 дней;
  • Минимальный тариф – 29 долларов;
  • Среди клиентов сервиса – более 85 % компаний из списка Fortune.


Figma

Figma – это графический редактор, функционал которого позволяет создать интерактивный прототип сайта или приложения для смартфона, различные элементы оформления страницы (кнопки, формы обратной связи, иконки и т.п.), а также векторные иллюстрации. Работает программа как на Windows, так и на Mac.

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

Sketch

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

  • Пользоваться инструментом можно только на Mac;
  • Возможность интеграции с другими инструментами;
  • Пробный период составляет 30 дней;
  • Стоимость однократной лицензии – 99 долларов;
  • Среди основных клиентов – такие крупные компании, как Google, Booking, Twitch, IBM и др.

Adobe XD

Полное название программы Adobe XD – Adobe Experience Design CC. Это легкий векторный редактор, в котором есть все необходимые для создания прототипа сайта инструменты. Работать в программе можно, только установив ее на компьютер.

  • Возможность импорта файлов Adobe Photoshop, Illustrator, Sketch;
  • Функции рисования и формы, векторного редактирования, авто-анимации;
  • Бесплатный доступ к основным функциям;
  • Программа поддерживается только на Windows 10.

Почему прототип сайта имеет ключевое значение?

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

Цукерберг рекомендует:  16 правил грамотной верстки макета

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

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

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

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

Итак, что же вам даст прототипирование?

  1. Наглядный набросок предстоящей работы. Прототипирование помогает расположить все страницы в нужном порядке, грамотно разместить основные элементы и информационные блоки.
  2. Планирование. Сразу понятно, какой объем работы предстоит выполнить, каковы основные задачи и в какой последовательности их выполнять, каких специалистов задействовать, чему уделить больше времени.
  3. Экономия ресурсов. Прежде всего – времени и денег. Если сразу продумать структуру и отметить детали на прототипе, то в дальнейшем не придется по сто раз переделывать готовый сайт и вносить правки. Страницы сразу примут вид, намеченный вами ранее в прототипе.
  4. Создание прочной базы для других специалистов. Готовый прототип сайта определит направление дальнейшей деятельности разработчиков и дизайнеров. У них сформируется четкое понимание стоящих перед ними задач и объема работы.
  5. Исключение ошибок. Пока план будущего сайта существует у вас в голове, все кажется предельно простым и понятным. Но как только идеи воплощаются в реальность в формате прототипа, недочеты и явные ошибки неизбежны. В этом нет ничего плохого. Прототип и нужен частично для того, чтобы вовремя обнаружить устранить изъяны: убрать лишний элемент, добавить СТА-кнопку, поменять местами блоки и т.д. Взгляд со стороны рождает новые идеи и интересные решения.

Основные моменты при создании прототипа

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

Шаг 1. Проанализируйте конкурентов, определите цели сайта.

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

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

  • Каково назначение сайта?
  • Какие потребности клиентов нужно удовлетворить?
  • Чего ждут от онлайн-ресурса потенциальные заказчики?

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

Шаг 2. Продумайте структуру

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

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

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

Следующие элементы типичны для контентной части страницы:

  • карточки товаров;
  • баннеры;
  • слайдеры;
  • раздел с отзывами;
  • текст и картинки, видео;
  • статьи;
  • СТА-кнопки и т.д.

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

Заключительная часть страницы – это футер. Обычно тут оставляют контактные данные, ссылки на социальные сети, нужные документы и прочее.

В целом, все множество элементов в прототипе делится на следующие категории:

  1. Информационные – содержат сведения о том, чему посвящен сайт, кто его владелец, что он предлагает. По сути, это весь контент, который предлагается пользователю для ознакомления и извлечения определенной информации. К этой категории элементов относятся текст, фотографии, видео и иллюстрации, которые дают ответ на волнующие посетителя вопросы: как заказать товар, как будет производиться доставка, в течение какого срока, какие есть способы оплаты и т.д.
  2. Функциональные – подталкивают пользователя к совершению целевого действия: заказать, зарегистрироваться, купить, скачать и т.д. Сюда можно отнести различные формы и кнопки.
  3. Навигационные – это все элементы, которые обеспечивают пользователю комфортное пребывание на сайте. Навигация необходима пользователю, чтобы он понимал, в какой именно части страницы или сайта находится. К навигационным элементам относятся строка поиска, разделы сайта, теги, графа входа в личный кабинет и т.д.

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

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

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

Примеры хороших прототипов

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


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

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

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

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

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

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

  • возможные скидки и акции;
  • производитель товара;
  • варианты и время доставки;
  • способы оплаты;

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

В футере мы видим навигационные ссылки на страницы с подробной информацией о доставке, оплате, компании и сотрудничестве.

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

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

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

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

Сайдбар включает в себя:

  1. профиль пользователя;
  2. ссылки на последние созданные проекты посетителя, черновики и спецификации;
  3. подписки на других дизайнеров;
  4. кнопки выхода из профиля и со страницы поддержки.

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

Прототип тендерной площадки

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

В шапке прототипа размещено название компании, ссылки на более подробные сведения об организации, тендерах, поставщиках и тарифах. Также есть СТА-кнопки для создания профиля и авторизации.

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

Этот прототип тоже довольно прост и интуитивно понятен. На нем имеется вся информация, необходимая для дальнейшей реализации полноценного ресурса.

Следующий шаг после прототипа

В рамках разработки сайта стадия прототипирования следует сразу за этапом изучения конкурентов и целевой аудитории. В ходе создания прототипа дизайнер определяется со следующими моментами:

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

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

Далее идет технический дизайн – разработка графических шаблонов всех страниц ресурса на основе утвержденной дизайн-концепции сайта, а также реализация созданного прототипа.

Прототипирование: польза для дизайнера

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

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

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

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

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

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

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

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

С помощью составления прототипа дизайнер:

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

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

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

Рассмотрим процесс создания прототипа и основные инструменты для его разработки.

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

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

Этап 1. Аудит компании и анализ конкурентов

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


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

Этап 2. Разработка структуры сайта

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

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

Этап 3. Разработка прототипа

После подготовительных мероприятий можно приступать к прототипированию. Выделяют два вида прототипов:

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

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

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

  1. Графические редакторы. Для прототипирования можно использовать те рабочие программы, в которых непосредственно создается дизайн сайта — Sketch, Figma, инструменты Adobe, Corel и прочее. Сюда же можно отнести стандартные редакторы Microsoft Office.
  2. Специальные программы и онлайн-ресурсы. Есть как платные, так и бесплатные приложения, созданные специально для разработки прототипов. Это может быть как лицензированное ПО, устанавливаемое на компьютер, так и онлайн-сервис, работающее через браузер. Примеры таких программ: Axure, Mockflow, Principle, Flinto и другие.

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

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

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

Например, так выглядит шапка интернет-магазина сладостей:

На прототипе все элементы изображаются схематично:

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

Контентная часть — это основная часть страницы. Здесь может располагаться:

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

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

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

Все элементы в прототипе можно разделить на три вида:

  1. Информационные. Данные элементы предоставляют какую-либо информацию о сайте и его владельце, это весь потребляемый пользователем контент. Текст, изображения и иллюстрации, которые помогают клиенту найти ответ на поставленный вопрос: как осуществляется доставка, какие товары есть в наличии, как оплатить покупку и прочее.
  2. Функциональные. Нужны для целевых действий пользователя — подписаться, купить, оформить заказ. Как правило, это кнопки и формы.
  3. Навигационные. Чтобы пользователь комфортно чувствовал себя на странице, понимал, в какой части сайта он находится и мог беспрепятственно перейти в нужный раздел, разрабатываются элементы навигации. Мы перечисляли основные приемы в этой статье.

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

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

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

2 совета по созданию прототипов для веб-дизайнеров

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

1. При создании прототипа учитывайте мнение других исполнителей

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

2. Ориентируйтесь на конечную целевую аудиторию

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

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

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

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

Цукерберг рекомендует:  Убираем index.php из URL

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

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

1. Axure RP

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

2. Mockplus

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

3. Balsamiq Mockups

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

4. Justinmind

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

5. InVision


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

6. UX Pin

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

7. OmniGraffle

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

8. Flinto

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

Заключение

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

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

Время чтения: 6 минут Нет времени читать? Нет времени?

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

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

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

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

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

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 стороной.

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

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

Прототип сайта: создание прототипа с примерами и инструментами

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

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

  • контактные данные;
  • навигация;
  • СТА-кнопки;
  • логотипы;
  • шапка сайта, или хедер;
  • нижняя часть сайта, или футер и т.д.

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

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

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

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

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

Кстати, мы занимаемся созданием сайтов!

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

Axure

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

  • Возможность создания блок-схем, каркасов, макетов, маршрута пользователей по сайту;
  • Обратная связь;
  • Пробный период составляет 30 дней;
  • Минимальный тариф – 29 долларов;
  • Среди клиентов сервиса – более 85 % компаний из списка Fortune.

Figma

Figma – это графический редактор, функционал которого позволяет создать интерактивный прототип сайта или приложения для смартфона, различные элементы оформления страницы (кнопки, формы обратной связи, иконки и т.п.), а также векторные иллюстрации. Работает программа как на Windows, так и на Mac.

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

Sketch

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

  • Пользоваться инструментом можно только на Mac;
  • Возможность интеграции с другими инструментами;
  • Пробный период составляет 30 дней;
  • Стоимость однократной лицензии – 99 долларов;
  • Среди основных клиентов – такие крупные компании, как Google, Booking, Twitch, IBM и др.

Adobe XD

Полное название программы Adobe XD – Adobe Experience Design CC. Это легкий векторный редактор, в котором есть все необходимые для создания прототипа сайта инструменты. Работать в программе можно, только установив ее на компьютер.

  • Возможность импорта файлов Adobe Photoshop, Illustrator, Sketch;
  • Функции рисования и формы, векторного редактирования, авто-анимации;
  • Бесплатный доступ к основным функциям;
  • Программа поддерживается только на Windows 10.

Почему прототип сайта имеет ключевое значение?

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

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

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

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

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

Итак, что же вам даст прототипирование?

  1. Наглядный набросок предстоящей работы. Прототипирование помогает расположить все страницы в нужном порядке, грамотно разместить основные элементы и информационные блоки.
  2. Планирование. Сразу понятно, какой объем работы предстоит выполнить, каковы основные задачи и в какой последовательности их выполнять, каких специалистов задействовать, чему уделить больше времени.
  3. Экономия ресурсов. Прежде всего – времени и денег. Если сразу продумать структуру и отметить детали на прототипе, то в дальнейшем не придется по сто раз переделывать готовый сайт и вносить правки. Страницы сразу примут вид, намеченный вами ранее в прототипе.
  4. Создание прочной базы для других специалистов. Готовый прототип сайта определит направление дальнейшей деятельности разработчиков и дизайнеров. У них сформируется четкое понимание стоящих перед ними задач и объема работы.
  5. Исключение ошибок. Пока план будущего сайта существует у вас в голове, все кажется предельно простым и понятным. Но как только идеи воплощаются в реальность в формате прототипа, недочеты и явные ошибки неизбежны. В этом нет ничего плохого. Прототип и нужен частично для того, чтобы вовремя обнаружить устранить изъяны: убрать лишний элемент, добавить СТА-кнопку, поменять местами блоки и т.д. Взгляд со стороны рождает новые идеи и интересные решения.


Основные моменты при создании прототипа

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

Шаг 1. Проанализируйте конкурентов, определите цели сайта.

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

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

  • Каково назначение сайта?
  • Какие потребности клиентов нужно удовлетворить?
  • Чего ждут от онлайн-ресурса потенциальные заказчики?

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

Шаг 2. Продумайте структуру

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

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

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

Следующие элементы типичны для контентной части страницы:

  • карточки товаров;
  • баннеры;
  • слайдеры;
  • раздел с отзывами;
  • текст и картинки, видео;
  • статьи;
  • СТА-кнопки и т.д.

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

Заключительная часть страницы – это футер. Обычно тут оставляют контактные данные, ссылки на социальные сети, нужные документы и прочее.

В целом, все множество элементов в прототипе делится на следующие категории:

  1. Информационные – содержат сведения о том, чему посвящен сайт, кто его владелец, что он предлагает. По сути, это весь контент, который предлагается пользователю для ознакомления и извлечения определенной информации. К этой категории элементов относятся текст, фотографии, видео и иллюстрации, которые дают ответ на волнующие посетителя вопросы: как заказать товар, как будет производиться доставка, в течение какого срока, какие есть способы оплаты и т.д.
  2. Функциональные – подталкивают пользователя к совершению целевого действия: заказать, зарегистрироваться, купить, скачать и т.д. Сюда можно отнести различные формы и кнопки.
  3. Навигационные – это все элементы, которые обеспечивают пользователю комфортное пребывание на сайте. Навигация необходима пользователю, чтобы он понимал, в какой именно части страницы или сайта находится. К навигационным элементам относятся строка поиска, разделы сайта, теги, графа входа в личный кабинет и т.д.

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

Цукерберг рекомендует:  Совет - Гуманитарий хочет программировать!

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

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

Примеры хороших прототипов

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

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

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

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

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

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

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

  • возможные скидки и акции;
  • производитель товара;
  • варианты и время доставки;
  • способы оплаты;

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

В футере мы видим навигационные ссылки на страницы с подробной информацией о доставке, оплате, компании и сотрудничестве.

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

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

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

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

Сайдбар включает в себя:

  1. профиль пользователя;
  2. ссылки на последние созданные проекты посетителя, черновики и спецификации;
  3. подписки на других дизайнеров;
  4. кнопки выхода из профиля и со страницы поддержки.

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

Прототип тендерной площадки

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

В шапке прототипа размещено название компании, ссылки на более подробные сведения об организации, тендерах, поставщиках и тарифах. Также есть СТА-кнопки для создания профиля и авторизации.

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


Этот прототип тоже довольно прост и интуитивно понятен. На нем имеется вся информация, необходимая для дальнейшей реализации полноценного ресурса.

Следующий шаг после прототипа

В рамках разработки сайта стадия прототипирования следует сразу за этапом изучения конкурентов и целевой аудитории. В ходе создания прототипа дизайнер определяется со следующими моментами:

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

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

Далее идет технический дизайн – разработка графических шаблонов всех страниц ресурса на основе утвержденной дизайн-концепции сайта, а также реализация созданного прототипа.

Прототипирование сайтов. Методы прототипирования

Друзья, всем привет, рад, что заглянули на fotodizart.ru! Сегодня у нас еще одна статья, относящаяся к разработке сайтов, а именно мы поговорим об одном из этапов разработки сайтов, который называется прототипирование. Я постараюсь объяснить, что такое прототипирование, что такое прототип, для чего он нам нужен, с какой целью создается и еще ряд вопросов.

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

Что такое прототип и прототипирование?

Прототип – это схематичный макет (набросок, эскиз, html-документ) страницы или страниц сайта, с изображенными на нем всеми элементами дизайна (кнопками, изображениями, меню, формами и т.д.). Бывает двух видов статичный (изображение) и динамичный (Html).

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

Для чего мы создаем прототип?

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

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

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

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

Также не стоит забывать о том, что дизайнеру будет гораздо проще разработать дизайн сайта по прототипу нежели по брифу, ТЗ.

К прототипам обычно применяют такие требования как:

  • Высокая скорость создания прототипа. Быстрое прототипирование позволяет сэкономить время на разработку проекта.
  • Детализация (не для всех видов прототипов).
  • Легкость и скорость внесения изменений в прототип.
  • Интерактивность (возможность прототипа реагировать на действие пользователя).
  • Доступность для всех участников процесса (заказчик, дизайнер, менеджер, программист и т.д.).

Методы прототипирования сайтов

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

  1. Бумажное прототипирование;
  2. Прототипирование при помощи специальных программ (Axure Pro, WireframeSketcher, SketchFlow и т.д.);
  3. Прототипирование при помощи графических программ (Photoshop, Illustrator, InDesign и т.д.).

Бумажное прототипирование

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

Из плюсов данного метода можно отметить:

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

Из минусов данного метода можно отметить:

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

Прототипирование при помощи специальных программ (Axure Pro)

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

Из плюсов данного метода можно отметить:

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

Из минусов данного метода можно отметить:

  • минусов не обнаружено, разве что изучение программы.

Прототипирование при помощи графических программ (Photoshop)

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

Из плюсов данного метода можно отметить:

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

Из минусов данного метода можно отметить:

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


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

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

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

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

20 ресурсов для прототипирования

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

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

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

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

1) MockFlow

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

2) Сreately

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

3) Cacoo

Главная «фишка» ресурса состоит в том, что он позволяет работать над прототипом совместно. Для этого необходимо зарегистрироваться, после чего пользователь попадает в графический редактор. Еще одно достоинство данного сайта в большом количестве дополнительных модулей. Благодаря ним можно разработать даже самую сложную схему.
Тарифы: бесплатная версия позволяет производить экспорт только в формате png. Платная версия также открывает доступ к формату svg и неограниченному количеству диаграмм. Стоимость платной версии всего 5 долларов в месяц.

4) ProtoShare

Ресурс обеспечивает пользователя всем необходимым для создания макетов и прототипов любой сложности. Им пользуются множество известных компаний, организаций и учреждений, среди которых P&G, Leighton, Stanford University, Toastmasters International и др.
Тарифы: платная версия от 29 долларов в месяц. Ресурс предлагает бесплатную пробную версию на 30 дне с полным функционалом.

5) iPlotz

Серьезный инструмент, который работает в режиме онлайн и оффлайн. Большая библиотека элементов и частично русская версия – несомненно, достоинства ресурса. Кстати, он также предусматривает прототипирование интерфейсов для мобильной версии сайта.
Тарифы: платная и бесплатная версия. Вторая доступна только онлайн.

6) Pencil Project

Инструмент представляет собой плагин для FireFox. Однако, он заслуживает внимание не менее, чем ранее перечисленные. Он тщательно продуман. Создавать интерфейсы очень удобно благодаря большому количеству функций, инструментов и элементов. Можно разрабатывать многостраничные документы, осуществлять экспорт png, html и др.
Тарифы: бесплатно

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

Прототипирование и его роль в разработке сайта

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

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

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

Причины, по которым стоит делать прототипы

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

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

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

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

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

Основные виды прототипов

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

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

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

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

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

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

Ниже приведены популярные инструменты для создания прототипа:

1. Omnigraffle (приложение для OSX) — создает графические схемы, соединяя отдельные элементы линиями. Позволяет выстраивать диаграммы, содержит элементы моделирования, экспорта и импорта готовых файлов. Приложение легко освоить даже начинающему дизайнеру

2. ConceptDrawPro (приложение для Windows) — графическое приложение, которое используется для создания бизнес-проектов, прототипов и диаграмм, проектных документов.

3. Pidoco (онлайн приложение) — программное обеспечение, позволяющее создавать прототипы сайтов в один клик. Простой интерфейс делает роботу с Pidoco простой и понятной, а результат можно протестировать на любом мобильном устройстве.

4. Mockingbird (онлайн приложение) — помогает создавать интерактивные модели будущего сайта или программного обеспечения в режиме реального времени. Вы можете легко связать страницы между собой, посмотреть предварительный результат, внести правки и корректировки.

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

Упрощение процесса разработки при использовании прототипов

Сам по себе процесс создания прототипа достаточно простой. Для упрощения его условно делят на три составляющие:

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

2. Оценка — обсуждение с клиентом насколько точно мы поняли его требования и пожелания;

3. Доработка — доработка проблемных участков эскиза или изменение макета полностью.

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

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

Именно реклама выступает основным средством продвижения того или иного Интернет-ресурса, товаров и услуг, привлека.

Что такое дорвей? В переводе с английского это буквально означает «входная дверь». Следовательно, дорвей – это веб.

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих