Прототипирование - это схематический макет страницы или страниц сайта

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

Что называют прототипированием

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

Особенности прототипирования

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

Техническое задание + прототипирование сайта = ?

Подобные образцы являются частью ТЗ. Они позволяют задавать четкие границы разработки и способствуют устранению недопонимания между заказчиком и исполнителем. С помощью текста описывается техника, логика, структура и особенности администрирования сайта, а благодаря прототипу это всё визуализируется и есть понятие, что и как будет выглядеть. Ведь как должен быть выполнен сам проект, каждый представляет и интерпретирует со своей точки зрения. Если нет желания делать самому всю работу, то можно обратиться в специальный центр прототипирования. И там всё сделают специалисты. Хорошо, если заказчик (с позиции фрилансера) сам перед дачей технического задания обратился в центр прототипирования. Таким образом можно получить понятное ТЗ. С такой точки зрения прототипирование – это качественная ступень реализации проекта.

Видео: Мастер веб-дизайна #3. Создание дизайна сайта в Adobe XD (Experience Design)

Делаем качественный прототип

Для этого следует тщательно проанализировать техническое задание. Такое часто можно было видеть в школьных учебниках: задача не содержит вменяемого (для вас) условия, но решить её надо. Поэтому следует всегда нацеливаться на получение тщательно проработанного технического задания. Как показывает практика, для полноценного и многофункционального сайта оно занимает как минимум 50 страниц А4. Технические задания на пару сотен – это даже не предел в данной сфере, а обычная норма. Необходимо, чтобы в нём был прописан каждый аспект и нюанс – вот такой прототип сайта нужен.

Видео: Адаптивный прототип в Axure

Работа над ошибками

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

Бумажный макет

Для начала прорисуйте прототип на бумаге. Можно на ней создать даже вид из браузера (тоже нарисованного). Сначала прорисуйте базовые элементы. Что необходимо изобразить, конкретно отличается от предназначения сайта. Так, в интернет-магазинах делают статичными меню товаров и строку поиска. Затем создавайте поочередно все страницы и выражайте функционал, который на них будет. Расположите все элементы интерфейса сайта на своих местах. Прототипирование – это процесс, что позволит создать более совершенный продукт, в котором будут устранены разночтения технического характера, и будет получен результат, соответствующий техническому заданию. Каждая ошибка, которая будет допущена, является дорогой в прямом смысле слова. Поэтому прототипирование сайта необходимо проводить со всёй ответственностью.

Процесс создания прототипа

Итак, начинаем. Для создания прототипа необходимо сделать четыре шага:

1. Определяем начальные требования, которым должен он соответствовать.
2. Разрабатываем первый вариант прототипа, в котором содержится исключительно пользовательский интерфейс системы.
3. Передаём прототип заказчику/конечному пользователю, чтобы они смогли его изучить. Важной на этом этапе является настройка обратной связи про внесение необходимых изменений, а также дополнений.
4. Прототип перерабатывается на основании полученных предложений и/или замечаний.

Можно воспользоваться специальными средами. Так, доступным является 3D-прототипирование, что позволит лучше осмотреть всё с разных сторон.

Прототипирование программных продуктов и компьютерных систем

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

Видео: Moqups: простое создание прототипа сайта

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

Можно выделить довольно много точек опоры, но в рамках статьи предлагаются такие:

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

Заключение

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