Comments 46
Я ещё скажу, что верстать из Fireworks удобнее чем из фотошопа. Во всяком случае мне :)
>Мы не потратили времени больше, чем если бы проектировали эти интерфейсы в InDesign, Visio или Axure
Вы отошли от смысла чернового проектирования. Оно необходимо для тестирования интерфейса с конечными пользователями, проверки альтернативных вариантов, быстрого внесения правок и улучшений.
В вашем случае вы сразу делали окончательный дизайн с «красивостями» для продажи клиенту, поэтому не стоит обманывать себя и считать что вы занимаетесь юзабилити и UX дизайном :)
P.S. а Fireworks — да, вещь. Сам в нём делаю чистовой дизайн.
Вы отошли от смысла чернового проектирования. Оно необходимо для тестирования интерфейса с конечными пользователями, проверки альтернативных вариантов, быстрого внесения правок и улучшений.
В вашем случае вы сразу делали окончательный дизайн с «красивостями» для продажи клиенту, поэтому не стоит обманывать себя и считать что вы занимаетесь юзабилити и UX дизайном :)
P.S. а Fireworks — да, вещь. Сам в нём делаю чистовой дизайн.
Смысл статьи в том, что мы занимаемся именно юзабилити, работаем именно с конечными клиентами, проверяем именно альтернативные варианты и проводим юзабилити-тестирование. Просто все это мы делаем не на серых квадратиках, а на представленых в статье вариантах. Изменения мы вносим тоже в эти варианты и это происходит быстро. Поэтому прошу срочно вернуть мне гордое звание юзабелиста, отобранное у меня после вашего комментария :)
Что я могу сказать — не на того напал. Вы подковали блоху!
Звание возвращаю :)
Только не путайте клиента и пользователя, негоже для юзабелиста :)
Звание возвращаю :)
Только не путайте клиента и пользователя, негоже для юзабелиста :)
Не путаю. Если говорить о моем прототипе, то клиент его увидел позже чем пользователи. Мы ведем нормальный цикл проектирования в перемешку с постоянным юзабилити-тестированием. Я как раз хотел показать, что это возможно без классических ваяфрэймов. Статья конечно о FW, но справедливости ради скажу, что данный метод подразумевает, что юзабелист должен иметь неплохие дизайнерские навыки. Я писал какое-то время назад статью в поддержку универсальности специалистов.
Вот уже 6 лет работаю в этой программе, да бывают падению(хотя как мне кажется порой из-за старого железа, сейчас все обновил и железки и до cs6 — за пару месяцев ни единого падения). Так а что касается интерфейса намного понятнее и логичнее чем PS интерфейс. А подключаемые модули дают большие возможности — не уступая графическим конкурентам. В течении полугода пытался пересесть на иллюстратор для графических заказов — ни как не получается:) руки не понимают что и куда ткнуть)
Так что на мой взгляд гениальная программа. что немаловажно с грамотной палитрой.
Так что на мой взгляд гениальная программа. что немаловажно с грамотной палитрой.
Поделитесь модулями и другими полезностями — что используете?
+1 покажите ваши модули
Кстати, я не использую никаких дополнительных модулей. Использую только дополнительные библиотеки символов. Но и тут все сложно, я смог найти только одну хорошую либу для айфона, а остальное — какой-то детский сад типа кнопка, кнопка, запятая. Естественно сам постоянно добавляешь символы, но все это была бессистемная работа «по ходу». Только неделю назад мы смогли выделить стажера и дали ему задание создать нормальную бибилиотеку для нашего планшетного приложения. Вот, сидит, работает, надеюсь у него все получится.
Использую в чистом виде, из модулей дефолтные фотошоповские и те редко. а полезности читаю подобие мануалов для креативации проектов. Вдохновение ловлю на просторах интернета, на данный момент мне кажется актуальным, дизайн с имитацией зернистости пленки и как бы кожаный дизайн со стежками. Имхо.
Ну а поскольку проект ФФ не имеет большой популярности, то информации не много соответственно.
Ну а поскольку проект ФФ не имеет большой популярности, то информации не много соответственно.
Никогда не понимал как делают макеты в фотошопе — это же программа для фотографий.
Фотошоп имеет много инструментов для макетирования и веб-дизайна. Макеты делают успешно и при определенном навыке довольно быстро. Но все же использование фотошопа для макетирования напоминает мне использование Виндоуз для веб-программирования — смысла никакого, поблем куча, но многие по инерции сидят и слезать не собираются.
Виндоуз для веб-программирования — смысла никакого, поблем куча, но многие по инерции сидят и слезать не собираются.
Не согласен. Может в питоне там есть проблемы с требованием перкомпиляции некоторых библиотек (что за нас уже сделали ребята с https://www.lfd.uci.edu/~gohlke/pythonlibs/ ), но например для Front-end разработки, и для php я с проблемами не сталкивался. Тем более, в десятке некоторые проблемы могут быть решены c "Windows Subsystem for Linux".
«Как видите, основные панели это Pages, States, Layers, а также библиотеки символов и свойства выделенного символа»
Не, не видим — хабр ужал картинку. Было бы неплохо увидеть большую по ссылке.
Не, не видим — хабр ужал картинку. Было бы неплохо увидеть большую по ссылке.
Мне кажется что надо сравнивать не с Photoshop'ом, а с Illustrator'ом. Потому как те плюсы, что Вы описали для Fireworks есть и в «Люстре»
Что-то похожее и про Illustrator недавно писали, было бы неплохо прочесть статью сравнения удобств, преимуществ и недостатков при рисовании сайтов и интерфейсов в Photoshop, Illustrator, Fireworks, ?In Design. А то статья напоминают «мне удобнее рисовать в ...».
С Фотошопом я сравнил (намерянно Шоп сильно не склонял во избежании троллинга). А вот в Иллюстраторе я не прототипировал. А статья про Иллюстратор действительно хорошая, вот она habrahabr.ru/company/turbomilk/blog/144770/
Вот я для себя сравнил и иллюстратор, и фотошоп, и файрворкс, и индизайн.
Минусы индизайна — отсутствие текстурных заливок (из subtlepatterns, к примеру) и неудобная (медленная) работа с цветом/градиентами. Плюсы — все, что перечислены в этой статье, но еще и крутая работа с типографикой, модульные сетки, вертикальный ритм. Эффекты круче, чем в шопе.
Минусы файрворкс — описал ниже, их очень много. Из неотмеченных статьёй плюсов — возможность множественной стилизации (накладываем бесконечное число падающих теней на элемент), а в шестом fw можно копировать свойства слоя как css-код и сразу вставлять в верстку.
Еще никто не отметил, что довольно удобно иллюстратор и фотошоп использовать совместно, вставляя объекты иллюстратора как smartobjects в шоп. Эта интеграция потрясна.
Но в целом очень огорчает, что в линейке продуктов эдоб каждое приложение подразумевает свой процесс работы. Сходство только в идиоме слоев и некоторых хоткеях, типа space, tab, ctrl +, ctrl — и прочих, но все остальное отличается. Взять, к примеру, работу с цветом: везде она разная, приходится переучиваться. С шопа на корел дро даже проще перейти, чем на inDesign.
Для себя я решил, что несмотря на множество плюшек в виде библиотек элементов, непосредственного манипулирования, состояний, поведения и страниц, процесс работы в шопе оказывается привычнее, плавнее, гибче и в итоге быстрее. По крайней мере не встречается критичных неразрешимых проблем.
Минусы индизайна — отсутствие текстурных заливок (из subtlepatterns, к примеру) и неудобная (медленная) работа с цветом/градиентами. Плюсы — все, что перечислены в этой статье, но еще и крутая работа с типографикой, модульные сетки, вертикальный ритм. Эффекты круче, чем в шопе.
Минусы файрворкс — описал ниже, их очень много. Из неотмеченных статьёй плюсов — возможность множественной стилизации (накладываем бесконечное число падающих теней на элемент), а в шестом fw можно копировать свойства слоя как css-код и сразу вставлять в верстку.
Еще никто не отметил, что довольно удобно иллюстратор и фотошоп использовать совместно, вставляя объекты иллюстратора как smartobjects в шоп. Эта интеграция потрясна.
Но в целом очень огорчает, что в линейке продуктов эдоб каждое приложение подразумевает свой процесс работы. Сходство только в идиоме слоев и некоторых хоткеях, типа space, tab, ctrl +, ctrl — и прочих, но все остальное отличается. Взять, к примеру, работу с цветом: везде она разная, приходится переучиваться. С шопа на корел дро даже проще перейти, чем на inDesign.
Для себя я решил, что несмотря на множество плюшек в виде библиотек элементов, непосредственного манипулирования, состояний, поведения и страниц, процесс работы в шопе оказывается привычнее, плавнее, гибче и в итоге быстрее. По крайней мере не встречается критичных неразрешимых проблем.
Добавлю еще к сказанному неясную судьбу FW, постоянно ходят слухи о его смерти на фоне новых веб-инструментов в Фотошопе. Это меня напрягает и мешает сделать серьезную общекорпоративную ставку на FW.
Раньше photoshop cs7 он точно не умрет. Cs6 оказался непригоден для больших проектов, несмотря на эти новые «веб-инструменты», убивающие машину.
За fw говорит то, что многие студии, в т. ч. студия Купера работают в нем, и довольно неплохо.
Если привыкнуть к нему, назначить свою карту хоткеев (text uppercase/lowercase), создать свои качественные наборы компонентов, базу иконок, базу качественных паттернов, а также подключить и научиться использовать расширения типа orangecommands, то он станет эффективнее шопа.
За fw говорит то, что многие студии, в т. ч. студия Купера работают в нем, и довольно неплохо.
Если привыкнуть к нему, назначить свою карту хоткеев (text uppercase/lowercase), создать свои качественные наборы компонентов, базу иконок, базу качественных паттернов, а также подключить и научиться использовать расширения типа orangecommands, то он станет эффективнее шопа.
Узнал тут об одном инструменте Xara. Попробовал их webdesigner. Очень впечатлило. Ощущения от работы действительно приятные. Рекомендую вам посмотреть для себя.
А для тех кто FW никогда не видел, можно хотя бы в двух словах объяснить что это?
Из статьи я так и не понял это ускоспециализированный графический редактор или все же он позволяет создавать макеты, которые могут двигать ручками-ножками (кнопочки понажимать, по страничками побегать и т.п.)
Из статьи я так и не понял это ускоспециализированный графический редактор или все же он позволяет создавать макеты, которые могут двигать ручками-ножками (кнопочки понажимать, по страничками побегать и т.п.)
Он позволяет хранить полученный графический файл с редактируемыми данными в PNG. Где можно потом передвинуть что угодно как угодно. :)
К тому же там были такие удобные фичи как экспорт в html полученного, т.е. сделали мы к примеру hotspot область у изображения и сделали ее экспорт в html. Удобно и весело.
Вообще считаю этот инструмент просто номер один при отрисовке интерфейсов, как для программ так и для веба. Photoshop больше как-то для фотографий подходит чтоле.
К тому же там были такие удобные фичи как экспорт в html полученного, т.е. сделали мы к примеру hotspot область у изображения и сделали ее экспорт в html. Удобно и весело.
Вообще считаю этот инструмент просто номер один при отрисовке интерфейсов, как для программ так и для веба. Photoshop больше как-то для фотографий подходит чтоле.
FW — это такая смесь из векторно-анимационного Флэша и растрово-дизайнерского Фотошопа. Сейчас все векторные редакторы стали неплохо работать с растром, а все растровые хорошо работать с вектором. Но у FW на мой взгляд эта диффузия произошла наиболее полно и органично.
«а Master Page позволяет не хардкодить повторяющиеся элементы»
В фотошопе есть smart objects. Пирмерно для тех же целей.
В фотошопе есть smart objects. Пирмерно для тех же целей.
Спасибо за довольно интересную статью!
В эпоху Flash-сайтов и студенчества делал несколько интерфейсов на FW. В те времена это была палочка-выручалочка, которую случайно нашел.
Позже делал на FW интерфейс к платежным терминалам. Для технаря (не дизайнера) это был замечательный инструмент, позволяющий быстро получить средний результат. Все остальное доделывали дизайнеры, причем сами в первый раз услышавшие об этом продукте.
В эпоху Flash-сайтов и студенчества делал несколько интерфейсов на FW. В те времена это была палочка-выручалочка, которую случайно нашел.
Позже делал на FW интерфейс к платежным терминалам. Для технаря (не дизайнера) это был замечательный инструмент, позволяющий быстро получить средний результат. Все остальное доделывали дизайнеры, причем сами в первый раз услышавшие об этом продукте.
Я в файрворксе нашел три ключевых фактора, вынудивших меня вернуться к фотошопу.
Первый — изолированность от других продуктов эдоб. Использовать svg-иконку, smartObject, скопировать форму кривых, вставить стиль слоя из фотошопа, вставить прозрачный пнг, вставить скриншот и изменить blending слоя и т. п. — все это делать очень сложно, по сравнению с шопом.
Второй — плохие средства типографики. Многие символы utf-8 невозможно задействовать, шрифты типа сгенеренных fontello работают фрагментарно и странным образом. Рендеринг шрифтов хуже, чем в фотошопе или inDesign, хотя и якобы более гибко настраиваем. Сделать uppercase/lowercase невозможно без спец плагинов, а small-caps так вообще недоступны.
Третий — работа с цветами. Несмотря на целых четыре (пять?) вариантов колорпикеров, они все слабо пригодны для реальной работы. Приходится открывать палитренник типа этого.
Сменить цвет элемента на «немножко темнее и холоднее» задача не из простых: приходится изменять цифровые значения rgb. Система lab отсутствует.
Плюс еще много мелких недостатков, типа странной работы с кривыми, невозможности изменить fill слоя сохранив opacity эффектов, неудобство работы с более чем тремя (!) эффектами стиля:
, неудобство работы с паттернами и прочие.
В общем все перечисленные фичи (страницы, состояния, библиотека элементов, единые стили) имеются и в inDesign, почти никаких плюсов у fireworks по сравнению с ним нет.
Первый — изолированность от других продуктов эдоб. Использовать svg-иконку, smartObject, скопировать форму кривых, вставить стиль слоя из фотошопа, вставить прозрачный пнг, вставить скриншот и изменить blending слоя и т. п. — все это делать очень сложно, по сравнению с шопом.
Второй — плохие средства типографики. Многие символы utf-8 невозможно задействовать, шрифты типа сгенеренных fontello работают фрагментарно и странным образом. Рендеринг шрифтов хуже, чем в фотошопе или inDesign, хотя и якобы более гибко настраиваем. Сделать uppercase/lowercase невозможно без спец плагинов, а small-caps так вообще недоступны.
Третий — работа с цветами. Несмотря на целых четыре (пять?) вариантов колорпикеров, они все слабо пригодны для реальной работы. Приходится открывать палитренник типа этого.
Сменить цвет элемента на «немножко темнее и холоднее» задача не из простых: приходится изменять цифровые значения rgb. Система lab отсутствует.
Плюс еще много мелких недостатков, типа странной работы с кривыми, невозможности изменить fill слоя сохранив opacity эффектов, неудобство работы с более чем тремя (!) эффектами стиля:
, неудобство работы с паттернами и прочие.В общем все перечисленные фичи (страницы, состояния, библиотека элементов, единые стили) имеются и в inDesign, почти никаких плюсов у fireworks по сравнению с ним нет.
А мне как раз хорошая работа с прозрачным ПНГ нравится — перетащил и готово.
Если бы можно было ctrl+shift+c (скопировать, смержив слои) выделения в шопе и ctrl+v в файрфокс — это было-бы клево и естественно. Но при вставке файрворкс прозрачный канал делает черным. Приходится в шопе сохранять как пнг, затем искать, куда сохранил и перетаскивать в файрворкс. Это хренова туча манипуляций с окнами. Если мало-мальски серьезный дизайн, то все эти действия удлиняют по времени процесс сильнее, чем файрворкс способен сэкономить на плюшках.
согласен с вами. FW имеет кучу недостатков, а Шоп очень хорош для создания графики. но я в основном занимаюсь «не гламурными» интерфейсами (см. скриншоты) и поэтому фотошоп по сути не открываю. при желании вообще могу без него обойтись, но по привычке, конечно, бывает делаю в нем кое-что. а вот для сайтов всяких красивых, конечно Фотошоп лучше будет.
С вашим подходом я также согласен, когда вариант прототипа пригоден для чистовика. Более того, для прототипирования fw действительно удобнее и быстрее за счет описанных вами возможностей, в первую очередь прямого манипулирования объектами и баз элементов. Но шаг влево/вправо с целью минимальной декоративности накладывает серьезные налоги на взаимодействие.
Я бы вам посоветовал оценить для себя inDesign. В нем есть все то-же, что вы описали в fireworks, только еще и удобные инструменты работы с графикой.
Я бы вам посоветовал оценить для себя inDesign. В нем есть все то-же, что вы описали в fireworks, только еще и удобные инструменты работы с графикой.
Я очень люблю и уважаю Индизайн и делал в нем прототипы. Но мне кажется, что как рах с графикой у него большие проблемы и в нем хорошо делать именно ваяфрэймы. Тут или мы с вами разное под словом «графика» понимаем или за годы, что я им активно не пользуюсь, он ушел далеко вперед в этом вопросе.
Простите, не так выразился. С типографикой и цветами, в основном. Да, по обработке изображений там возможности минимальны, — меньше, чем в fw, все делается через эффекты. Я пробовал indesign cs6 — лучшая программа из линейки cs6-х, как показалось.
Я решил, что вы с ним не работали — поэтому и порекомендовал.
Я решил, что вы с ним не работали — поэтому и порекомендовал.
Fireworks навсегда!!! Кто бы не говорил, но это лучшая программа для повседневной жизни!
Все! От рисования макетов до сохранения скриншотов!
Спасибо за статью. Я сам прототипирую в привычном мне редакторе (xara). Отсутствие инструментов для прототипирования там компенсируется 5-летним опытом моей работы в ней и поносно-быстрой работой интерфейса.
Для приложений это еще подходило, но для сайтов потребовалось чего-то большего. Индиз меня всегда субьективно отталкивал, хотя большинство коллег из студии работало в нем. В общем, ваша статья была в самую точку, переношу в ФВ шаблоны последнего проекта, вроде, все хорошо.
Есть пара вопросов-уточнений:
1) Скорее придется смириться, но действительно ли при создании нового стейта у страницы нужно обязательно создавать новый стейт у мастер-пейджа? Т. е. один мастер не может проецироваться на все страницы?
2) Я очень обрадовался наличию символов и стейтов в них. Подумал — соберу, например, все состояния бредкрамбсов в символе и буду выбирать соответствующий стейт на разных страницах!.. Ан нет, при выходе из символа он возвращается в первый стейт. Т. е., как контейнер для разных состояний его использовать нельзя, жаль. Ну, можно, конечно, но просто выкопировыванием из него нужного состояния. Так ли это? Или есть все-таки хитрый способ?
Был бы признателен за ответ, особенно по 2). Очень много повторяющихся по форме, но разных по содержанию элементов (например, товаров: тумбнейл, название, цена) было бы круто хранить в одном контейнере в разных стейтах.
Для приложений это еще подходило, но для сайтов потребовалось чего-то большего. Индиз меня всегда субьективно отталкивал, хотя большинство коллег из студии работало в нем. В общем, ваша статья была в самую точку, переношу в ФВ шаблоны последнего проекта, вроде, все хорошо.
Есть пара вопросов-уточнений:
1) Скорее придется смириться, но действительно ли при создании нового стейта у страницы нужно обязательно создавать новый стейт у мастер-пейджа? Т. е. один мастер не может проецироваться на все страницы?
2) Я очень обрадовался наличию символов и стейтов в них. Подумал — соберу, например, все состояния бредкрамбсов в символе и буду выбирать соответствующий стейт на разных страницах!.. Ан нет, при выходе из символа он возвращается в первый стейт. Т. е., как контейнер для разных состояний его использовать нельзя, жаль. Ну, можно, конечно, но просто выкопировыванием из него нужного состояния. Так ли это? Или есть все-таки хитрый способ?
Был бы признателен за ответ, особенно по 2). Очень много повторяющихся по форме, но разных по содержанию элементов (например, товаров: тумбнейл, название, цена) было бы круто хранить в одном контейнере в разных стейтах.
1) Да это так. Но в этом есть своя фишка, можно на опредеенный стейт забить свой отличный мастерпэйдж.
2) Нужно работать не через стэйт, а через атрибут символа. Посомтрите в стандартной библиотеке есть кнопки, у кнопки есть разные состояния (активная, замороженная) — это атрибуты символа, которые можно менять по необходимости. У меня есть бибилиотека для айфона, там атрибут кнопки — это ее цвет, т.е. символ один, а атрибутом можено менять цвет (красный, синий, черный). А т.к. каждый стейт запоминает свои атрибуты — тут и ответ на вашу задачу делать изменяемые формы.
2) Нужно работать не через стэйт, а через атрибут символа. Посомтрите в стандартной библиотеке есть кнопки, у кнопки есть разные состояния (активная, замороженная) — это атрибуты символа, которые можно менять по необходимости. У меня есть бибилиотека для айфона, там атрибут кнопки — это ее цвет, т.е. символ один, а атрибутом можено менять цвет (красный, синий, черный). А т.к. каждый стейт запоминает свои атрибуты — тут и ответ на вашу задачу делать изменяемые формы.
К сожалению, 10 просмотренных кнопок из Common library запрограммированы таким образом:
Т. е., те же стейты и их rollover поведение. Как задавать атрибуты, я не понял. Не нашел соответствующей панели, или не понял смысл.
Я теоретически понимаю, что можно сделать динамический объект, в котором из переменных будет в определенные поля подставляться то или иное название товара, цена. Но как, например сменить растровую картинку тумбнейла?
Я делал символ, в котором на каждом слое у меня товар. Я как-то могу указать, что в этом случае, я хочу показать слой 1, а тут 2 и т п?.. Логичнее же обращаться к стейтам, ведь они как раз и предназначены для хранения комбинаций слоев.
PS. у вас интересный блог, подписался
Т. е., те же стейты и их rollover поведение. Как задавать атрибуты, я не понял. Не нашел соответствующей панели, или не понял смысл.
Я теоретически понимаю, что можно сделать динамический объект, в котором из переменных будет в определенные поля подставляться то или иное название товара, цена. Но как, например сменить растровую картинку тумбнейла?
Я делал символ, в котором на каждом слое у меня товар. Я как-то могу указать, что в этом случае, я хочу показать слой 1, а тут 2 и т п?.. Логичнее же обращаться к стейтам, ведь они как раз и предназначены для хранения комбинаций слоев.
PS. у вас интересный блог, подписался
Sign up to leave a comment.
Прототипирование на чистовую в Adobe Fireworks