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

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

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

Конечно, основная идея визуальных коллекций и их применение в процессе дизайна далеко не нова. Я вдохновился Material Design, переменными SCSS,Macaw, Origami, Atomic Design и разными библиотеками паттернов.

Мои намерения чисты

Работая над более крупными проектами, я по уши насытился трудностями дизайн-процесса в Sketch из-за недостатка структурированности. И хотя последние обновления (такие, как вложенные символы) и плагин стилей в Craft помогли в нужном направлении, все равно я не достиг совершенного рабочего процесса. Чтобы вы лучше поняли мою позицию, вот несколько примеров:

Четкий обзор переменных

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

1-ybz4zKzJkKCIS1VnAxv4_w
Что за бардак?

Группировка стилей

Какие части дизайна связаны с конкретными изменениями в переменных? Я хочу определить, какой шрифт для каких случаев подходит лучше — sans-serif для стилей интерфейса и для более крупных текстов, чтобы читабельность была на хорошем уровне. В другом примере: есть 2 шрифта для стилей типографики — одна версия для светлых фонов и одна — для темных.

1-GAT5kxP6qFlt2TN2a62H4g
Эм… какой шрифт и для чего я использую?

Парование переменных

Я хочу, чтобы все мои размеры шрифта 16px типа Karla имели высоту 1.2, вне зависимости от того, абзац это или заметка, описание элемента или цитата.

1-JzorSfy3HQUHD8vGBReniw
Попытка соблюдения одинакового сочетания жирности шрифта и высоты строк — это мучение.

Изменение только одной переменной

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

1-xu_fPo1nzpRmNBDFuBlo8A
Но я просто хотел изменить шрифт заголовка…
Я понял, что повторяю одно и то же действие в каждом проекте — например, изменение главного цвета текста, дополнительного цвета текста и цвета неактивного текста. Я также понял, что у меня нет никакого контроля над визуальной иерархией, которую я создал. Поэтому я попытался автоматизировать изменения, которые я чаще всего применял.

Основные принципы

Все есть объект

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

1-WN9WWdfij0e__yevOQ5h9Q

Параметры всего

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

1-NKtW53ya82qSuPj8qzyZrw

Наследование параметров

Тут начинается веселье. Вы создаете базовые строительные блоки, переменные свотчей, т. е. $font-size-s, $grey-500, $border-radius-s или $sans-serif.
Все это вместе формирует базовую строительную библиотеку переменных, которые вы комбинируете для создания визуальной иерархии.

1-GqMCJxuMmTkFdELJF_Od8A
Некоторые из базовых строительных блоков
Затем вы бы могли создать переменные некоторых категорий, скажем, $font-size-main, $color-link-secondary, $border-radius-secondary или $font-headlines. Они работают как посредники между базовыми свотчами и вашими объектами. Присвойте эти переменные разным случаям и ситуациям, точно как в SCSS.

Наконец, вы применяете эти наследованные переменные на объектах — кнопках, абзацах, заголовках, названиях элементов списков, описаниях элементов списков, цитатах и т. д… И вуаля:

1-yv5Hp8FvCoHLn4g0_wMD4w

Будьте готовы ко всему

Вы можете создать дизайн всевозможного типа (основной, дополнительный и т. д.) или состояния (нормальное, неактивное, ховер для кнопки) объекта. Это требует усилий, но не так много времени. Зато вы будете полностью готовы. Возможно, потом вы скажете себе «спасибо».

1-MGBn2ld1E204VogQsH7sZQ
Можно разработать дизайн всевозможных типов объекта

Как этим пользоваться во время дизайна

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

Например, стили нельзя наследовать в Sketch как в SCSS. Поэтому я создаю визуальные стили для каждой визуальной комбинации.

1-2EkLpcMGUUpDznxeWzlhsA
Я создаю визуальные стили для каждой используемой мной визуальной комбинации.
Чтобы изменить только один размер описаний элементов списка, я неизбежно меняю все объекты, которые используют тот же текстовый стиль, даже если мне нужно изменить всего один отдельный элемент. Мне приходится менять все объекты, в которых используется font-size-s.

Представьте себе узловой редактор (что-то вроде Mindnode), в котором вы можете видеть и управлять визуальными связями ваших проектов. Можно было бы считывать файлы SCSS и подключать к Sketch для обновления общих стилей.

1-OGZHqea-Rmlvq4RWm-Lj2w
Такой узловой редактор мог бы помочь наладить визуальную иерархию.

Примеры использования

1-E0MGQfWdqEvnqt_xKBE9vg

Шрифты

У вас может быть шрифт $sans-serif для вашего UI и заголовков, $serif для более длинных текстов и $display для особых случаев.

1-fuM_NM3OvbFm73IWk3BZFg

1-vfPPEgikRDpcO-r--wC69w

Размеры шрифта и высоты строк

В этом примере высоты строк спарованы с конкретными шрифтами конкретного размера (Например, каждый шрифт 12 px Karla должен иметь высоту строки 1.8, а 14px должен иметь высоту 1.75, 16px — 1.6 и т. д.). Вы можете думать о них по-отдельности, но они неизбежно связаны. И помните — более крупным размерам шрифта нужны меньшие высоты строк, потому что они смотрятся пропорционально больше. Вы также могли бы дифференцировать объекты на объекты с высотой строки 1 и объекты со специфичной высотой строки (не равной 1), чтобы соответствующим образом настроить поля.

1-pPM4-z5425nzyVaaPssphg

Цвета

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

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

Зачем думать подобным образом?

1-H6vPIYCCH-8z2j0RKCnrqw

Проще в работе

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

1-5ABd_E4mMOnaUqdMJ66k3g

Лучшее постоянство

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

1-4_xv6AQgUAmufr6DcMBPKQ

Проще для понимания

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

Файл-пример

1-86XLxnLKWTSWdtLtAM1TYg

Есть масса вариантов создания визуальной иерархии. Вы можете скачать файл Sketch с некоторыми моими примерами (вам понадобится Karlafont, который можно скачать с Google Fonts). Развлекайтесь!

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