Компания
44,45
рейтинг
8 июня 2012 в 18:53

Дизайн → Прототипирование на чистовую в Adobe Fireworks

Я считаю, что Adobe Fireworks самая недооцененная программа для прототипирования интерфейсов. В некоторых подразделениях нашей компании именно Fireworks является основным инструментом для юзабилити специалистов. При этом мы почти не используем анимационные возможности программы. В этой статье я хочу рассказать, почему мы считаем эту программу лучшей именно для рисования интерфейса.


Wireframes или чистовой дизайн


Многие юзабелисты принимают за аксиому идею, что интерфейс сначала нужно реализовать в виде wireframes, отладить, согласовать, а уже потом «раскрашивать». Некоторые считают, что дизайном должен заниматься другой человек (я проектирую, а красоту наводит дизайнер). На первый взгляд это абсолютно верный подход, позволяющий экономить время, фокусироваться на логике взаимодействия, разделить обязанности и т.д.

Однако разбиение проектирования графического интерфейса на два этапа имеет и свои минусы. Часто цвет, нестандартный размер, графические приемы оформления — все это не просто добавляет «симпатичности» серым квадратикам, но и полностью меняет восприятие интерфейса пользователем. Именно поэтому я всегда недолюбливал wireframes и старался делать интерфейс сразу «на чистовую». Стоит оговориться, что мы в Digital Design в основном проектируем утилитарные системы, где какой-то особой «красоты» не требуется, так зачем рисовать серые прямоугольнички, если без проблем можно сразу нарисовать «закругленные и градиентные».

Вот пример интерфейса, который я недавно проектировал и одновременно работал над графическим оформлением:



А вот интерфейс от Ивана Филиппенко, еще одного любителя Fireworks:



Мы не потратили времени больше, чем если бы проектировали эти интерфейсы в InDesign, Visio или Axure, а выглядят экраны гораздо приятнее, чем в перечисленных программах. А т.к. для подобных профессиональных систем более гламурное оформление и не требуется, мы упразднили один этап, без ухудшения качества. Да, в Фотошопе тоже можно подобное нарисовать, но времени это займет больше.

Photoshop или Fireworks


Я много лет работал в Photoshop и считаю, что этот замечательный инструмент породил миф о том, что чистовой дизайн корректировать сложно и нужно отложить это на самый конец проектирования. Я раньше сам яростно отстаивал достоинства Фотошопа и отрицал его недостатки: ничего, что много слоев, я знаю волшебные клавиши ctrl и shift, я умею работать в Шопе быстро. Но в конце концов мы признали преимущество Fireworks и дружно перешли на него.

Вот несколько причин, почему Fireworks лучше подходит для визуализации интерфейсов:

  • в одном файле хранятся все страницы (Pages) интерфейса, а Master Page позволяет не хардкодить повторяющиеся элементы;
  • при этом размеры холста могут быть различными для каждой страницы;
  • каждая страница имеет множество состояний (States), поэтому если мне нужно показать всплывающее окно на странице или разворачивание пункта, не приходится постоянно включать/выключать слои;
  • слои не плодятся как кролики, ими при желании можно вообще не пользоваться (хватает Pages+States), но если и пользуешься, то не обалдевая от их количества, а используя возможности их шаринга между разными страницами;
  • имеется библиотека символов и можно создавать свои символы с определенными свойствами, в том числе и переменными, это позволяет гибко и быстро менять повторяющиеся элементы интерфейса, типа кнопок, иконок и т.п.;
  • старые добрые стили (Styles) и фильтры (Filters) дополняют гибкости и позволяют не забывать полезные фотошоповские привычки;
  • прекрасная работа с объектами, как в векторном редакторе (просто выделил рамкой и сгруппировал или просто передвинул, никаких удержаний горячих клавиш) и при этом адекватная работа с растром как по отображению, так и по редактированию;
  • про анимацию, нарезку и экспорт я не говорю, потому что это само-собой подразумевается.


Если кому-то будет полезно, я покажу какое расположение панелей в Fireworks я использую. Как видите, основные панели это Pages, States, Layers, а также библиотеки символов и свойства выделенного символа (картинка кликабельна):



А если все же не на чистовую?


Создавать сначала упрощенную визуализацию все же бывает полезно. У нас есть подразделение, которое занимается приложениями для iPad, на этой платформе как-то принято делать все гламурно и красиво. Ну, знаете, стеклянная буква на гранитном основании, по которой катится капля росы :) Рисовать такое сразу — это действительно вредно, отвлекаешься сам и отвлекаешь заказчика (да и не все умеют рисовать росу на стекле).

Но и тут Fireworks очень помогает. Помещаешь все повторяющиеся элементы или в Master Page или в библиотеку символов и думаешь только о логике и расположении. А когда нужно наложить текстуры, достаточно лишь поменять символы из библиотеки. Вот пример одного планшетного прототипа (автор Ольга Соколова):



Кстати, мы часто продаем кастомизации нашего планшетного продукта. Как правило заказчики просят поменять цвет, текстуру и здесь грамотно разработанный макет очень помогает.

Ложка дегтя


Безусловно Adobe Fireworks не завоевал заслуженной популярности не только из-за конкуренции Фотошопа. Неродной для Адоба интерфейс полумутировавший из Макромедии не добавляет ему поклонников. Но главная проблема программы — низкая стабильность. Впрочем, это проблема скорее платформы Виндоуз, на Маке программа работает довольно хорошо (хотя и не идеально). Ну про ресурсо потребление я думаю упоминать не стоит, все же это дизайнерский инструмент.

P.S. Уже упомянутый Иван Филиппенко утверждает, что если поставить значения для антиалиасинга текста «4 time, 190, 10», то он станет «как в браузере» и решится извечная проблема веб-дизайнеров. Впрочем, я попробовал и особого улучшения не заметил, хотя сам факт настроек радует, возможно кто-то из читателей предложит лучшие настройки.
Автор: @AleksRitov
Digital Design
рейтинг 44,45
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Комментарии (45)

  • +7
    Я ещё скажу, что верстать из Fireworks удобнее чем из фотошопа. Во всяком случае мне :)
  • +1
    >Мы не потратили времени больше, чем если бы проектировали эти интерфейсы в InDesign, Visio или Axure

    Вы отошли от смысла чернового проектирования. Оно необходимо для тестирования интерфейса с конечными пользователями, проверки альтернативных вариантов, быстрого внесения правок и улучшений.

    В вашем случае вы сразу делали окончательный дизайн с «красивостями» для продажи клиенту, поэтому не стоит обманывать себя и считать что вы занимаетесь юзабилити и UX дизайном :)

    P.S. а Fireworks — да, вещь. Сам в нём делаю чистовой дизайн.
    • 0
      Смысл статьи в том, что мы занимаемся именно юзабилити, работаем именно с конечными клиентами, проверяем именно альтернативные варианты и проводим юзабилити-тестирование. Просто все это мы делаем не на серых квадратиках, а на представленых в статье вариантах. Изменения мы вносим тоже в эти варианты и это происходит быстро. Поэтому прошу срочно вернуть мне гордое звание юзабелиста, отобранное у меня после вашего комментария :)
      • +1
        Что я могу сказать — не на того напал. Вы подковали блоху!
        Звание возвращаю :)
        Только не путайте клиента и пользователя, негоже для юзабелиста :)
        • +1
          Не путаю. Если говорить о моем прототипе, то клиент его увидел позже чем пользователи. Мы ведем нормальный цикл проектирования в перемешку с постоянным юзабилити-тестированием. Я как раз хотел показать, что это возможно без классических ваяфрэймов. Статья конечно о FW, но справедливости ради скажу, что данный метод подразумевает, что юзабелист должен иметь неплохие дизайнерские навыки. Я писал какое-то время назад статью в поддержку универсальности специалистов.
          • 0
            К сожалению, из текста статьи сложилось другое впечатление — зацепился за строчку с InDesign. Спасибо за комментарий и жду новых статей о практическом опыте!
  • +2
    Вот уже 6 лет работаю в этой программе, да бывают падению(хотя как мне кажется порой из-за старого железа, сейчас все обновил и железки и до cs6 — за пару месяцев ни единого падения). Так а что касается интерфейса намного понятнее и логичнее чем PS интерфейс. А подключаемые модули дают большие возможности — не уступая графическим конкурентам. В течении полугода пытался пересесть на иллюстратор для графических заказов — ни как не получается:) руки не понимают что и куда ткнуть)
    Так что на мой взгляд гениальная программа. что немаловажно с грамотной палитрой.
    • 0
      Поделитесь модулями и другими полезностями — что используете?
      • 0
        +1 покажите ваши модули
        • 0
          Кстати, я не использую никаких дополнительных модулей. Использую только дополнительные библиотеки символов. Но и тут все сложно, я смог найти только одну хорошую либу для айфона, а остальное — какой-то детский сад типа кнопка, кнопка, запятая. Естественно сам постоянно добавляешь символы, но все это была бессистемная работа «по ходу». Только неделю назад мы смогли выделить стажера и дали ему задание создать нормальную бибилиотеку для нашего планшетного приложения. Вот, сидит, работает, надеюсь у него все получится.
      • 0
        Использую в чистом виде, из модулей дефолтные фотошоповские и те редко. а полезности читаю подобие мануалов для креативации проектов. Вдохновение ловлю на просторах интернета, на данный момент мне кажется актуальным, дизайн с имитацией зернистости пленки и как бы кожаный дизайн со стежками. Имхо.
        Ну а поскольку проект ФФ не имеет большой популярности, то информации не много соответственно.
  • +3
    Никогда не понимал как делают макеты в фотошопе — это же программа для фотографий.
    • 0
      Фотошоп имеет много инструментов для макетирования и веб-дизайна. Макеты делают успешно и при определенном навыке довольно быстро. Но все же использование фотошопа для макетирования напоминает мне использование Виндоуз для веб-программирования — смысла никакого, поблем куча, но многие по инерции сидят и слезать не собираются.
  • 0
    «Как видите, основные панели это Pages, States, Layers, а также библиотеки символов и свойства выделенного символа»

    Не, не видим — хабр ужал картинку. Было бы неплохо увидеть большую по ссылке.
    • 0
      исправил.
  • 0
    Мне кажется что надо сравнивать не с Photoshop'ом, а с Illustrator'ом. Потому как те плюсы, что Вы описали для Fireworks есть и в «Люстре»
    • 0
      Вы правы, если говорить с точки зрения логики. А с точки зрения реального рынка, большинство так плотно сидит на Шопе, что все остальное (включая Люстру) воспринимается как альтернативная альтернатива.
  • +1
    Что-то похожее и про Illustrator недавно писали, было бы неплохо прочесть статью сравнения удобств, преимуществ и недостатков при рисовании сайтов и интерфейсов в Photoshop, Illustrator, Fireworks, ?In Design. А то статья напоминают «мне удобнее рисовать в ...».
    • 0
      С Фотошопом я сравнил (намерянно Шоп сильно не склонял во избежании троллинга). А вот в Иллюстраторе я не прототипировал. А статья про Иллюстратор действительно хорошая, вот она habrahabr.ru/company/turbomilk/blog/144770/
    • +2
      Вот я для себя сравнил и иллюстратор, и фотошоп, и файрворкс, и индизайн.
      Минусы индизайна — отсутствие текстурных заливок (из subtlepatterns, к примеру) и неудобная (медленная) работа с цветом/градиентами. Плюсы — все, что перечислены в этой статье, но еще и крутая работа с типографикой, модульные сетки, вертикальный ритм. Эффекты круче, чем в шопе.
      Минусы файрворкс — описал ниже, их очень много. Из неотмеченных статьёй плюсов — возможность множественной стилизации (накладываем бесконечное число падающих теней на элемент), а в шестом fw можно копировать свойства слоя как css-код и сразу вставлять в верстку.
      Еще никто не отметил, что довольно удобно иллюстратор и фотошоп использовать совместно, вставляя объекты иллюстратора как smartobjects в шоп. Эта интеграция потрясна.
      Но в целом очень огорчает, что в линейке продуктов эдоб каждое приложение подразумевает свой процесс работы. Сходство только в идиоме слоев и некоторых хоткеях, типа space, tab, ctrl +, ctrl — и прочих, но все остальное отличается. Взять, к примеру, работу с цветом: везде она разная, приходится переучиваться. С шопа на корел дро даже проще перейти, чем на inDesign.
      Для себя я решил, что несмотря на множество плюшек в виде библиотек элементов, непосредственного манипулирования, состояний, поведения и страниц, процесс работы в шопе оказывается привычнее, плавнее, гибче и в итоге быстрее. По крайней мере не встречается критичных неразрешимых проблем.
      • 0
        Добавлю еще к сказанному неясную судьбу FW, постоянно ходят слухи о его смерти на фоне новых веб-инструментов в Фотошопе. Это меня напрягает и мешает сделать серьезную общекорпоративную ставку на FW.
        • +1
          Раньше photoshop cs7 он точно не умрет. Cs6 оказался непригоден для больших проектов, несмотря на эти новые «веб-инструменты», убивающие машину.
          За fw говорит то, что многие студии, в т. ч. студия Купера работают в нем, и довольно неплохо.
          Если привыкнуть к нему, назначить свою карту хоткеев (text uppercase/lowercase), создать свои качественные наборы компонентов, базу иконок, базу качественных паттернов, а также подключить и научиться использовать расширения типа orangecommands, то он станет эффективнее шопа.
        • 0
          Узнал тут об одном инструменте Xara. Попробовал их webdesigner. Очень впечатлило. Ощущения от работы действительно приятные. Рекомендую вам посмотреть для себя.
  • 0
    А для тех кто FW никогда не видел, можно хотя бы в двух словах объяснить что это?
    Из статьи я так и не понял это ускоспециализированный графический редактор или все же он позволяет создавать макеты, которые могут двигать ручками-ножками (кнопочки понажимать, по страничками побегать и т.п.)
    • 0
      Он позволяет хранить полученный графический файл с редактируемыми данными в PNG. Где можно потом передвинуть что угодно как угодно. :)
      К тому же там были такие удобные фичи как экспорт в html полученного, т.е. сделали мы к примеру hotspot область у изображения и сделали ее экспорт в html. Удобно и весело.

      Вообще считаю этот инструмент просто номер один при отрисовке интерфейсов, как для программ так и для веба. Photoshop больше как-то для фотографий подходит чтоле.
    • 0
      FW — это такая смесь из векторно-анимационного Флэша и растрово-дизайнерского Фотошопа. Сейчас все векторные редакторы стали неплохо работать с растром, а все растровые хорошо работать с вектором. Но у FW на мой взгляд эта диффузия произошла наиболее полно и органично.
  • 0
    «а Master Page позволяет не хардкодить повторяющиеся элементы»

    В фотошопе есть smart objects. Пирмерно для тех же целей.
    • 0
      ага. в принципе Фотошоп позволяет делать многое из описанного в статье. но в FW это как-то более «из коробки» что ли…
  • 0
    Спасибо за довольно интересную статью!
    В эпоху Flash-сайтов и студенчества делал несколько интерфейсов на FW. В те времена это была палочка-выручалочка, которую случайно нашел.
    Позже делал на FW интерфейс к платежным терминалам. Для технаря (не дизайнера) это был замечательный инструмент, позволяющий быстро получить средний результат. Все остальное доделывали дизайнеры, причем сами в первый раз услышавшие об этом продукте.

  • +1
    Я в файрворксе нашел три ключевых фактора, вынудивших меня вернуться к фотошопу.
    Первый — изолированность от других продуктов эдоб. Использовать svg-иконку, smartObject, скопировать форму кривых, вставить стиль слоя из фотошопа, вставить прозрачный пнг, вставить скриншот и изменить blending слоя и т. п. — все это делать очень сложно, по сравнению с шопом.
    Второй — плохие средства типографики. Многие символы utf-8 невозможно задействовать, шрифты типа сгенеренных fontello работают фрагментарно и странным образом. Рендеринг шрифтов хуже, чем в фотошопе или inDesign, хотя и якобы более гибко настраиваем. Сделать uppercase/lowercase невозможно без спец плагинов, а small-caps так вообще недоступны.
    Третий — работа с цветами. Несмотря на целых четыре (пять?) вариантов колорпикеров, они все слабо пригодны для реальной работы. Приходится открывать палитренник типа этого.
    Сменить цвет элемента на «немножко темнее и холоднее» задача не из простых: приходится изменять цифровые значения rgb. Система lab отсутствует.
    Плюс еще много мелких недостатков, типа странной работы с кривыми, невозможности изменить fill слоя сохранив opacity эффектов, неудобство работы с более чем тремя (!) эффектами стиля: image, неудобство работы с паттернами и прочие.
    В общем все перечисленные фичи (страницы, состояния, библиотека элементов, единые стили) имеются и в inDesign, почти никаких плюсов у fireworks по сравнению с ним нет.
    • 0
      А мне как раз хорошая работа с прозрачным ПНГ нравится — перетащил и готово.
      • 0
        Если бы можно было ctrl+shift+c (скопировать, смержив слои) выделения в шопе и ctrl+v в файрфокс — это было-бы клево и естественно. Но при вставке файрворкс прозрачный канал делает черным. Приходится в шопе сохранять как пнг, затем искать, куда сохранил и перетаскивать в файрворкс. Это хренова туча манипуляций с окнами. Если мало-мальски серьезный дизайн, то все эти действия удлиняют по времени процесс сильнее, чем файрворкс способен сэкономить на плюшках.
        • 0
          согласен с вами. FW имеет кучу недостатков, а Шоп очень хорош для создания графики. но я в основном занимаюсь «не гламурными» интерфейсами (см. скриншоты) и поэтому фотошоп по сути не открываю. при желании вообще могу без него обойтись, но по привычке, конечно, бывает делаю в нем кое-что. а вот для сайтов всяких красивых, конечно Фотошоп лучше будет.
          • 0
            С вашим подходом я также согласен, когда вариант прототипа пригоден для чистовика. Более того, для прототипирования fw действительно удобнее и быстрее за счет описанных вами возможностей, в первую очередь прямого манипулирования объектами и баз элементов. Но шаг влево/вправо с целью минимальной декоративности накладывает серьезные налоги на взаимодействие.
            Я бы вам посоветовал оценить для себя inDesign. В нем есть все то-же, что вы описали в fireworks, только еще и удобные инструменты работы с графикой.
            • +1
              Я очень люблю и уважаю Индизайн и делал в нем прототипы. Но мне кажется, что как рах с графикой у него большие проблемы и в нем хорошо делать именно ваяфрэймы. Тут или мы с вами разное под словом «графика» понимаем или за годы, что я им активно не пользуюсь, он ушел далеко вперед в этом вопросе.
              • 0
                Простите, не так выразился. С типографикой и цветами, в основном. Да, по обработке изображений там возможности минимальны, — меньше, чем в fw, все делается через эффекты. Я пробовал indesign cs6 — лучшая программа из линейки cs6-х, как показалось.
                Я решил, что вы с ним не работали — поэтому и порекомендовал.
  • 0
    Fireworks навсегда!!! Кто бы не говорил, но это лучшая программа для повседневной жизни!
    • 0
      А вы что в ней делаете? Интересно просто…
  • 0
    Все! От рисования макетов до сохранения скриншотов!
    • 0
      Ну это понятно, но я имел в виду для какой области макетирование применяете? Веб, другие интерфейсы, игры и тп?
      • 0
        Веб :)
  • +1
    Спасибо за статью. Я сам прототипирую в привычном мне редакторе (xara). Отсутствие инструментов для прототипирования там компенсируется 5-летним опытом моей работы в ней и поносно-быстрой работой интерфейса.
    Для приложений это еще подходило, но для сайтов потребовалось чего-то большего. Индиз меня всегда субьективно отталкивал, хотя большинство коллег из студии работало в нем. В общем, ваша статья была в самую точку, переношу в ФВ шаблоны последнего проекта, вроде, все хорошо.

    Есть пара вопросов-уточнений:
    1) Скорее придется смириться, но действительно ли при создании нового стейта у страницы нужно обязательно создавать новый стейт у мастер-пейджа? Т. е. один мастер не может проецироваться на все страницы?

    2) Я очень обрадовался наличию символов и стейтов в них. Подумал — соберу, например, все состояния бредкрамбсов в символе и буду выбирать соответствующий стейт на разных страницах!.. Ан нет, при выходе из символа он возвращается в первый стейт. Т. е., как контейнер для разных состояний его использовать нельзя, жаль. Ну, можно, конечно, но просто выкопировыванием из него нужного состояния. Так ли это? Или есть все-таки хитрый способ?

    Был бы признателен за ответ, особенно по 2). Очень много повторяющихся по форме, но разных по содержанию элементов (например, товаров: тумбнейл, название, цена) было бы круто хранить в одном контейнере в разных стейтах.
  • 0
    1) Да это так. Но в этом есть своя фишка, можно на опредеенный стейт забить свой отличный мастерпэйдж.

    2) Нужно работать не через стэйт, а через атрибут символа. Посомтрите в стандартной библиотеке есть кнопки, у кнопки есть разные состояния (активная, замороженная) — это атрибуты символа, которые можно менять по необходимости. У меня есть бибилиотека для айфона, там атрибут кнопки — это ее цвет, т.е. символ один, а атрибутом можено менять цвет (красный, синий, черный). А т.к. каждый стейт запоминает свои атрибуты — тут и ответ на вашу задачу делать изменяемые формы.
    • 0
      К сожалению, 10 просмотренных кнопок из Common library запрограммированы таким образом:

      image

      Т. е., те же стейты и их rollover поведение. Как задавать атрибуты, я не понял. Не нашел соответствующей панели, или не понял смысл.

      Я теоретически понимаю, что можно сделать динамический объект, в котором из переменных будет в определенные поля подставляться то или иное название товара, цена. Но как, например сменить растровую картинку тумбнейла?

      Я делал символ, в котором на каждом слое у меня товар. Я как-то могу указать, что в этом случае, я хочу показать слой 1, а тут 2 и т п?.. Логичнее же обращаться к стейтам, ведь они как раз и предназначены для хранения комбинаций слоев.

      PS. у вас интересный блог, подписался
      • 0
        Нет, нет. Я имел ввиду не кнопки из раздела Buttons. Смотрите в комон лайбрари раздел HTML и там к примеру Button(win). Перетащите в макет, выделите и играйтесь со свойствами панели Symbol properties.

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

Самое читаемое Дизайн