Компонентный рабочий процесс для эскиза

То, как мы проектируем, меняется, как и наши инструменты.

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

За последнее десятилетие дизайнеры начали переоценивать свой подход и тяготеют к компонентному рабочему процессу. Photoshop представил Smart Objects (возможность «помещать» другие файлы Photoshop в PSD). Эта новая функция позволила дизайнерам совместно использовать централизованную версию компонента, не беспокоясь о наличии дубликатов этого компонента в своих файлах. К сожалению, это никогда не превращалось в рабочий процесс в командах дизайнеров - это было скорее исключением, чем правилом.

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

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

Одной из сильных сторон Abstract является возможность для дизайнеров создавать версии и управлять их работой. Аннотация отслеживает изменения, внесенные в любой компонент в файле Sketch, что позволяет вам и вашей команде сравнивать различные версии на уровне компонента. Это означает, что чем больше символов в файле Sketch, тем меньше вероятность того, что вы (или кто-либо из ваших коллег) столкнетесь с какими-либо конфликтами. С помощью Аннотация редактирование значка, используемого на каждом отдельном слое, не должно вызывать конфликтов с другими пользователями, работающими над одним файлом. И если случается конфликт, Аннотация обрабатывает эту ситуацию изящно.

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

Примитивы

Цвета

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

Стили текста и стили слоя

Второе место в списке занимает типография. Составьте список размеров шрифтов, необходимых в проекте. Чем короче список, тем легче его поддерживать. Как и в случае с цветами, обычно нет необходимости отклоняться от этого списка.

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

Компоненты

Здесь вещи становятся действительно захватывающими. Встраивание символов в другие символы создает уровни и уровни компонентов, которые легко поддерживать и поддерживать в актуальном состоянии.

УРОВЕНЬ 1: Фонд

Символы уровня 1 не включают никаких других символов. Это самый низкий уровень в нашем стеке компонентов.

  • Иконография: темные, светлые и тонированные варианты нашего набора иконок с настройкой нарезки таким образом, чтобы разработчики могли легко открыть файл Sketch и получить необходимые ресурсы
  • Аватары: набор из 8 аватаров, которые мы используем в приложении. Это несовершенные фотографии разных людей.

УРОВЕНЬ 2: Блоки нижнего уровня

Символы уровня 2 объединяют примитивы и символы уровня 1.

  • Элементы формы: кнопки, входы, флажки, радиоуправление ...
  • Клетки: люди, комментарии, коммиты, файлы, страницы, артборды ...
  • Subnavigation: заголовки с дополнительными действиями или значками
  • Баннеры: объединяет текст, значки и кнопки

УРОВЕНЬ 3: Блоки среднего уровня

Символы уровня 3 объединяют символы уровня 2 и уровня 1. Это более сложные символы, которые обычно заканчиваются тем, что используются в реальном дизайне.

  • Боковые панели: списки ячеек, могут служить в качестве навигации
  • Основные области содержимого: все от сетки проектов до детализации коммитов, включая действия, заголовок, описание, предварительный просмотр и комментарии
  • Заголовки приложений: Wayfinders, помогающие людям узнать, где они находятся внутри приложения, сочетание текстовых меток и значков
  • Модалы: Действия, подтверждения действий, полные потоки ...

Обычно я группирую символы уровня 3 на странице, чтобы быстро сравнивать их на предмет соответствия.

УРОВЕНЬ 4: Композиции

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

Так как изменится дизайн?

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

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

Создание высококачественных продуктов - это командная работа, и все мы здесь, в компании Abstract, рады играть решающую роль в развитии этого процесса.

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

Если вы еще не подписались на лист ожидания Private Alpha, вы можете сделать это здесь. И если вы заинтересованы в том, чтобы помочь нам изменить процесс проектирования, мы ищем замечательных людей с разнообразным опытом, перспективами и навыками. Проверьте наши открытые позиции и подайте заявку прямо сейчас!