Личный блог Дмитрия Подлужного: о работе и около нее

Плюсы использования Adobe Indesign при проектировании интерфейсов

Проектирование, 10 декабря 2010

Отдельно о слове wireframe… Я постоянно его использую, потому что не нашел адекватного перевода на русский язык. Все доступные или заменители – скетч, структура, набросок, каркас, бумажный прототип, - почему то мне не нравятся. И как это не смешно, о самом термине я узнал позже, чем сделал свой даже не первый wireframe.

Вместо вступления…

Сам по себе Indesign при проектировании я начал использовать года 3-4 назад. До этого были жалкие, как теперь мне кажется, попытки работать в Microsoft Visio, и как-то мой друг, Саша Юдаев, показал мне до чего же все просто. Просто в первую очередь потому, что я, как многие другие, начал пользоваться программами от Adobe давно и быстрые клавиши и типовые операции отлетали от рук уже сами по себе. И работать с этой программой мне приходилось, не часто, но определенный опыт был. Но до того, как увидел wireframe от Саши в Indesign, мне и в голову не приходило, что этой программой можно пользоваться для этого.

Но всегда есть место для нового опыта и спасибо Владу Головачу за его мастер-класс на WUD’10.

В Adobe Indesign есть одна функция, которая очень полезна для полиграфистов и не менее полезна при проектировании, задается в настройках документа и называется «Bleed and Slug». Эта опция задает внешние, относительно основной области документа, границы и используется в полиграфии для обрезки и служебной информации, а при проектировании ее можно использовать, чтобы из одного документа делать как минимум два: интерактивный прототип и документированное описание к нему (в зависимости от необходимости используем при экспорте в pdf «Bleed and Slug Settings» или нет).

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

Для примера сделал макет прототипа первой страницы мобильного сайта. Здесь использовано шесть слоев: 1) iphone – внешний вид устройства; 2) основные направляющие – дополнительная разметка с размерами видимых областей; 3) контент – собственно само содержание; 4) навигация – вспомогательный слой для обеспечения навигации по многостраничным документам и еще содержит техническую информацию (название проекта, номер страницы); 5) комментарии – слой, на который я выношу все комментарии к прототипу; 6) переходы – слой, на котором размещены интерактивные элементы, а попросту ссылки.