Обучение ui/ux дизайну

Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

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

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

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

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

 

Как же выглядел такой переход?

 

Ну, в первую очередь, большинство наших текущих проектов были в Photoshop в размерности 2x для iOS и для веба, а иногда и в 4x и 3х для Android. В связи с этим, размеры исходников были в довольно большом беспорядке, и все они вели к фрагментам в файлах PSD и Illustrator в зависимости от функционала или платформы.

Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

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

 

С чего же я начал весь рабочий процесс в Sketch?

Прежде чем что-то делать, я убеждаюсь в том, что у всех полностью отключена функция “font anti-aliasing” (сглаживание шрифтов) в Sketch. Иначе шрифты будут выглядеть просто ужасно. Не знаю, в чем именно дело, однако поверьте, так и есть.
Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

 

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

 

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

У нас следующие размеры холста:

  • Веб: 1440×900
  • Десктоп: 1440×900
  • Android Nexus 5: 360×640 (mdpi)
  • iOS iPhone 6: 375×667

 

Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

 

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

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

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

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

В случае же с Android, я конвертировал Nexus 5 xxhdpi в 3x.

Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

 

Создайте специальный список стикеров

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

Наша первая версия перечня стикеров была более веб-ориентированная. Однако в процессе данный перечень оброс многими разделами для каждой из платформ. Это крайне полезная функция для соблюдения канонов и стиля бренда.
Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

 

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

 

После разработки единого языка дизайна для всего продукта и перечня стикеров еще одно большое преимущество Sketch, которое очень помогло нашей команде — это общие стили и символы.

Дизайн в 1x: идеальный рабочий процесс в sketch для любого дизайнера

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

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

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

 

Заключение

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

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

Перевод статьи Medium

Понравилось? Расскажите друзьям: