Прототипирование на чистовую в 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», то он станет «как в браузере» и решится извечная проблема веб-дизайнеров. Впрочем, я попробовал и особого улучшения не заметил, хотя сам факт настроек радует, возможно кто-то из читателей предложит лучшие настройки.
    Digital Design 44,39
    Компания
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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
                Мне кажется что надо сравнивать не с 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
                                      Ну это понятно, но я имел в виду для какой области макетирование применяете? Веб, другие интерфейсы, игры и тп?
                                  • +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.

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

                                      Самое читаемое