Поделиться , , Google+, Pinterest,

Опубликовано в:

Рабочий процесс в Sketch дизайнера интерфесов

Перевод статьи Brad Wrage по организации работы дизайнера интерфейсов в Sketch от Faino Interactive для рассылки UX Fox

Рабочий процесс идеального дизайнера интерфесов

Дизайн в масштабе 1x

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


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


Я начал задумываться над решениями для организации настолько быстрого и эффективного процесса, насколько это возможно, после того как мне надоело работать с перенасыщенными файлами PSD с бессчётным количеством слоёв. Их стало ещё сложнее воспринимать при разработке интерфейсов для устройств с различными размерами экрана и под различные платформы. С помощью векторной системы и артбордов Sketch я увидел, что продуктивность моей работы может возрасти в 2 раза.

После изучения вопроса и пообщавшись с коллегой из Google я был убеждён, что разработка интерфейсов в масштабе 1х станет решением многих наших проблем.
Как же предпринять этот переход? Сперва следует учесть, что большинство наших текущих интерфейсов сделаны в фотошоп в масштабе 2х для сайтов и для iOS, иногда в масштабе 3х и даже 4х для Android. Это означает, что размеры элементов были много где указаны, а источники ссылались на Illustrator и файлы PSD, в зависимости от платформы или функции.

1-Gj9TefHuxVMUtjrhmR0b1g
Ранние варианты интерфейса просмотра файлов в Hightail Spaces

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

Так с чего мне начать?

Прежде чем приступить, следует убедиться, что у всех членов команды выключено (не отмечено) «сглаживание шрифтов» в настройках Sketch. В ином случае шрифты выглядят ужасно. Я не буду вдаваться в подробности почему так происходит, но поверьте мне, это так.

1-X0xKPyU88EuaT01Zicxs9g

Создайте размеры рабочей области в масштабе 1х

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

Мы установили следующие размеры рабочей области:

  1. Настольные программы: 1440 x 900
  2. Сайты: 1440 x 900
  3. iOS iPhone 6: 375 x 667
  4. Android Nexus 5: 360 x 640 (mdpi)

1-plVibcmwYHQRTdxf6FFhCw
Монтажная область в Sketch

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

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

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

В случае с Android, я перенёс Nexus 5 xxhdpi (1080 x 1920) с масштабом 3х.

1-CDfVwknEtrqXOBlr_VUS1A
Изначальный дизайн для Nexus 5 в Photoshop

1-cZL5J3-fxBMnCBmjbtrTPA
1x (mpdi) для Nexus 5

Создайте гайды

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

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

1-Zg2jIg8CJyVBxU9RfTVYJQ
Изменённая версия гайдов с компонентами для сайтов, мобильных приложений и настольных программ.

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

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

1-ZHD8vprePB1iL6FuTgqNRA
Символ основной кнопки

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

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

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

В заключение

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

Источник: Yar Birzool

Оригинал статьи: Designing at 1x

comments powered by HyperComments