Руководство по использованию прототипов в дизайне сайта

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

Никита Обухов

Основатель Tilda Publishing, креативный директор студии FunkyPunky

Повсеместная практика разработки прототипов появилась совсем недавно. Некоторые студии (в их числе и FunkyPunky, мы рисуем с 2009 года) уже давно рисуют прототипы, но стандарт — нарисовать прототип перед тем, как переходишь в Photoshop — появился года 2-3 назад.

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

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

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

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

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

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

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

Мы стали переводить то, что услышали от заказчика, в блок-схему.

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

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

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

Два стиля прототипа

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

Зачем нужен прототип

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

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

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

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

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

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

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

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

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

Излишнее разукрашивание. Уже похоже на дизайн, но не дизайн. Логотип — что тогда мешает написать реальное название. Секция один, два, три — тоже ни о чем. Надо написать то, что будет. Эта схема не выполняет свою роль прототипа. Оформление излишнее. Он такой цветастенький, а информации-то и нет.

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

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

Через практику каждый сам для себя находит удобный стиль. Мы рисуем все в Adobe Illustrator.

Примеры прототипов проектов студии FunkyPunky

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

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

flickr.com/ilovewireframes

pinterest.com/wireframes

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

Учимся рисовать линии

Линия — основа рисунка. Из-за того как нарисована линия складывается общее впечатление.

Для разных целей используются разные линии. Но всегда она должна быть четкой, без дрожания. Начало и конец должны быть акцентированы. Основная ошибка — люди рисуют линии тусклые в начале и затухающие в конце. И не соединяют углы. Из-за этого весь прототип разваливается. Фигура должна быть четкая, с понятным контуром. Это придает рисунку убедительность. Ничего страшного, если линии пересекаются, это лучше, чем не довести. Тогда углы не будут выглядеть неуместно круглыми.

Чтобы научиться рисовать ровные, уверенные линии, можно делать такое упражнение: возьмите большой лист бумаги (минимум А2), закрепите его на стене и заштрихуйте от края до края, не отрывая руки. Когда рука привыкнет к большому формату, рисовать ровные линии на А4 будет очень просто.

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

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

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

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

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

Adobe Illustrator, InDesign, Sketch 3,

Веб-сервисы:
balsamiq.com
moqups.com
gomockingbird.com
UXPin

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

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

Нарисовать макеты в скетчбуке от руки. Скетчбук — удобная вещь для набросков, заметок и прототипирования. Нужно завести скетчбук, чтобы в нем размышлять над вариантами.

Нарисовать три варианта главной страницы в Illustrator.

Нарисовать макеты всех основных страниц.

Утвердить у клиента.

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

Прототипы лучше печатать. На макете затем удобно записывать идеи и комментарии. Сразу готов to-do-list что надо исправить. Иногда линии могут не пропечатываться, поэтому толщину нужно поставить чуть больше и контрастнее. Если страница очень длинная — распечатать на нескольких листах и склеить.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Совет: не рисуйте прототип слишком большим. Например, на листе А4 ширина окна должна быть 5-6 см. Лучше рисовать компактно и схематично, а на полях написать комментарии.

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

Обложка. Линия потолще — заголовок. Тонкие линии — краткое описание. Короткие полоски сверху — меню.

Изображения обозначаются перечеркнутыми прямоугольниками. Текст — прямыми линиями.

Если картинка будет во весь экран, то так и нарисуйте — от края до края.

Текст в колонках. Жирные линии — подзаголовки.

Галерея изображений — перечеркнутый прямоугольник и управляющие элементы.

Видео традиционно обозначаем треугольником.

Ключевые особенности — схематичное изображение иконок и текст в колонках.

Отзыв — фотография и текст.

Кнопки и формы изображаются примерно так, как они и выглядят.

Советы

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

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

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

Делайте столько правок сколько нужно клиенту. Прототип позволяет это делать без больших усилий.

Согласовывайте прототип точно. Акцентируйте внимание, что потом в дизайне переделывать логику работы страницы не будете.

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

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

Собирайте все прототипы в PDF для утверждения и располагайте в нужном порядке. Из PDF удобнее всего и печатать.

Пишите комментарии прямо на прототипе при обсуждении.

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

Тестирование прототипа

Чем раньше вы протестируете, тем лучше.

У вас появится шанс обнаружить заведомо неверное решение и не переносить его на дизайн макета или на финальный результат.

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

1

invisionapp.com позволяет сделать переходы между экранами. Загружаете несколько картинок (.jpg или .png) и расставляете области, которые будут кликабельными.

2

Бумажный прототип — суперэкономный способ. Если invisionapp требует время: нужно загрузить и расставить области, то здесь очень просто: распечатываешь прототипы, приходишь к коллеге и говоришь: вот представь, что тебе нужно купить пластиковые окна. Вот тебе главная страница. Даешь распечатку главной страницы. Он говорит: кликаю сюда. Даешь следующую страницу с каталогом. И таким образом можно найти места, в которых человеку не очевидно, что нужно делать и понять, где что упущено. Очень удобно.

«Живые» прототипы

Чтобы создать интерактивный прототип, можно использовать такие инструменты, как , например, http://www.axure.com/ Он позволяет собрать страницу из веб-компонентов, на которые можно кликать. Есть выпадающие меню.

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

Frameworks

Прототипирование кодом. Самый популярный — Bootstrap. Вместо рисования используются готовые компоненты, из которых быстро собирается страница: поля для ввода, кнопки и т.д.

Классная штука. Хорошо работает для сервис-дизайна. Когда запускаешь стартап, то с помощью Bootstrap можно быстро собирать функционал, не тратя время на дизайнера. Отлично подходит для создания MVP (minimum value product), чтобы проверить гипотезу. Если она подтвердилась, то уже можно вкладывать деньги, покупать дизайнера, который нарисует хороший UI-kit.

Мобильные приложения

Рисуется так же, в Illustrator. Есть специальные приложения, которые позволяют делать кликабельные прототипы, которые можно уже тестировать на телефоне. По такому же принципу, что и invisionapp — загружаются картинки и проставляются кликабельные области. Можно переходить между экранами, причем можно даже более глубокое прототипирование делать, имитировать pop-ups. Мобильные интерфейсы как раз имеет смысл делать «живыми».

Карта сайта

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

Это нужно для того, что чтобы понять, где какая страница будет: текстовая, список, галерея и не запутаться в них.

Прототипирование для лонгридов (статей)

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

Введение

Задача и идея

Дизайн-исследование и фокусировка

Оcновы графического дизайна

Прототипирование

Контент

Дизайн