Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

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

  • 27 апреля 2007

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Wireframes для презентации и документации. 2 часть — Решение

Юрий Ветров

Директор по бренду и дизайну (ex-Muse Group (Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банк и Mail.ru Group). Я руковожу командами, которые отвечают за дизайн, исследования и редактуру бренда и интерфейсов, а также дизайн-систему в коде. Автор книги и курса «Паттерны дизайн-менеджмента» и «Дайджеста продуктового дизайна». Со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, а также Russian Design Cup. Читал лекции в Британке, курировал курс Future London Academy в Лондоне. Мои публикации есть на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
View Post
  • Дизайн-системы

Тёмная тема оформления

  • Юрий Ветров
  • 17 мая 2020
View Post
  • Дизайн-менеджмент
  • Статьи
  • Тренды

DesignOps, стремительно ворвавшийся в тренд

  • Юрий Ветров
  • 23 июля 2018
View Post
  • Дизайн-системы
  • Рецензии

Книги о дизайн-системах

  • Юрий Ветров
  • 26 апреля 2018
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 6 — Внедрение

  • Юрий Ветров
  • 30 мая 2017
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 5 — Дизайн с выхлопом

  • Юрий Ветров
  • 12 апреля 2017
View Post
  • Статьи
  • Тренды

Куда идёт UX в 2016 году

  • Юрий Ветров
  • 14 сентября 2016
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия на практике. Часть 4 —
От дизайн-команды к дизайн-культуре

  • Юрий Ветров
  • 12 сентября 2016
View Post
  • Методы и практики
  • Статьи
  • Тренды

Алгоритмический дизайн

  • Юрий Ветров
  • 27 июня 2016
24 comments
  1. Alex Shilyaev:
    29 апреля 2007 в 11:28

    Юра, настрой RSS, чтобы посты полностью отображались. 🙂

    Ответить
  2. Alovak:
    2 мая 2007 в 12:24

    Не настраивай. А то на сайт вобще ходить не будут. 🙂

    Ответить
  3. jvetrau:
    2 мая 2007 в 13:14

    Осталось разобраться в Feedburner, чтобы он заработал правильно, потому как WordPress в этом плане не жадничает — отдает все.
    Ну а трафик мне не важен — я ведь на Адсенсе зарабатывать не собираюсь 🙂 Пускай люди читают как удобнее 🙂

    Ответить
  4. Уведомление: Wireframes для презентации и документации, 2 часть — Решение | Juras Vetrau. Блог о веб-раÐ
  5. Уведомление: Wireframes для презентации и документации, 2 часть — Решение | Juras Vetrau. Блог о веб-раÐ
  6. Уведомление: Создание презентаций » Wireframes (прототипирование) и подготовка проектов Ð
  7. Уведомление: Создание презентаций » Wireframes (прототипирование) и подготовка проектов Ð
  8. Уведомление: Steinzeig.ru » Blog Archive » Управление рисками: работа с заказчиком
  9. Уведомление: Интерактивные прототипы. Действующая модель пользовательского инт
  10. Уведомление: Интерактивные прототипы. Действующая модель пользовательского инт
  11. Уведомление: Сценарии взаимодействия. Пара слов перед большой статьей | Juras Vetrau Blog. УправÐ
  12. Уведомление: Сценарии взаимодействия. Пара слов перед большой статьей | Juras Vetrau Blog. УправÐ
  13. Кай Лебен:
    6 февраля 2008 в 4:27

    Когда во вторник тебе говорил насчет вставки примечаний не в правую колонку, а прямо в документ, поймал себя на том, что привык к вебу и про печатные версии забыл.
    А на вебе есть http://fleck.com

    Ответить
  14. Juras Vetrau:
    6 февраля 2008 в 12:37

    Кай,
    Да, вот поэтому мне отчасти и не нравятся средства типа Axure 🙂 Документ должен быть с минимальными усилиями переносимым между электронным/печатным и другими видами.

    Ответить
  15. Алексей Новиков:
    18 марта 2009 в 1:10

    Юрий,
    Когда мне нужно быстро-быстро перегнать из Axure, скажем, в Ворд, я просто делаю ctrl+A → ctrl+C → ctrl+V. Это работает! Вставляется как рисунок.

    Ответить
  16. Vital:
    16 апреля 2009 в 5:19

    @Juras Vetrau Axure умеет генерить документацию по проекту, со всеми скриншотами и комментариями, вполть до описания взаимодействия “нажали это – будет то”, хотя с Визио я не разобрался настолько, чтобы узнать можно ли в нём интерактивные элементы делать, чтобы получался “живой” прототип. Уж больно всё в нём было не удобно, не интуитивно и слишком много… хотя если ты к нему привык)

    Ответить
  17. Juras Vetrau:
    27 апреля 2009 в 12:34

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

    Ответить
  18. Juras Vetrau:
    27 апреля 2009 в 12:37

    @Vital
    С Axure разбирался и экспериментировал, но у нас немного другой формат документации, его удобнее делать вручную. Ну и я не очень верю в единый инструмент для всех задач, каким хочет быть Axure 🙂

    Ответить
  19. Антон:
    11 декабря 2009 в 18:13

    Ребята, а какой софт посоветуете для прототипирования на Mac?
    M. Visio там нет ((

    Ответить
  20. Juras Vetrau:
    14 декабря 2009 в 13:50

    @Антон
    Для Mac наиболее популярен OmniGraffle. Плюс анонсирован Axure для Mac.

    Ответить
  21. Уведомление: Юрий Ветров. Управление проектами и проектирование интерфейсов » ПÑ
  22. Юрий:
    1 мая 2012 в 14:40

    Как эти сноски круглые в визио рисовать?

    Ответить
    1. Yury Vetrov:
      17 мая 2012 в 9:19

      В большинстве стенсилов есть такой элемент.

    2. Юрий:
      17 мая 2012 в 14:09

      что такое стенсил?

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.