DDR64.ru

Выделяем главное

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

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

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

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

Введение

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

  • меню и прочие элементы навигации;
  • кнопки и формы;
  • ссылки;
  • изображения, анимация и иные мультимедийный файлы;
  • таблицы и т. д.
Рис. 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

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

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

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

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

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

Поделиться
Оценить статью
(Пока оценок нет)

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

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

Войти с помощью: