Как стать организованнее в процессе UI дизайна?

После 4 лет работы в сфере цифрового дизайна я стал одержимым в сортировке и упорядочивании информации. Это привело к созданию систематического подхода к дизайну пользовательского интерфейса. Это объектно-ориентированный, навеянный программированием подход, сбор разных идей, универсальных по своей сути. Пользуйтесь ими для работы с любимым дизайн-приложением или для кодинга. Он помогает согласовать дизайнеров с программистами, позволяет им быть на одной волне - лучшее общение ведет к лучшему пониманию и созданию лучших продуктов в итоге. Этот подход используется, в основном, на более поздних этапах дизайна, обычно во время шлифовки проекта, когда появляется больше времени подумать о связях в вашей визуальной системе. Оптимизация на ранних стадиях проекта во время прототипирования и макетирования означала бы более простую адаптацию как в дизайне, так и в программировании. Конечно, основная идея визуальных коллекций и их применение в процессе дизайна далеко не нова. Я вдохновился Material Design, переменными SCSS,Macaw, Origami, Atomic Design и разными библиотеками паттернов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тут начинается веселье. Вы создаете базовые строительные блоки, переменные свотчей, т.е. $font-size-s, $grey-500, $border-radius-s или $sans-serif. Все это вместе формирует базовую строительную библиотеку переменных, которые вы комбинируете для создания визуальной иерархии. Некоторые из базовых строительных блоков Затем вы бы могли создать переменные некоторых категорий, скажем, $font-size-main, $color-link-secondary, $border-radius-secondary или $font-headlines. Они работают как посредники между базовыми свотчами и вашими объектами. Присвойте эти переменные разным случаям и ситуациям, точно как в SCSS. Наконец, вы применяете эти наследованные переменные на объектах - кнопках, абзацах, заголовках, названиях элементов списков, описаниях элементов списков, цитатах и т.д… И вуаля:

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

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

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

Основной подход заключается в организации всего и поиске всех связей. Далее нужно будет хакнуть или улучшить инструменты в поддержку этой системы, тем самым увеличив свою продуктивность. Например, стили нельзя наследовать в Sketch как в SCSS. Поэтому я создаю визуальные стили для каждой визуальной комбинации. Я создаю визуальные стили для каждой используемой мной визуальной комбинации. Чтобы изменить только один размер описаний элементов списка, я неизбежно меняю все объекты, которые используют тот же текстовый стиль, даже если мне нужно изменить всего один отдельный элемент. Мне приходится менять все объекты, в которых используется font-size-s. Представьте себе узловой редактор (что-то вроде Mindnode), в котором вы можете видеть и управлять визуальными связями ваших проектов. Можно было бы считывать файлы SCSS и подключать к Sketch для обновления общих стилей. Такой узловой редактор мог бы помочь наладить визуальную иерархию.

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

Шрифты

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

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

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

Цвета

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

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

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

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

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

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

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

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

Файл-пример

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

---

Перевод статьи Marek Minor