Wireframes (структурные схемы страниц) чаще всего используются в двух целях. Во-первых, как часть проектной документации — на их основе работает дизайнер и, во многом, команда разработчиков. Во-вторых, как часть презентационных материалов — обсуждение концепции на ранних стадиях проекта. Есть еще одна практика — использование wireframes как бумажных прототипов в юзабилити-тестировании, — но в этом материале речь о другом.
* Я рисую wireframes в MS Visio, но для этой статьи специфика не очень важна.
Готовить два варианта, а после внесения изменений в оригинал искать несоответствия между ними — работа неблагодарная, да и на качестве сказывается. Хочется сделать сразу и начисто. Загвоздок тут сразу несколько:
1. Разный формат
Проектная документация обычно используется в двух вариантах — электронном и распечатанном на листах A4. Презентационные материалы печатаются в больших форматах — A3 и выше, либо включаются в состав электронных роликов. Плюс в первом случае ориентация альбомная, а во втором — книжная.
2. Длинный контент
Страницы бывают длинными. Например, главная страница портала в альбомную версию A4 не влезет. Помня про необходимость альбомных распечаток A4, можно разбивать страницу на несколько. Но для презентаций это уже неудобно — картинка страницы должна быть целостной.
3. Глубокая детализация
Для производственных нужд часто требуется отрисовать внешний вид и вкратце описать специфику работы интерфейсных элементов. Эта задача решается правой колонкой, где описаны все сноски (ее частенько тоже не хватает, но это тема для отдельного постинга). А вот для презентации излишние детали не всегда нужны. Да и сама правая колонка далеко не всегда заполнена, а место на странице отнимает.
Есть тут еще за что зацепиться — цветной или черно-белый вид, разный состав и порядок страниц, но эти три проблемы ключевые. Как с ними бороться? Об этом в следующем постинге и ваших комментариях к этому.
А вот что должно получиться в идеале:
Проектная документация:
Презентация:
24 comments
Юра, настрой RSS, чтобы посты полностью отображались. 🙂
Не настраивай. А то на сайт вобще ходить не будут. 🙂
Осталось разобраться в Feedburner, чтобы он заработал правильно, потому как WordPress в этом плане не жадничает — отдает все.
Ну а трафик мне не важен — я ведь на Адсенсе зарабатывать не собираюсь 🙂 Пускай люди читают как удобнее 🙂
Когда во вторник тебе говорил насчет вставки примечаний не в правую колонку, а прямо в документ, поймал себя на том, что привык к вебу и про печатные версии забыл.
А на вебе есть http://fleck.com
Кай,
Да, вот поэтому мне отчасти и не нравятся средства типа Axure 🙂 Документ должен быть с минимальными усилиями переносимым между электронным/печатным и другими видами.
Юрий,
Когда мне нужно быстро-быстро перегнать из Axure, скажем, в Ворд, я просто делаю ctrl+A → ctrl+C → ctrl+V. Это работает! Вставляется как рисунок.
@Juras Vetrau Axure умеет генерить документацию по проекту, со всеми скриншотами и комментариями, вполть до описания взаимодействия “нажали это – будет то”, хотя с Визио я не разобрался настолько, чтобы узнать можно ли в нём интерактивные элементы делать, чтобы получался “живой” прототип. Уж больно всё в нём было не удобно, не интуитивно и слишком много… хотя если ты к нему привык)
Алексей,
Спасибо! Но у нас немного другой процесс, вставлять wireframes в документацию не очень удобно — их часто бывает под сотню, да и при уменьшенном размере детали теряются.
@Vital
С Axure разбирался и экспериментировал, но у нас немного другой формат документации, его удобнее делать вручную. Ну и я не очень верю в единый инструмент для всех задач, каким хочет быть Axure 🙂
Ребята, а какой софт посоветуете для прототипирования на Mac?
M. Visio там нет ((
@Антон
Для Mac наиболее популярен OmniGraffle. Плюс анонсирован Axure для Mac.
Как эти сноски круглые в визио рисовать?
В большинстве стенсилов есть такой элемент.
что такое стенсил?