Прототипы

Что такое прототип

Для начала определимся с терминологией. В английском языке есть слова wireframe и prototype. В русском языке — сетка, прототип и живой прототип. Из-за трудностей с переводом, все время возникает путаница. Wireframe переводится как сетка. Но то, что мы называем сеткой — это это grid. А то, что по-английски называется wireframe, мы называем прототипом. То, что у них prototype, мы называем «живой прототип» (который можно кликать).

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

Хорошо составленный прототип является полноценным каркасом сайта, на который потом легко «надевается» дизайн.

Почему дизайнеры стали использовать прототипы

В разработке сайта прототипирование — это этап, который следует за исследованием, перед созданием дизайна.

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

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

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

Виды прототипов 

Прототип может быть в виде скетча от руки и как рисунок, сделанный в векторном редакторе.

Предназначение

Получить от клиента контент до начала работы над дизайном

Лайфхак. Контент получить всегда сложно, потому что клиент вечно занят и хочет вам поручить эту работу, чтобы вы волшебным образом сделали все по высшему разряду. И свой мозг отключает: да, я должен предоставить текст, но это мы потом как-нибудь разберемся. Но на самом деле ему нужно самому понять что будет на сайте.

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

1. Проектировать информационные блоки и принцип размещения информации
   

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

2. Понять какая информация и в каком объеме должна быть на сайте

Прототип дает возможность понять, что будет внутри блоков. Если на главной странице будут новости, то можно выяснить как они будут выглядеть и как часто будут обновляться. Например, если раз в месяц, то не нужно ставить дату, иначе они будут выглядеть устаревшими, хотя это может быть нормальная периодичность в их индустрии. Нужны ли теги. Будут ли фотографии. Будут ли каждый день новости? Как выводить — 4 в ряд или достаточно 2-х. На этом этапе можно даже определиться со стилем, например, какие будут заголовки: из одного-двух слов или из девяти? И это два разных макета. Выяснить такие вещи на этапе прототипирования полезно, чтобы это не было неожиданностей: ты уже заверстал сайт и выясняется, что заголовки не вмещаются.

3. Иметь возможность быстро внести правки

Вы сможете быстро договориться. Экономится и ваше время, и время заказчика. Это влияет на вариативность, она может быть больше.

4. Быстро отработать несколько гипотез
   

Раньше было обычной практикой предоставлять заказчику три варианта главной страницы, чтобы он выбирал, что ему нравится, а что нет. Но сколько нужно времени, чтобы нарисовать качественную страницу? Много! Если, конечно, делать добросовестно, а не так, что одна нормальная и две плохоньких. Нарисовав три варианта прототипа вы сэкономите время в разы.

Примеры прототипов

• Прототип в фигме
  

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

• Рисованный прототип

Рисовать по линейке вовсе не обязательно, но линии должны быть ровными. И главное — это должно быть похоже на будущий дизайн по пропорциям. Хорошо работает выделение цветом — говорит о том, что этот блок будет более заметным. Классно, когда есть пометки на полях — какая будет информация. Приятно смотреть, когда ты понимаешь, что это будущий сайт. Еще не ясно какие цвета, шрифт, но пропорции — все более менее понятно.

Где смотреть прототипы

Можно смотреть прототипы в портфолио студий. Многие студии стали на своих сайтах публиковать «кейсы» — подробное описание работы над проектом. В него включены и прототипы, и дизайн. Ну и не забываете про Google — запрос wireframes.

Помимо этого есть несколько популярных сервисов:

• Pinterest
• I love wireframes
  

Кто рисует прототип?

Рисовать прототип может дизайнер или проект-менеджер.

Многие не догадываются, что можно поручить рисование прототипов проект-менеджеру. Но все менеджеры, которые работали в студии FunkyPunky, рисовали прототипы. Потому что прототип — это то, как ты мыслишь. И абсолютно нормально, что человек, который заключает договоры, выясняет технические требования, коммуницирует с заказчиком, рисует прототипы. Естественно, если они не слишком сложные.

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

Инструменты для рисования прототипа

• Figma
• Illustrator
• InDesign
• Sketch
• balsamiq.com
• moqups.com
• UXPin

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

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

Сценарии применения прототипов

Нужно ли строго следовать утвержденному прототипу? Существует два варианта.

• Дизайнер «разукрашивает» прототип, строго следуя тому, что нарисовано.
  
• Дизайнер использует прототип как «первое приближение». Если есть понимание как сделать лучше, то можно взять ответственность, не бояться того, что утвердили, и сделать.
  

Многие дизайнеры сомневаются можно ли отходить от утвержденного прототипа. Можно! Прототип — это как первая версия сайта. Сложно сразу сделать круто, когда перед глазами ничего нет. А когда уже нарисовал, то есть материал, который можно улучшить. Невозможно оптимизировать дизайн заранее, с чистого листа.

Внешний вид прототипа

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

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

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

Обсуждение с клиентом

Часто клиент сопротивляется обсуждению прототипа, спрашивает: когда уже все будет цветное?

На этапе прототипа нужно договориться, чтобы ничего не забыть. Нужно убедить заказчика потратить свое время и отнеситесь к прототипу серьезно, потому что дизайн делается по прототипам — как нарисовано, так потом и будет. И если захочется что-то новое добавить, то это будет стоить дополнительных денег.

Детализация и «стилеточность» прототипа. Нельзя, чтобы прототип был похож на финальный дизайн. Лучше рисовать чуть условнее. Не стилизовать излишне. Прототип всегда должен быть схемой и восприниматься как схема. Желание сделать очень аккуратно может привести к тому что прототип будет выглядеть как готовый дизайн. В этом случае человек, который принимает работу, будет обращать внимание на стиль, а не на информацию. Это будет его отвлекать от сути.

Типовые элементы

Блоки в прототипе должны четко объяснять форму и функцию каждого элемента, не заостряя внимание на его внешнем виде. Представьте себе, что вы делаете рентген веб-страницы.

Есть базовый набор стандартных элементов. Текст изображается прямыми линиями, заголовок рисуем чуть толще. Картинка — прямоугольник с перечеркнутыми линиями, управляющие элементы — как маленькие кнопочки. «Шапка» — полоска сверху. Слева, например, штрих потолще — логотип, а справа пять штрихов — пункты меню.

Старайтесь рисовать аккуратно — будет легче воспринимать. Обычно идей много, поэтому сделайте несколько вариантов и потом обсудите с коллегами, какой лучше.

Советы

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

2. Текстовый блок заполняйте текстом, близким по формату к тому, что будет на сайте, а не «рыбой». Ставьте реальные тексты. Если их нет — придумывайте максимально близкие по смыслу. Либо возьмите с сайта конкурента. Делаете сайт для Samsung, используйте тексты Phillips. Главное, чтобы не было lorem ipsum dolor.
   
3. Все негармоничные места исправляйте на прототипе, а не откладывайте на этап дизайна. Если вы видите, что в меню у вас слишком много всего, никогда это не устаканится, то надо не откладывать проблему и решать эту задачу на этапе прототипирования. Прототип должен быть гармоничным.
   
4. Делайте столько правок сколько нужно клиенту. Прототип позволяет это делать без больших усилий.

5. Согласовывайте прототип точно. Акцентируйте внимание, что потом в дизайне переделывать логику работы страницы не будете.
6. Подумайте про адаптивность — как будет себя вести прототип на экранах с разным разрешением, в том числе и на мобильных устройствах, как он будет адаптироваться.
   
7. Пишите комментарии прямо на прототипе при обсуждении.
   
8. Используйте прототип для первичной оценки объема программирования. Когда вы обращаетесь к программистам, вам нужно описать что будет на сайте. Но как бы хорошо вы не описали словами тех. задание на сайт, оценка будет очень грубой. Прототипы позволяют оценить объем работ более точно. Будет у вас кнопка синяя или зеленая на цену не повлияет, а вот функционал разработчики увидят и дадут более корректную оценку.