Прототипирование сайта: разновидности и реализация – подробное руководство

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

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

Рассмотрим подробнее, что собой представляет данный этап разработки сайта, каковы разновидности прототипов бывают, какие требования предъявляют к ним заказчики и что называется хорошим прототипом.

Содержание:

Введение

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

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

Рис. 1 – Готовый прототип сайта, выполненный в разработанной для этого программе

Рис. 1 – Готовый прототип сайта, выполненный в разработанной для этого программе

На данном этапе нет места красоте, ни о каких элементах дизайна речь не идёт. Главная задача – понять:

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

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

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

Такие доработки выливаются в задержки и дополнительные финансовые затраты (или убыток).

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

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

Рис. 2 – Основное отличие прототипа (показан слева) от макета (справа)

Рис. 2 – Основное отличие прототипа (показан слева) от макета (справа)

к содержанию ↑

Правильный протопит

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

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

к содержанию ↑

Разновидности

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

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

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

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

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

к содержанию ↑

Концепции реализации

В общем случае при создании прототипа можно пойти четырьмя путями:

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

к содержанию ↑

Бумажная

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

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

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

 

Рис. 3 – Самый простой способ решения проблемы

Рис. 3 – Самый простой способ решения проблемы

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

Графические редакторы

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

Особенности (в зависимости от выбранного продукта):

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

Рис. 4 – Пример разработки в Photoshop

Рис. 4 – Пример разработки в Photoshop

Плюсы применения программного обеспечения:

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

к содержанию ↑

Специальное программное обеспечение

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

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

Кратко рассмотрим наиболее популярные из них.

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

http://www.axure.com/p101_5.aspx

Рис. 5 – Готовый проект, созданный в Axure RP Pro

Рис. 5 – Готовый проект, созданный в Axure RP Pro

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

http://www.adobe.com/products/dreamweaver

  • Visio из пакета офисных программ от Microsoft – профессиональная среда для работы с макетами, схемами и диаграммами. Высокая стоимость перекрывается возможностью совместной работы над проектом, что отличает программу ото всех конкурентов.
  • Prototype Composer – один из немногих бесплатных редакторов для Windows.

http://www.serena.com/products/prototype-composer/index.html

  • CogTool – простое приложение для работы с макетами, оценивающее скорость выполнения операций.

http://cogtool.hcii.cs.cmu.edu/

Рис. 6 – Функционал Cog Tool

Рис. 6 – Функционал Cog Tool

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

Особенности:

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

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

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

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

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

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

Пишу об интернет-сервисах, ну и обо всем понемногу :) Увлекаюсь современными технологиями. Люблю футбол, рок и читать - такое вот сочетание несочетаемого. https://www.work.ua/ru/resumes/1679218/ Мой телеграмм: @ProstoludinCFC

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.
Geek-Nose