Всего год назад я перешел с Adobe Creative Cloud на Sketch для дизайна интерфейсов, и немного позже я пришел к тому, что по моему мнению является идеальным рабочим процессом для дизайнера продуктов и команды коллег.

Как дизайнеру продуктов, мне крайне важно работать максимально быстро и эффективно, особенно при использовании нескольких платформ сразу.

Я начал искать решения для максимально быстрой и эффективной работы, так как уже был сыт по горло этими огромными PSD-файлами, в которых слоев было больше, чем я мог сосчитать. Все стало еще хуже, когда возникла необходимость создавать версии для разных размеров экрана и плотностей под разные платформы. Благодаря системе артбордов и векторной графики в Sketch эффективность труда возросла практически вдвое.

После некоторых исследований и разговоров с друзьями по Google, я наконец убедил себя, что дизайн в 1x сможет стать решением множества моих проблем.

И как же выглядел этот переход? Ну, во-первых, большинство наших текущих дизайн-проектов были в photoshop в размерности 2x для веба и для iOS, а иногда и в 3x и 4x для Android. Поэтому размеры исходников были в большом беспорядке, и все вели к элементам в файлах Illustrator и PSD в зависимости от платформы или функционала.

Ранние дизайны просмотра файлов в Hightail Spaces
Ранние дизайны просмотра файлов в Hightail Spaces
После перехода на Sketch, все дизайны создавались в 1x. Рабочий процесс в sketch стал очень удобным. В дополнение, скоро у нас появился набор стикеров Sketch, который каждый мог использовать в новых дизайн-проектах, идеях по интерфейсам, не создавая все с нуля.

Так с чего я начал рабочий процесс в sketch?

Пере тем, как что-либо делать, я убеждаюсь, что у всех отключена опция «font anti-aliasing» (сглаживание шрифтов) в опциях Sketch. Иначе шрифты выглядят ужасно. Я не знаю, в чем дело, но поверьте, так и есть.

Так с чего я начал рабочий процесс в sketch?

Создаем 1x размеры холста

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

У нас такие размеры холста:

  1. Десктоп: 1440×900
  2. Веб: 1440×900
  3. iOS iPhone 6: 375×667
  4. Android Nexus 5: 360×640 (mdpi)
Создаем 1x размеры холста
Артборды в Sketch

Портирование и создание дизайнов

У нас была куча дизайнов в PSD-формате, которые нужно было портировать в Sketch. Из-за того, что мы создаем дизайны под экраны с высокой плотностью, большая часть графики была в 2x, а иногда доходило и до 4х для Android-проектов. К сожалению, для многих из них пришлось перерисовывать исходники, и вам придется сделать то же самое. А для некоторых можно будет воспользоваться векторными исходниками из Adobe Illustrator, их можно просто скопировать и вставить в Sketch.

Начните перерисовку самых сложных PSD-дизайнов с самым большим количеством исходников. Впоследствии это даст возможность повторно использовать элементы в других дизайнах, которые будете конвертировать в Sketch.

В случае с Android, я конвертировал Nexus 5 xxhdpi (1080×1920) в 3x.

Оригинальная версия для Nexus 5 в Photoshop

1x (mpdi) for Nexus 5
1x (mpdi) for Nexus 5

Создайте список стикеров

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

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

Наш список стикеров с компонентами для веб, мобильной версии и десктопа.
Наш список стикеров с компонентами для веб, мобильной версии и десктопа.

Используйте символы и общие стили

После выработки единого языка дизайна для продукта и списка стикеров еще одно важное преимущество Sketch, которое помогло нашей команде — общие стили (Shared Styles) и символы.

Символ кнопки Primary
Символ кнопки Primary
Символы используются для группы слоев, которые определяют элемент интерфейса. Эквивалент в Photoshop — композиции слоев (layer comp), кроме тех, что применяются к группе слоев. Это очень полезная возможность при дизайне множества состояний одного элемента интерфейса. Пример — состояния шапки для залогиненного и незалогиненного пользователя или кнопки проигрывания/паузы для видео.

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

Использование символов и общих стилей убирает любые вопросы в команде дизайнеров вроде «Напомните, какой должен быть размер шрита для заголовка и подзаголовка?» или «Какой отступ между шапкой и телом сайта?».

Заключение

Дизайн в 1х в Sketch значительно улучшил эффективность нашей работы. Польза заключается не только в доступе к исходникам и стилям между платформами. Это также помогло забыть обо всех проблемах с различными размерами и плотностями экрана и сфокусироваться непосредственно на создании качественного продукта. Конечно, ни один инструмент или порядок работы не совершенен. Тем не менее, я бы сказал, что выбранный нами путь на данный момент идеален.