Adobe Photoshop, Affinity Designer и Sketch 3  —  отличное трио для дизайна интерфейсов

Многие годы Photoshop был неоспоримым лидером среди инструментов для дизайна цифровых интерфейсов, от простых веб-страниц до сложных приложений. Был, потому что постепенно сдал свои позиции в пользу более современных решений. Признаться, это был, наверное, первый раз, когда я попробовал работать в других программах для дизайна интерфейсов. Хочу сказать, что это был очень освежающий опыт.

Другая перспектива

Я попробовал посмотреть на процесс с нового угла. Другой подход в процессе создания UI мне понравился. Именно Sketch изменил мой взгляд на собственный рабочий процесс. Так как изначально Sketch создавался как инструмент для дизайна интерфейсов, его ключевая логика очень отличалась от логики PS. Тестирование других дизайн-приложений, вроде Sketch или Affinity designer изменили мой подход к работе. Эти программы заставляет фокусироваться в дизайне, … как бы это сказать, на самом продукте? Такой подход кажется мне гораздо ближе к тому, как разрабатываются программы/вебсайты. Я не позволю вам относиться к дизайну, как к рисованию на холсте.

Инструменты влияют на наш процесс

Мой опыт описан в этом посте. Я понял, насколько сильно используемое ПО влияет на логику рабочего процесса. Сейчас мы стоим перед очень важным моментом. Photoshop стареет. Он медленный, код ядра конкретно устарел. Изначально он был создан как фото-редактор, а не инструмент для дизайна интерфейсов. Бывший чемпион обленился и немного располнел. В то же время появились и бунтари. Но ни один из них не идеален. Мы как раз наблюдаем самую крупную перемену на рынке инструментов для UI-дизайна со времен Fireworks. Она наступит так или иначе. Adobe представит убийственно крутой софт для дизайна, написанный с нуля, или его конкуренты завоюют эту нишу безвозвратно. Идеальное приложение? Давайте остановимся на минутку и задумаемся - а каким должно быть идеальное программное обеспечение для UI-дизайна? Какой набор инструментов будет идеально подходить под нужды дизайнера, делая рабочий процесс максимально эффективным? Или даже свершит революцию в том, как мы создаем интерфейсы? Вы можете ознакомиться с моими 14 маст-хевами.

1. Производительность

Одной из главных проблем Photoshop считается его прожорливость. PS поедает память компьютера как настоящий монстр, и при этом - работает медленно. Недавно я столкнулся с большими тормозами при работе над дизайном сайта под MBP retina с 8ГБ RAM. Adobe Photoshop потребляет в два раза больше памяти, чем Affinity Designer Очевидно, что вполне реально делать более легковесное и быстрое в работе ПО. В этом смысле и Affinity Designer, и Sketch побеждают флагман Adobe.

2. Стабильность

Никому не нравится терять несколько часов кропотливого труда из-за сбоя в работе приложения. Это очень насущная проблема для сегодняшних дизайнерских программ. Я думаю, что ни одно из самых популярных решений сегодня не работает достаточно надежно. В Affinity есть некоторые детские проблемы, и он ломается довольно часто, особенно при работе с прозрачностью. Photoshop стабилен, как веревочный мост. Некоторое время я не работал в Sketch, так что не могу оценивать, насколько хорош он на сегодняшний день, но припоминаю несколько очень огорчающих сбоев.

3. UI-сфокусированный интерфейс

Тут Sketch побеждает. Photoshop не был заточен под UI-дизайн. Это фото-редактор по своему первичному назначению (несмотря на массу функциональных дополнений). Adobe представил бета-версию UI-дизайнера в PS, но давайте будем честными. Слишком много функционала было урезано. К тому же, эта штука выглядит для меня чем-то вроде скина под Winamp. Нам все-таки нужно действительно адаптированный под наши нужды продукт. Тем временем, Affinity выглядит более удачным вариантом, чем photoshop в этом аспекте. Но в нем не хватает инструментов для измерений. Нельзя быстро проверить дистанцию между объектами или увеличить фигуру на нужный процент. Sketch почти идеален. Почти потому, что в нем есть практически весь нужный набор функций, но вот интерфейс мог бы быть и поудобнее.

4. Работа в векторе

Лично для меня это маст-хев для современного мира дизайна. Мы создаем дизайн под множество устройств, множество разрешений. Возможность быстро масштабировать работы нужна, как воздух. К счастью, со мной согласны разработчики ПО. Каждое из перечисленных мной приложений поддерживает векторную графику. Мой любимый инструмент в этом смысле - Affinity с его безопасной булевой логикой. Наименее комфортным в использовании оказался Sketch. Его возможности ограничены.

5. Базовый набор инструментов для работы с растровыми слоями

Affinity Designer предоставляет множество рабочих режимов: Design (дизайн), Raster tools (инструменты для растра) и Slice (экспорт) Вам они пригодятся время от времени. Для настройки цветов фотографии или внесения изменений в растровую графику не нужно покидать приложение. Возможности Photoshop для этого практически безграничны. В Affinity есть эффективный набор инструментов для большинства задач. Кроме того, также есть братское приложение от Serif: Affinity Photo, которое отлично работает в паре с Designer. К сожалению, в этом плане Sketch совсем плох. Почти невозможно выполнить никакие операции над растром. Да, программа заставляет серьезно задуматься перед тем, как добавить что-то в дизайн, НО. Иногда нужно сделать какие-то изменения “на лету”. И тут Sketch явный лузер.

6. Недеструктивное масштабирование пиксельных слоев

Это моя огромная проблема в Photoshop. Когда вы масштабируете пиксельный слой, он теряет свое качество. Если только не конвертировать их предварительно в смарт-объекты. Но смарт-объекты много весят, замедляют работу, и я считаю, они предназначены для других задач. Они очень хороши при создании кнопки, например. Вы создаете объект с дизайном кнопки, а затем копируете его везде, где нужны ее сущности. Когда вы меняете цвет кнопки, он меняется везде. Супер! Но зачем генерировать кучу смартов, только чтобы не утратить качество картинки при масштабировании? Affinity и здесь показывает себя отлично. Вы можете хоть десять раз менять размер изображения, начальное качество сохранится. Это потрясающе. Когда я открыл эту особенность, очень удивился. Затем пришла мысль, что это так очевидно… Спасибо, Adobe, я почувствовал себя реликтом из каменного века…

7. Пиксельный превью в реальном времени

В Affinity Designer есть разные режимы превью, как же это здорово! (Vector preview / Retina / Default screen) Знаете, чем Affinity выделяется из общей массы? Этот инструмент рендерит ваш дизайн в векторах (фигуры, шрифты) И дает возможность предпросмотра в пикселях в реальном времени. А также есть пиксельный режим retina! Как же круто. Ни один из других продуктов даже близко не подошел к такому удобству.

8. Продвинутые сетки

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

9. Удобные инструменты измерений.

Просто посмотрите, как это работает в Sketch. Я бы хотел видеть нечто подобное повсюду!

10. Хорошие возможности настроек типографики

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

11. Артборды

Артборды в Sketch 3 Артборды позволяют создавать фиксированные фреймы на открытом канвасе. Если вы создаете адаптивный веб-дизайн или мобильное приложение под разные устройства, вам захочется превратить каждый размер экрана в артборд. Это действительно удобно. Артборды также позволяют использовать смарт-объекты или символы по всему дизайну. Все экраны в одном файле. Очень удобно! Сегодня они не поддерживаются только в Affinity Designer. Надеюсь, вскоре ситуация изменится.

12. Различные опции экспорта

Различные опции экспорта (включая PSD!) Появление новых приложений на рынке означает большую сегментацию. Не каждый будет использовать один и тот же продукт, в разных командах будут разные стандарты работы. Один дизайнер будет отсылать разработчику PSD-файлы, а другой передаст уже готовый пакет исходников. Это означает, что хорошая программа должна уметь экспортировать работу дизайнеров в разные форматы. Мне нравится, что делает Affinity. Он позволяет импортировать файлы PSD (довольно неплохо!) и экспортировать дизайны, созданные в Affinity, также в PSD. Формат PSD все еще является стандартом, и в ближайшее время ситуация с ним не изменится.

13. Возможность экспорта CSS

Последний маст-хев очень прост. В Photoshop и sketch вы можете просто кликнуть на объекте правой кнопкой мышки и скопировать его CSS-свойства. Вот так просто. В Affinity Designer нет этой функции. И скоро он должен это исправить! Редизайн Apple Music был полностью сделан в Affinity Designer. Посмотрите проект и скачайте файлы-источники с моего Behance:

А что думаете вы?

На сегодняшний день нет идеального решения для дизайнеров. Хотя перспективные многообещающие. Я высказал свою точку зрения выше. Эти вещи очень важны для моей эффективной работы. И мне действительно любопытно, что бы вы хотели видеть в идеальном UI-дизайнере? Какой функционал сделает вас лучше в профессиональном плане?

---

Перевод статьи Tom Koszyk