Будучи пользователем Photoshop на протяжении более 10 лет и используя Photoshop в основном для дизайна UI для веб сайтов и приложений, я решил перейти на Sketch. Это может прозвучать странно, но это было трудное решение из-за того, что для меня, Photoshop был как кисть для художника (или палочки для барабанщика, как угодно :).

Спустя год интенсивного использования Sketch надеюсь, что не буду больше использовать Photoshop для дизайна UI. И вот почему:

Целостный UI сосредоточен на векторной концепции

Со Sketch вам больше не нужно задумываться о плотности экрана. Просто создайте рабочую область в необходимом размере, неважно, это ретина или ультра мега Samsung HD (360×640 для Android), Sketch сделает все за вас. Я помню времена, когда у меня были PSD файлы весом в 500Мб и разрешение 1080×1920 только потому, что мне надо было быть уверенным, что я могу показать макеты без видимых пикселей при увеличении. Через некоторое время, я начал делить на 2 (iOS) или 3 (Android) для того, чтобы дать разработчику корректный размер шрифта или отступы, но это была трата времени и потенциально могло повлечь за собой ошибки. Такой процесс вызывал раздражение и ощущение ненужных шагов только потому, что Photoshop основан на пикселях и просто не предназначен для веб дизайна, особенно для мобильных приложений.

Текстовые поля меняют свой размер при заполнении текстом

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

Свойства текстовых полей

В Sketch заполнение текстовых полей сверху и снизу зависит от линейной высоты. Например, текстовое поле с размером шрифта в 20 пикселей и линейной высотой в 30 пикселей содержит заполнение в 5 пикселей сверху и снизу. Также, как и в HTML. Это имеет большое влияние на вертикальные отступы между элементами сверху и снизу. Photoshop игнорирует это, а Sketch нет. Это означает, что с применением Sketch, дизайнеру и разработчику больше не нужно угадывать отступы и заполнение между текстовыми полями. Просто скопируйте отступы, которые вы видите в Sketch и отдайте их разработчику. С Zeplin это еще проще.

Богатый мир плагинов

Для Sketch существует огромное количество плагинов. Я чаще всего использую плагины типа: «экспорт макетов для iOS и Android», «палитры» и «Fluid» (см. следующий пункт), что делают мой процесс работы более приятным и простым. Для любой потребности найдется плагин, что сделает ваш рабочий процесс лучше. Используйте Toolbox для установки.

Плагин, который сделает ваш макет гибким

Этот плагин послужил для меня откровением. Вы можете задать ограничения для отступов между элементами или внутри групп или рабочей области. Это означает, что если вы увеличиваете контент (текст или изображение) и вы установили ограничения на отступы заранее, просто нажмите «обновить» и ваш макет применит изменения. Нет необходимости переставлять элементы после изменения размера одного из них. Или, если вам нужно посмотреть, как ваш дизайн отображается на экране большего размера, просто определите отступы слева и справа, измените размер рабочей области и нажмите «обновить». Нет нужды изменять ширину элементов потому, что это происходит автоматически. Прекрасно!

Новые редактируемые символы (в символах)

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

Простота обращения с текстовыми стилями

Окей, у Photoshop тоже есть такая опция. Но мне кажется, что она не интуитивна и никогда не работала корректно. В Sketch работа с текстовыми стилями проста и понятна… и самое главное: если вы случайно или умышленно присвоили текстовому полю заданный текстовый стиль, он не применяется к глобальному стилю до момента, пока вы его не перезагрузите.

Переименование слоев при помощи CMD+R (не двойной клик)

Звучит странно, но с тех пор, как я начал использовать горячие клавиши, нажать CMD+R намного быстрее, чем делать двойной клик мышью или стилусом на этом маленьком слое с текстовым полем. А слоев, как вы понимаете, много…

Тени, скругленные углы, границы и другие свойства

При помощи Sketch стало очень просто создавать и применять свойства. Нет нужды делать эффекты. Нет необходимости переходить в Photoshop в окно с эффектами слоев и копаться в тысяче странных и ненужных возможностях. Все основано на CSS и это круто потому, что вы теперь можете сказать разработчику, какие настройки ему использовать. Ну или дайте ему куски CSS и сделайте его полностью счастливым;). Реализация будет выглядеть также, как и ваш дизайн.

И последнее: небольшой вес файлов Sketch

Я не знаю, какой у вас объем жесткого диска, но размер моего SSD ограничен. Поэтому, я очень рад, что у меня нет нужды заботиться о дублировании файлов и месте на диске.

Я знаю, что есть еще много крутых опций, о которых мне бы следовало рассказать здесь. После полугода интенсивной работы со Sketch, я не могу представить UI дизайн без него. Конечно же не все так идеально и я мог бы рассказать о некоторых вещах, которые меня раздражают, но данный пост не об этом. Главное то, что Sketch постоянно становится лучше. Последнее крупное обновление было восхитительным. Если компания Bohemian продолжит столь качественно обновлять свой продукт, это просто вопрос времени, когда я полностью откажусь от Photoshop.