Время от времени то тут, то там разгорается очередная серия мыльной оперы «Ты рисуешь сайты в X? Зачем, если существует намного более продуманный Y?»

Выдохнув, я решил взвесить плюсы и минусы доступных на данный момент популярных инструментов и определить, в чем и в самом деле лучше рисовать сайты. Только вот получится ли это сделать?

Присказка

Как и у многих моих коллег, одним из первых инструментов для работы с графикой для меня стал Photoshop — слои, многоуровневая «история», настоящий текст (не картинка!) — просто кружили голову.

Adobe Photoshop 5.5

Шли годы, с иллюстраций и обработки фотографий я перешел к рисованию сайтов всё в том же Photoshop. Ещё бы! К тому времени в нём уже появился «почти настоящий» вектор, у меня накопилась куча опыта, и весь процесс работы в Photoshop мне казался логичным и удобным!

Примерно в то же время развивался другой продукт Adobe — Illustrator, а чуть позже появился занимательный продукт компании Macromedia — Fireworks (позже купленный Adobe, вместе с другими разработками Macromedia).

Adobe Illustrator 3

Illustrator долгое время не мог найти популярности и оставался позади Corel Draw, да и вообще, прелести векторной графики в контексте создания сайтов были достаточно туманны и расплывчаты. А Fireworks… его просто никто не понимал, ну, или почти никто.

Сказка

Итак, время шло, и как-то сложилось так, что Photoshop стал основным инструментом для дизайнеров интерфейсов и достаточно долгое время был царем горы без особых альтернатив.

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

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

А тут ещё и со всех углов кричат: «Профессиональные западные дизайнеры работают в таком-то приложении, профессиональные московские в таком-то, эта студия рекомендует то, это агентство рекомендует это…».

Что же сейчас выбрать дизайнеру интерфейсов в качестве главного своего рабочего приложения?

Применять Photoshop для прорисовки интерфейсов хорошо, потому что:

Он изучен, приручен и приучен. Даже верстальщики к нему привыкли. Таким образом, компания не окажется в ситуации, когда она вынуждена будет долго искать подрядчика, который бы умел обращаться с этим инструментом на приемлемом уровне. А это, что ни говорите, весьма весомый аргумент при выборе инструмента.

Видимо, это тот случай, когда долгое и упорное применение пользователями приложения не по назначению привело к тому, что сами разработчики стали делать шаги навстречу такому применению. Они уже сами стали добавлять инструменты, облегчающие жизнь UI-дизайнерам. С каждой версией Photoshop понемногу обрастал страстно желанными функциями. Та же недавно появившаяся «Привязка к пикселам», например, или удобное управление векторными формами со скругленными углами, явно не слишком помогающее при обработке фотографий.

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

Применять Photoshop для прорисовки интерфейсов плохо, потому что:

Он разрабатывался не для нас. Мы просто приспособились его использовать не по назначению.

Изначально задуманный как инструмент для обработки фотографий, Photoshop продолжает затачиваться именно под это направление. Несмотря на приятные подарки в виде более удобной работы с вектором, выравнивание по пискельной сетке и «любимое» мною редактирование радиуса скругления углов, Photoshop всё ещё остается инструментом для обработки фотографий.

Используя его для отрисовки интерфейсов, мы используем от силы 20% мощностей этого монстра и на самом деле «взламываем» программу, придумывая как получить желаемый результат с помощью доступных средств. А ещё он ужасно ресурсоёмкий.

Применять Illustrator для прорисовки интерфейсов хорошо, потому что:

Иллюстратор векторный по-настоящему. А ещё в нём есть Artboards и Appearance — две мощнейшие штуки, которые в нашу мобильную эру могут показаться решающими факторами в выборе инструмента.

Artboards позволяют размещать несколько «экранов» в одном документе, что чертовски удобно при разработке, например, интерфейса мобильного приложения.

А Appearance — мощнейший инструмент, позволяющий накладывать, по сути дела, неограниченное число заливок и обводок на один объект и при этом применять к каждой из них независимые эффекты. И всё это будет одним объектом.

А ещё есть фишка из вёрстки — стили текста, которую, впрочем, добавили и в Photoshop.

Применять Illustrator для прорисовки интерфейсов плохо, потому что:

Как ни странно, примерно по той же причине, что и Photoshop: он всё ещё не для нас. Вектор не панацея, так что переход на Illustrator был бы переходом в иную плоскость, а не на новый уровень.

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

Это тот самый инструмент, который ближе всех подошёл к званию «его создали для нас!».

Вся логика работы в нём настроена на разработку интерфейсов и создание веб-сайтов. Только экспорт CSS-свойств, библиотека предустановленных элементов интерфейса и удобное создание спрайтов чего стоят!

Такие функции как «Страницы» и «Состояния» идеально подходят для создания мультистраничного проекта внутри одного файла. Таким образом, можно удобно хранить, например, страницу для нескольких разрешений, что тоже удобно в эру кроссплатформенности.

Также плюсом является формат Fireworks PNG, который можно просмотреть на любом компьютере и который гораздо компактнее в сравнении с форматом PSD.

Применять Fireworks для прорисовки интерфейсов плохо, потому что:

Это достаточно спорный интерфейс, унаследовавший от Macromedia, в том числе, и некоторые мелкие недоработки (например, достаточно странный рендеринг текста).

Начиналось за здравие, а получился опять комбайн, пусть и очень-очень приближённый к идеалу, который используется в половину мощности — все эти вещи не дают мне однозначно сказать, что можно выбросить всё остальное.

Мораль

А мораль проста. В каждом из этих инструментов есть свои недостатки и свои преимущества, которые тем или иным образом перекрываются как опытом использования, так и такими штуками, как расширения, что позволяет нам получить примерно одинаковую производительность и отдачу от инструмента.

Кроме того, будет уместным вспомнить, что лихая тройка продуктов от Adobe — не единственные варианты приложений, с которыми можно работать. Например, есть отличный инструмент Sketch — «Photoshop для дизайнеров интерфейсов». Но это уже совсем другая история.

 

А в целом же хочется заключить следующее: отрисовать хороший интерфейс можно и в непрофильном приложении. И даже в самой подходящей среде для разработки интерфейсов можно создать откровенный шлак.

 

Да и вообще, кто сказал, что нельзя забить гвоздь микроскопом?