Прототип сайта: что, как и зачем. Детальный разбор от TrendLine

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

Прототип сайта, что это?

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

Как его делают?

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

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

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

Удобные сервисы для прототипирования

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

NinjaMock

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

Balsamiq Mockups

Balsamiq Mockups заметен тем, что интегрируется с популярными системами совместной работы над проектами, будь то Jira или Google Drive. Этот сервис — платный ($79 для одного пользователя). Большое количество шаблонов и настройка каждого из них под конкретный проект еще больше упрощают работу.

Pencil

Открытый код сервиса помогает создавать прототипы широкого спектра применения благодаря коллекции встроенных элементов — от простейших  блоков и схем до элементов управления. Для пользователей доступны версии сервиса под все часто встречаемые ОС — и Windows, и Mac OS X, и Linux, поэтому каждый сможет работать с Pencil  в привычной операционной системе.

Менеджер и дизайнер от использования прототипов явно выигрывают. А что насчет заказчика?

1. Быстрый и наглядный результат. Даже если в начале работы заказчик не слишком хорошо представлял, как будет выглядеть готовый продукт, то при создании прототипа он может увидеть первые наброски будущего сайта уже через несколько дней.
2. Управление процессом. На прототипе гораздо быстрее и проще “поиграть со шрифтами” и “оживить цвета”. Теперь все корректировки могут быть показаны прямо на макете и в короткие сроки воплощены в жизнь.
3. Контроль финансов. Чем точнее написано ТЗ и чем тщательней создан прототип, тем точнее будут просчитаны затраты времени и денег на реализацию задумки клиента.

А все потому, что был сделан прототип!

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