Закладывание основ

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

Теперь у меня есть система дизайна (кстати, она называется Cabana). Она ускорила мой рабочий процесс в десять раз и дала мне прочную основу для работы над любым проектом.

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

Теперь, как и всегда, есть скептики, которые кричат: «Но вам нужно изменить 4 переопределения символа только для стилизации кнопки. Это не круто». И я склонен согласиться с ними … в какой-то мере.

«Переопределения символов — это не круто!»

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

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

Я люблю называть это «Sketch дзен круиз-контроль».

«Я ощущаю потребность. потребность в более быстром рабочем процессе в Sketch»

Поверьте мне. После того, как вы попробуете дизайн-систему, вы не захотите вернуться к своему старому способу проектирования в Sketch …

  • Откройте Sketch
  • Уставьтесь в пустой экран (Я называю это «Синдром пустого экрана»)
  • Возьмите где-нибудь иконки
  • Пройдите строгий процесс создания символа после символа
  • Настройте несколько стилей слоя, а затем еще несколько, а затем еще несколько
  • Тогда наконец-то возьмитесь за проект!
  • Посмотрите на часы и скажите: «О, куда делось время. Надо поспать.

«Куда делось время…»

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

Начните с этих цветов…

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

В первую очередь создание системы дизайна — это наличие утонченной библиотеки элементов и стилей, которая значительно упрощает работу над любым проектом. Это контрольная точка, которая удерживает вас от «темной стороны» работы с 12 различными цветами и множеством немного отличающихся по размеру шрифтов на разных экранах. В прошлом я этим грешил. Я думаю, у всех так было.

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

И, конечно же, обязательные цвета: черный, 2 оттенка серого, белый и белый с непрозрачностью 50%, чтобы выступать в качестве наложения для таких элементов, как иконки.

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

Цвета в дизайн системе
На старт, внимание, поехали!
Я дал каждому из базовых цветов цвет заливки (Fill) и границы в 1px (Border) того же значения в шестнадцатеричном коде, а затем создал отдельные общие стили для каждого (то есть Fill / Primary, а затем Border / Primary).

Стили цветов в дизайн системе Sketch - 1 Стили цветов в дизайн системе Sketch - 2

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

Это позволило бы мне в будущем быстро выбрать обе формы (с применёнными стилями заливки и границы) и внести соответствующие изменения стиля одновременно.

Стили цветов в дизайн системе Sketch - 3

Как только у меня появились базовые цвета, я мог бы просто взять некоторые из этих цветов, т. е. Первичный, Вторичный, Черный и создать простое наложение цвета с непрозрачностью 60%, который затем можно применить к любым изображениям в проекте, и это было так же просто, как взять шестнадцатеричное значение базовых цветов, применяя его с непрозрачностью 60% и создавая новый общий стиль, т. е. Overlay/Primary.

Стили цветов в дизайн системе Sketch - 4

А теперь перейдем к типографике…

Типографика в дизайн системе Sketch - 1

Придерживайтесь правила иметь максимум 2 семейства шрифтов. Один для заголовков, а другой для тела документа. Бывают случаи, когда «того» третьего члена семьи можно пригласить в гости, но вам нужно дать ему стул у двери.

Я выбрал шрифты Poppins и Open Sans из-за того, что они отлично дополняют друг друга, как базовые семейства шрифтов.

На самом деле нет правильного или неправильного выбора. Но, например, названные шрифты хорошо подходят для раннего прототипирования. Если ваша единственная цель использования такой системы, как Cabana, исключительно прототипирование, то такой шрифт семейства Serif, как Merriweather, будет отвлекать внимание.

Я начал с семейства шрифтов Poppins и стиля шрифта Uber. Это не тот стиль шрифта, который будет использоваться часто, но я знаю по опыту, что, когда я тестировал другие системы дизайна, их самый большой стиль шрифта не был достаточно щедрым на варианты изменения размера, особенно, когда вы хотите создавать продукты как для мобильной, так и для веб платформ. Вот почему я выбрал Uber с огромным размером 111pt.

Затем я перешел к обычным элементам типографики (H1-H5) с использованием модульного масштабирования. Я задал размер тела текста 18pt с использованием коэффициента 1.2.

Я установил размер тела текста крупнее 18pt, чтобы улучшить читаемость, я решил выбрать темно-серый цвет для него.

Помимо заголовков и стилей тела текста, я добавил стили для Lead, Small, Caption и Tiny. Придерживаясь стандартного интервала символов для всех вышеперечисленных, кроме Caption.

Типографика в дизайн системе Sketch - 2

Я создал обычный и полужирный вес текста для каждого из стилей (Uber, Hero, H1, H2, Body и т. д.). Я видел системы прежде, чем выбирать легкий вес вместо обычного (или даже просто полужирного для заголовков, без опции «Обычный»), но не каждая семья шрифтов имеет большой выбор стилей и толщины букв. Поэтому я выбрал просто обыкновенный и полужирный шрифты.

Я повторил этот процесс для шрифта Open Sans (семейство шрифтов № 2) и удостоверился, что для обоих семейств шрифтов я также создал стиль текста с выравниванием по левому краю, по центру и по правому краю (да, мы редко используем текст с выравниванием по правому краю, но я добавил его на всякий случай)…

Типографика в дизайн системе Sketch - 3

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

Типографика в дизайн системе Sketch - 4

Поэтому, используя шестнадцатеричные значения цветов, которые я установил ранее, я скопировал их и создал новые текстовые стили со следующими цветами …

  • Серый
  • Светло серый
  • Белый
  • Основной цвет
  • Красный (ошибка)
  • Зеленый (успех)

Типографика в дизайн системе Sketch - 5

Прочее

Тени

Тени в дизайн системе Sketch - 1

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

Градиенты и дуплекс

Градиенты в дизайн системе Sketch - 1

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

Градиенты в дизайн системе Sketch - 2

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

Система отступов 8pt

Система отступов в дизайн системе Sketch - 1

Меня очень вдохновила система 8pt, и да, в прошлом я придерживался своей собственной системы (вроде бы), но она все равно могла сильно отличаться от проекта к проекту. С помощью системы сеток 8pt я смог изменять размер элементов на странице с шагом 8 (8, 16, 24, 32 и т. д.). На следующем этапе, когда я начал создавать свои символы и компоненты, я взял эту систему сетки за правило, и я подробно расскажу вам об этом во второй части этой серии статей.

Прежде чем использовать что-то вроде системы 8pt, я полагался на комбинацию своего глаза и хорошего инструмента Sketch Measure. Я, конечно, придерживался определенной формы согласованности, но, в конечном счете, после многих страниц или экранов, и без контрольной точки у вас получается мешанина с измерением. 20px здесь, 15px там, 30px здесь.

Вы получаете измерения, которые немного меняются между экранами. X элемент 20px из Y-элемента на одном экране, но Y-элемент 22px из элемента Z на следующем экране. Такая небрежность в конечном итоге накапливается и создает для пользователя несвязанный опыт.

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

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

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

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

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

Как создать дизайн-систему в Sketch (Часть 2)

Как создать дизайн-систему в Sketch (Часть 3)

Как создать дизайн-систему в Sketch (Часть 4)

Не хотите создавать дизайн-систему сами? Вы можете приобрести копию Cabana прямо здесь.

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

Автор статьи: Марк — дизайнер, автор, отец и любитель MacPaint.