Эскиз Учебник

Краткое руководство по системе проектирования Cabana

Узнайте, как легко улучшить рабочий процесс проектирования в Sketch, прямо здесь и сейчас!

Еще в ноябре 2017 года (к примеру, немного странная музыка и шаткое затухание экрана) я решил начать создавать файл Design System / Sketch Starter под названием Cabana. Вы можете прочитать мою оригинальную статью об этом здесь.

С тех пор я создал немало статей, некоторые из которых подробно рассказывают о том, как я сконструировал Систему, а также о том, как вы можете работать с Системой проектирования наготове…

  • Как создать систему дизайна в Sketch
  • Создание с помощью системы проектирования в Sketch

Но вы знаете, что (и хотя инструкции, включенные в Cabana, довольно подробны сами по себе), я не дал пользователям Cabana более подробное руководство…

… Но это то, что я собираюсь сделать здесь, и дать вам более подробные инструкции, чтобы вы могли прыгнуть в Кабана и сказать: «Черт возьми, я - Cabana Design System Pro, просто подожди, пока остальная часть команды получить часть меня, продвижение здесь, я приду », или, возможно, что-то более сдержанное, чем это?

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

Прежде чем мы начнем, возьмите себе «Кофе», копию «Кабаны», и позвольте мне показать вам, как применить эту маленькую Систему Дизайна Радости на практике.

Перво-наперво

  • Получить копию Кабана здесь
  • Установите оба шрифта Poppins и Open Sans
  • Запустите вашу копию Sketch
  • Давай сделаем это!

Когда вы впервые откроете Cabana, вам будут представлены 4 страницы настоящего великолепия…

  • Пожалуйста, начните здесь
  • Гид по стилю
  • Составные части
  • Демо-версия системы проектирования
  • Символы

Давайте сначала сосредоточимся на странице «Пожалуйста, начните здесь». Совершенно верно, верно?

Start Пожалуйста, начните здесь

На этой странице происходит большинство магии системы дизайна. О ля ля!

Здесь вы найдете 3 отдельных артборда…

  • Цвета
  • Типография
  • Разные

базовые цвета

Давайте посмотрим, как настроить базовые цвета внутри Cabana?

Здесь мы сосредоточимся на основном цвете, и я покажу вам, как просто выполнить одну настройку на этой странице и распространить ее по всей системе. Здесь работает волшебство Sketch / Design System!

Просто перетащите курсор вокруг блока «Основной цвет», и он, в свою очередь, выберет «Цвет заливки» и «Цвет границы». Не беспокойтесь об этих маленьких ярлыках, все заголовки и ярлыки заблокированы, недоступны для выбора и никуда не перемещаются!

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

Если вы быстро перепрыгнете на одну из других страниц, будь то Символы или Компоненты, например, вы увидите эту простую настройку Цвета во всей распространенной славе.

Такая экономия времени, несомненно, заставит Дока Брауна «Великий очерк!» «Назад в будущее» кричать.

Внутри Cabana DS (Design System) у вас также есть следующие цвета, которые помогут вам с самого начала ...

  • второстепенный
  • третичный
  • черный
  • Серый
  • Светло-серый
  • успех
  • Предупреждение
  • ошибка

С остальными доступными цветами вы можете использовать только то, что требуется для проекта, и оставить все как есть. Не проблема. Например, я редко использую третичный цвет, но это просто для случая, когда проект может вызвать его, и вы гарантируете, если его там не было, «следующий» проект потребовал бы его! Вы знаете, как это происходит?

Цветовые накладки

Цветовые наложения просто присутствуют в целях согласования фирменного стиля и разборчивости на протяжении всего проекта. С вариантами первичного, вторичного и черного на выбор.

Чтобы установить наложение, например, «Основное наложение», вам просто нужно перейти к инспектору и выбрать значение цвета шестнадцатеричного числа (#), которое вы в данный момент задали для основного основного цвета, а затем с помощью вставленной в этом режиме вставки «Наложение». Hex Value и нажмите на значок синхронизации. Все сделано!

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

Вы можете продолжить и повторить аналогичный процесс для вторичного и черного цветов, если это необходимо.

Типография

Не позволяйте множеству шрифтов перед вами запускать копию Photoshop. Сохраняйте спокойствие и слушайте. Все будет хорошо, обещаю :)

Система дизайна Cabana в настоящее время использует 2 семейства шрифтов; Поппинс, для заголовков, кнопок и т.д ...

... и Open Sans, для тела, свинца и т.д ...

Они называются Font Family # 1 (Poppins) и Font Family # 2 (Open Sans).

Это просто позволяет вам легко изменять семейства шрифтов на более подходящие для вашего проекта без необходимости просматривать текстовые стили и изменять имена семейств шрифтов.

Для каждого семейства шрифтов у вас есть стили от Uber (для тех, которые больше, чем life Headings, подходящие для использования в Интернете), вплоть до Tiny (больше подходит для мелкого текста на мобильном устройстве).

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

Чтобы легко изменить одно из семейств шрифтов в соответствии с текущим проектом, просто перетащите курсор вокруг одного из блоков текста (вы можете выбрать все блоки или только цвета, которые вы будете использовать в своем проекте).

Опять же, не беспокойтесь о выборе любого из названий (например, Font Family # 1 (Black)), все они заблокированы.

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

Если вы посмотрите на изображение ниже, то увидите, что я перетащил курсор в верхний левый угол артборда, не беспокоясь о выборе какого-либо из этих надоедливых (но удобных для справки, конечно) заголовков. Удачного дня!

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

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

Также обратите внимание, что Sketch может показаться не отвечающим, если вы измените все стили текста одновременно. Просто подождите пару секунд, пока он обновляет текст.

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

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

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

тени

Здесь вы можете выбрать из тонких, мягких теней, чтобы улучшить элементы внутри вашего проекта. Чтобы удалить тень от элемента, просто выберите параметр «Без тени» на панели «Общие стили».

Чтобы внести изменения в любой из параметров Shadow, вы можете отредактировать значения X, Y, Blurand Spread на панели Shadows, а для любых изменений непрозрачности просто нажмите на Color и отрегулируйте значение Alpha там. После внесения любых изменений вы увидите значок синхронизации, нажмите на него, чтобы обновить изменения. Сделано!

Если вы решили внести какие-либо изменения в силу тени, просто нажмите значок «Синхронизировать» после внесения изменений.

Чтобы использовать стиль слоя теней в своем проекте, просто создайте слой формы, это может быть контейнер или изображение, а затем на панели «Инспектор» выберите один из стилей слоя тени, например, «Тень»> «Тень 40%».

Если вы решите, что Shadow просто не подходит для выбранного элемента, вы можете просто переключиться на Shadow> No Shadow Layer Style.

Просто с окропляет!

градиенты

Думайте о градиентах внутри системы проектирования Cabana как о дополнительной опции. Они не нужны, проект, над которым вы работаете, может вообще не нуждаться в них, но они есть, если вам когда-нибудь понадобится обратиться к ним. Я просто пытаюсь сэкономить вам немного времени, если вы когда-либо нуждались в них в проекте. Всегда думая о будущем!

Чтобы просто изменить любой из градиентов внутри Cabana, просто выберите градиент, который вы хотите изменить (например, Purple Rain), затем настройте градиентную заливку в Инспекторе, и как только вы будете довольны результатами, полученными вами Gradient Мастер, нажмите на значок синхронизации, чтобы зафиксировать ваш измененный градиент.

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

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

🖼 Duotone Image

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

Чтобы редактировать изображения Duotone, которые уже доступны, просто выберите одно (например, «Синяя луна»), а затем в «Инспекторе» настройте параметры смешивания цветов. Здесь вы можете выбрать один из вариантов смешивания, таких как «Экран», «Умножить» и «Осветлить», чтобы найти то, что хорошо сочетается с выбранными вами значениями цвета.

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

Когда вы используете предпочитаемый Duotone в проекте, просто вставьте слой формы, выберите соответствующий общий стиль Duotone, а затем вставьте изображение по вашему выбору (желательно черно-белое изображение, чтобы эффект был более заметным).

Point 8 точечных направляющих

Наконец, в 8-балльной грид-системе, сторонником которой я являюсь, и использую ее практически во всех своих проектах.

Зачем? Ну, потому что создание эстетически приятной и структурированной композиции для Проекта каждый раз трудно сделать без такой Грид-системы, и «слепая слепота» - это не то, что нужно делать при работе над клиентским проектом.

«Давайте пойдем здесь 16pt и, ну, давайте пойдем с 15.75pt здесь, и, ну, тогда продолжайте, 14.5pt здесь для хорошей меры».

Нет. Не круто!

С сильной Грид-системой, такой как 8pt, используемой внутри Cabana, вы можете чувствовать себя в безопасности, зная, что элементы в вашем проекте определили, согласованные отношения между собой, и не только это, но и то, что вы и разработчик способны работать с одной и той же указанной Grid System от проектирования до разработки и избегать проблем с расстановкой и выравниванием на всем протяжении производства. Счастливые люди вокруг!

С помощью 8pt Grid Guides в Cabana вы можете добавить Shared Styles в проект, сгруппировать их, а затем показать / скрыть группу, как требуется при работе. Если вы и ваши разработчики используете такой инструмент, как Zeplin, вы можете сделать 8pt Share d Styles видимыми для вашего разработчика, чтобы затем легко ссылаться на них в процессе производства.

Я надеюсь, что это краткое руководство по использованию Cabana поможет вам в некотором роде начать знакомство с системой проектирования.

И если вы оказались одним из тех людей, которые не имели удовольствия использовать такую ​​систему, как Cabana (на самом деле?), Вы можете взять новую блестящую копию Cabana прямо ниже…

Хотите быстро улучшить рабочий процесс проектирования в Sketch? Возьмите копию Системы Дизайна Cabana прямо здесь.

Используйте код предложения MEDIUM25, чтобы получить скидку 25%.

Спасибо за чтение статьи,

Марк

Дизайнер, Автор, Отец и Любитель Солнечных Дней