Использование прототипов в дизайне сайта

Что такое прототип. Какие они бывают. Как рисовать прототипы и делать это хорошо. Роль прототипа в общении с заказчиком

Никита Обухов
Основатель Tilda Publishing, креативный директор студии FunkyPunky
Повсеместная практика разработки прототипов появилась совсем недавно. Некоторые студии (в их числе и FunkyPunky, мы рисуем с 2009 года) уже давно рисуют прототипы, но стандарт — нарисовать прототип перед тем, как переходишь в Photoshop — появился года 2-3 назад.
Что такое прототип
Для начала определимся с терминологией. В английском языке есть слова wireframe и prototype. В русском языке — сетка, прототип и живой прототип. Из-за трудностей с переводом, все время возникает путаница. Wireframe переводится как сетка. Но то, что мы называем сеткой — это grid. А то, что по-английски называется wireframe, мы называем прототипом. То, что у них prototype, мы называем «живой прототип» (который можно покликать).
Прототип — это детальный план веб-страницы. Он нужен для того, чтобы сфокусироваться на смысле и продумать интерфейс на концептуальном уровне, прежде чем переходить к графическому оформлению.

Хорошо составленный прототип является полноценным каркасом сайта, на который потом легко «надевается» дизайн.
Почему дизайнеры стали использовать прототипы
В разработке сайта прототипирование — это этап, который следует за исследованием, перед созданием дизайна.

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

Это позволило убрать из договора количество итераций. Обычно в договоре указывается: «не более трех правок» — чтобы не перерисовывать все бесконечно. А прототип позволяет вносить правки очень быстро, потому что это схематичное изображение, поэтому не страшно что-то изменить.

Чтобы читать дальше, купите курс

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

Вы можете купить эту лекцию отдельно, цена одной лекции — 500 руб.
Предыдущая
Следующая
Оглавление