Содержание сайта
Разное
Создание прототипов
Обзор программ /
Список программ

Содержание

Список всех программ

Редакторы HTML
Редакторы CSS
Текстовые редакторы
Записные книжки
Работа с изображениями
Создание карты сайта
Создание навигационных панелей (меню)
Создание мультипликации GIF и Flash
Создание фотоальбомов
Видео
Создание карты ссылок
Веб - формы
Календари
Снимки экрана
Отборщики цвета
Комплект инструментов
Баннеры и эмблемы
Кнопки
Электронные книги
Сайты для разных экранов
Формулы
Проверка ссылок
Работа с файлами
Создание справок

Создание прототипов

Работа с PDF

И другое

Введение

Прототип - опытный образец чего-либо.

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

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

Программа для создания прототипа обычно выполняет три основные задачи:
  1. Создание дизайна интерфейса программы (главного окна и всех других элементов интерфейса) или дизайна сайта (дизайна веб-страниц). Некоторые программы не имеют своих возможностей для дизайна и используют импортированные изображения, созданные в сторонних графических редакторах (например, в Photoshop).
  2. Создание прототипа. При этом элементы дизайна наделяются так называемой интерактивностью, т.е. при воздействии на них происходит какое-то действие. Например, для программ при щелчке по кнопке открывается определенное окно программы. Для сайта - при щелчке по ссылке открывается определенная страница.
  3. Организация сотрудничества, т.е возможности работы с клиентами, коллегами и заинтересованными сторонами с получением обратной связи на идеи и проекты.

Создании опытного образца (прототипа) начинается с создания макета.

Макет

Создание макетов - первый этап при создания прототипа.

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

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

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

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

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

Ниже на рисунке - макет интерфейса программы на начальной стадии работы (макет низкой точности):



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

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


Прототип


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

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

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


Совместная работа

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

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

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


Создание интерактивности

Интерактивность для нашего случая - это способность создаваемого макета (прототипа) реагировать на действия пользователя.

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

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

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

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

Для создания прототипа с ограниченной интерактивностью достаточно:
  • Нарисовать на листе бумаги макеты страниц (окон) и применить сканер, чтобы сохранить рисунки в формате изображений (или - применить для рисования макетов графический редактор)
  • Применить любую программу для создания карты ссылок, чтобы создать "горячие точки" и ссылки на рисунках макетов.
  • Интерактивный прототип создан, его можно преобразовать в комплект html-страниц и разместить в Интернете.

О терминах:

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

GUI
(от англ. graphical user interface)  — графическая среда организации взаимодействия пользователя с системой (иначе -  организация взаимодействия человека и машины). Графический интерфейс позволяет управлять поведением системы через визуальные элементы управления: окна, списки, кнопки, гиперссылки и т.д.

UI (User interface) - Пользовательский интерфейс -  это визуальный элемент веб-страницы или экрана, который вы собираетесь использовать для взаимодействия с устройством. Состоит из элементов, таких как кнопки, страницы, боковые панели и другие графические макеты.

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

Примечание: Все желающие могут ознакомиться подробнее со значениями терминов UIUX, UX design, UI design и пр.  в Интернете (например, Википедия о UI).

Mockup - см. Макет. Иногда применяются названия "макет низкой точности" и "макет высокой точности" в зависимости от прорисовки деталей макета.
Prototype - см. Прототип
Wireframe (Каркас) -  часть проекта прототипа, представляющая собой макет страницы (окна) разной степени проработанности, начиная от грубого наброска и заканчивая окончательным вариантом. После публикации проекта Wireframe преобразуется в html-страницу.

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


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


Для создания прототипов могут применяться программы самых различных категорий - графические редакторы, текстовые редакторывеб-редакторы, программы для создания карты ссылок и пр.  Некоторые дизайнеры могут применять для создания прототипов неожиданные программы типа Excel (электронные таблицы), IRise (модерирование программного обеспечения),  FileMaker (работа с базами данных), Ruby on Rails (RoR) и другие. Применение той или иной программы зависит от специфики прототипа.

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

Но нужно ли применять спецпрограммы для создания прототипа сайта?

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

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

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


Обзор программ

Список программ

См. также: О веб-дизайне


Последнее обновление: май 2015 г.