Когда заказчик сайта прекрасно знает, что и в каком виде он хочет получить от дизайнера, это – эталон взаимодействия. Не приходится гадать на кофейной гуще и делать десятки вариантов «в стол». Во избежание таких ситуаций еще на начальной стадии обсуждения задачи на помощь дизайнеру приходит бриф – документ, регламентирующий процесс разработки графического (или любого другого) продукта.
Более подробно об этом я рассказал в статье «Зачем нужен бриф, или Почему дизайнеры не умеют читать мысли». В частности, в брифе обычно содержится информация о структуре будущего дизайна. Но как показывает моя многолетняя практика, далеко не все заказчики понимают, что и в каком виде должно входить в структуру страниц. Одни могут показать сайт-ориентир с похожей или даже полностью аналогичной структурой. Другие готовы описать словами информационные блоки, которые будут входить в состав дизайна. Третьи – предоставляют примерные наброски того, как это должно выглядеть.
И вот этот вариант – наиболее предпочтительный для обеих сторон. Такие наброски (или прототипы дизайна) может готовить либо заказчик, либо сам дизайнер. Само собой разумеется, во втором случае дизайнер обязан обладать хотя бы минимальными навыками прототипирования, знать основы UX (User Experience – опыт взаимодействия с пользователем) и владеть азами маркетинга. Дизайнер, проектировщик и маркетолог – такое сочетание «три в одном» в современном мире Интернет-технологий уже давно перестало быть чем-то удивительным и необычным. Исполнителю нужно уметь посмотреть на структуру разрабатываемого дизайна глазами целевой аудитории – будущих пользователей. Только так получится сделать действительно качественный, удобный и ориентированный на потребителя продукт.
Однако, это – тема для отдельной статьи и мы ее обязательно рассмотрим как-нибудь в другой раз. Сегодняшний материал посвящен такому явлению, как создание прототипа сайта.
Прототипирование (англ. prototyping от др.-греч. πρῶτος — первый и τύπος — отпечаток, оттиск; первообраз) — быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом.
«Википедия»
Основные задачи прототипирования
Как у любого вида деятельности, у разработки прототипов есть свои цели и задачи. Рассмотрим ключевые моменты.
- Формирование точной структуры дизайна. На одной странице будут отзывы, новости и фотогалерея, а на остальных – только текст и перечень услуг. Слайдер будет состоять из пяти слайдов, а каталог – из двадцати категорий и расширенного поиска.
- Компоновка блоков и разметка страниц. Сколько колонок будет – две или три? Вывод статей будет сбоку или сверху? Блок преимуществ с пиктограммами займет всю ширину экрана или будет зафиксирован контентной областью?
- Взаимодействие с пользователем. Выпадающие меню раскрываются, кнопки и ссылки нажимаются, формы заполняются. И результатом всех этих действий является новый статус большинства элементов дизайна.
Можно ли работать без прототипов? Можно. Но здесь либо заказчик целиком и полностью доверяется опыту дизайнера, либо надо быть готовыми к тому (причем обеим сторонам), что многие вещи придется переделывать по нескольку раз. И в этом плане прототипирование сайта зачастую может существенно облегчить жизнь и дизайнеру, и заказчику, и сэкономить время на разработку.
Виды прототипов
Выбор инструментария зависит от личных предпочтений и практических навыков проектировщика и варьируется от рисованных набросков от руки до сложных интерактивных презентаций. Условно все прототипы можно разделить на 3 вида.
Бумажные прототипы
Это – самый простой и наиболее доступный для всех пользователей способ подготовки схематической структуры будущего дизайна.
Плюсы:
- Не требуется наличие компьютера вообще и соответствующего уровня компьютерной грамотности, в частности
Минусы:
- Неразборчивый почерк и слабые навыки изобразительного искусства могут существенно затруднить восприятие и понимание прототипа другими лицами
- Отсутствие какой-либо интерактивности
- Неудобство редактирования прототипов
Графические прототипы
В большинстве современных программ широкого и узкого применения, работающих с графикой, можно создавать неплохие прототипы. Если вы знаете Adobe Photoshop, Microsoft PowerPoint, Microsoft Word или Microsoft Visio – сложностей с прототипированием скорее всего не возникнет. Впрочем, если прототипами занимается сам дизайнер, сомнений по уровню владения тем же Adobe Photoshop возникнуть не должно. А вот если эту задачу взял на себя заказчик, то здесь вероятны сюрпризы – далеко не все, например, в курсе, как работать с формами и объектами в Word.
Плюсы:
- Больше возможностей и разнообразнее инструментарий по сравнению с бумажным прототипированием
- Удобство редактирования
- Возможность экспорта в различные форматы для предварительного просмотра (JPEG, PDF и пр.)
Минусы:
- Необходимость в практическом опыте работы с определенным программным обеспечением
- Непрофильная ориентация инструментария (надо понимать, что Word разрабатывался для работы с текстом, PowerPoint предназначен для создания презентаций, а на Visio делают, в основном, диаграммы и блок-схемы)
- Отсутствие какой-либо интерактивности
Интерактивные прототипы (HTML-прототипы)
Самый технологичный, но вместе с тем и наиболее выразительный, точный и эффективный вид создания прототипов.
Плюсы:
- Высокая детализация проработки всех элементов структуры
- Наличие встроенных библиотек стилей, объектов и эффектов
- Интерактивность
- Возможность на выходе тестировать прототип в условиях, максимально приближенных к реальности (в виде HTML-страницы в браузере)
- Поддержка прототипирования под мобильные устройства
- Экономия времени и денег на смежных процессах (в ряде случаев тестирование HTML-прототипов позволяет выявить основные ошибки и недочеты еще до того, как макеты будут нарисованы и потом переданы в верстку)
Минусы:
- Высокие требования к уровню общей компьютерной подготовки и необходимость глубоких знаний в области проектирования, верстки и даже программирования
- Увеличение бюджета на разработку
Подобный инструментарий можно разделить на 3 основных типа: offline, online и надстройки к браузерам (плагины). Большинство из них – платные, но также имеют и набор бесплатных возможностей (само собой, ограниченных по функционалу).
Вот лишь некоторые примеры:
Подводим итоги
Нужен вам прототип сайта или нет – это вопрос субъективный и решается в большинстве случаев самим заказчиком. Ведь следует понимать, что проекты по объему, уровню сложности и детализации прорисовки бывают разные. И какой-нибудь элементарный лендинг, состоящий из 5-ти экранов текста и 2-3 картинок, совершенно не пострадает, если будет рисоваться без прототипа дизайна.
Также необходимо помнить, что прототип – это не конечный продукт. Не готовый дизайн, с грамотно подобранными цветами и шрифтами и визуальным оформлением каждого информационного блока. Это – схематическое представление о будущем результате. И вы можете на этот результат повлиять.
