Методы и практики
Apr 27, 2007
Yury Vetrov
21 Comments

Wireframes для презентации и документации, 1 часть — Проблема

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

* Я рисую wireframes в MS Visio, но для этой статьи специфика не очень важна.

Готовить два варианта, а после внесения изменений в оригинал искать несоответствия между ними — работа неблагодарная, да и на качестве сказывается. Хочется сделать сразу и начисто. Загвоздок тут сразу несколько:

1. Разный формат

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

2. Длинный контент

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

3. Глубокая детализация

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

Есть тут еще за что зацепиться — цветной или черно-белый вид, разный состав и порядок страниц, но эти три проблемы ключевые. Как с ними бороться? Об этом в следующем постинге и ваших комментариях к этому.

А вот что должно получиться в идеале:

Проектная документация:

Wireframe как документация, страница 1

Wireframe как документация, страница 2

 Презентация:

Wireframe как презентация

Продолжение:

21 Comments

Leave a comment

Юрий Ветров

Юрий Ветров

Москва jvetrau@gmail.com

Руководитель отдела проектирования и дизайна интерфейсов Mail.Ru. Работаю над коммуникационными и мобильными сервисами компании, а также общепортальными задачами.

Вакансии в интерфейсной команде Mail.Ru

  • Дизайнер Почты Mail.Ru
    Приоритетное направление со множеством интересных и сложных задач. Пользователи Почты Mail.Ru — это десятки миллионов людей.
  • Дизайнер мобильных сайтов и приложений
    iOS, Android, Windows Phone, Symbian, J2ME, Bada.
  • Дизайнер для Futubra, нового продукта
    Создавать совершенно новый проект. Такой дизайнер сделает 665 концепций и будет полон сил для 666-й. Он делает работу быстро, просто, эффектно. В его голове полно идей, он постоянно ими делится, но знает, что цена идеи самой по себе стремится к нулю и ни за одну не держится на смерть. У него есть в кармане пачка решений необычных задач. А если и нет, он знает, где такие решения найти.
  • Дизайнер стратегических продуктов
    Работа над Почтой, главной страницей и другими продуктами.