Дизайн со смыслом
Перевод статьи Флориана Шульца (Florian Schulz)
«Designing with intent».
В 2016г. я обнаружил, что в сети постоянно растет количество руководств по стилю и статей о дизайн-системах. Все больше веб-дизайнеров и дизайнеров интерфейсов, стремясь повысить консистентность и масштабируемость их работы, стали документировать свои цветовые палитры, стили текста и библиотеки компонентов.
Поскольку проработка и внедрение дизайн-систем требует больших усилий, я считаю, что нам, прежде всего, необходимы инструменты, упрощающие эту работу.
Лично я ищу более удобные способы разработки связей и средства, которые позволят мне выразить и донести мои идеи.
Я чувствую, что следующее поколение инструментов будет строиться на прочной основе, обеспечивающей системный подход к дизайну экранов. Судя по всему, эти инструменты должны будут работать иначе, чем те, к которым мы привыкли, но они сделают нас более продуктивными и позволят сократить время на служебные операции.
Создание собственных инструментов
Чтобы проиллюстрировать, что я имею в виду, я создал простой инструмент, который помогает мне разрабатывать адаптивное масштабирование типографики. Это визуальный интерфейс для создания шрифтовой линейки гибкого типа.
Хотя Modular Scale for Sass и CSS calc() технически реализовать не трудно, я потратил много усилий на подбор значений необходимых параметров.
Я устал угадывать и печатать значения, перезагружать страницу, чтобы увидеть изменения, увеличивать и уменьшать окно браузера, проверяя, как текст поведет себя при изменении размеров и т.д. Вместо того, чтобы упростить мою работу, система сделала меня придатком механического процесса. Тут я подумал, что мне нужен более простой интерфейс, чтобы было легче понять зависимости и поведение параметров. Мне нужно было видеть изменения в реальном времени.
Как это работает
Параметры, а не значения
Слева вы видите два набора элементов, которые можно использовать для управления шириной контейнера, базовым размером шрифта и контрастностью шрифтовой линейки в каждом предельном значении. Это основная “песочница”, где я могу сколько угодно играться параметрами и наблюдать, как ведет себя система.
Важно заметить, что размеры и контрастность зависят от общего дизайна и свободного пространства. Высокая контрастность отлично смотрится на большом экране, но такое же соотношение испортит всю картину на небольших экранах мобильных девайсов.
Это значит, что для мобильных недостаточно просто пропорционально уменьшить все размеры (например, уменьшив базовый размер в HTML). Заголовки останутся слишком большими по сравнению с доступным на экране местом. Ситуацию можно поправить, понизив контрастность текста на нижней границе нашей линейки (для маленьких экранов — прим. переводчика).
Интерполяция
Инструмент показывает минимальный и максимальный виды («Мастер-шаблоны») макета статьи с несколькими заголовками и основным текстом в разных размерах. Все промежуточные размеры шрифтов интерполируются. Это — так называемый гибкий шрифт.
Не проще ли вместо того, чтобы думать о тонкой настройке каждого размера шрифта в каждой произвольной точке, определиться с крайними точками, и с тем, как они соотносятся друг с другом? Как вам параллельный дизайн для минимального и максимального разрешения?
Использование «множественных мастер-шаблонов» — обычное дело при создании шрифтов. При проектировании двух экстремальных значений плотности (например, черный и тонкий), вы можете интерполировать между ними и генерировать сколько угодно степеней плотности(например полужирный, стандартный, светлый).
Визуально качество интерполяции далеко не всегда безупречно и требуется ручная настройка «на глаз».
Мне нравится такое сочетание алгоритмической автоматизации и тонкой ручной настройки человеком. Компьютер, который помогает дизайнеру, а не работает за него.
Я считаю, что интерполяция — полезный метод для решения и других задач, например, таких, как создание дизайна для многих различных устройств, экранов, различных условий освещенности, этот метод подойдет и для других ситуаций, не поддающихся контролю и предварительным расчетам.
Более подробную информацию о интерполяции можно найти в книге “Теория интерпорляции” 1987 г., автора Luc(as) de Groot.
Предварительный просмотр в реальном времени
Можно перетаскивать бегунки на каждом экране, чтобы временно изменять размеры элементов и сразу видеть, как выглядит макет, когда область становится шире или уже. После отпускания кнопки мыши, области предварительного просмотра возвращаются к первоначальному размеру.
Шаг изменений
При наведении на каждый текстовый слой отображается число. Это — шаг изменений шрифтовой линейки. Я могу увеличить / уменьшить шаги для изменения визуальной иерархии, оставаясь в системе.
Ограничения
Инструмент весьма ограничен и затрагивает лишь несколько аспектов веб-шрифтов. Если посмотреть на теорию типографики, мы увидим в ней гораздо больше правил и отношений, которые можно запрограммировать. Точнее, чтобы установить x-height или другие параметры в качестве базовых вместо использования font-size , нам понадобится получить доступ к размерной линейке шрифта. Сейчас же использование одних и тех же параметров для двух разных шрифтов приведет к очень разным результатам. Так получается, потому что предполагаемый фактический размер шрифта не связан с параметром font-size напрямую.
В реальности нам также будет нужно связать нашу систему с HTML-контейнерами, вместо того, чтобы полагаться на ширину страницы. В настоящее время это возможно только при использовании JavaScript и таких библиотек, как EQCSS. Чтобы сделать систему более целостной и пуленепробиваемой в различных ситуациях, нужно будет сделать еще очень много.
Итак, вы не сможете:
- Выбирать шрифты
- Изменять расстояние между символами
- …
Работа с системами и ограничениями
Настройка адаптивного масштабирования только в коде — неправильное решение. Средства разработки и среды программирования должны иметь возможность совместно использовать информацию о нижележащих системах. Может понадобиться посредник, который понимает различные форматы и инструменты. Интересный подход, в данном случае, реализован в Theo от Salesforce.
Рассмотрим его как дизайнерскую полицию (или соломенная подстилка для дизайнеров), которая гарантирует, что вы остаетесь в пределах системы или в рамках правил, оговоренных командой. Вместо того, чтобы свободно выбирать из непрерывного диапазона размеров шрифтов, ваши инструменты будут автоматически привязываться при изменении размера. Аналогичные механизмы можно себе представить при работе с цветом, интервалами другими свойствами.
Если вам это интересно с точки зрения CSS, обратитесь к статье «Размер диалогового окна» моего коллеги Дэвида Аэрне.
Концепция контрастности
Использование бегунка контрастности кажется мне весьма эффективным. Вместо того, чтобы настраивать несколько размеров отдельных шрифтов, я контролирую один единственный параметр, чтобы влиять на всю систему. Хотя я обычно вижу слова «масштаб» или «фактор» в статьях о модульной масштабируемости, термин «контрастность» кажется мне более подходящим. Перемещая бегунок, я непосредственно влияю на контраст между размером шрифта в основном тексте и всеми другими размерами. Чем больше значение, тем больше контрастность.
Я также считаю, контрастность эффективным способом мышления о различных соотношениях в дизайне. Это относится не только к масштабу в типографике, но также к пространству и цвету.
Например, вместо того, чтобы выбрать цвет текста, который «хорошо смотрится» и «хорошо читается», мы могли бы просто определить желаемый цветовой контраст (например 4.5) и позволить дизайнерскому инструменту рассчитать фактический цвет, основываясь на цвете фона.
Таким образом мы владеем средством эстетического контроля («высокий или низкий контраст»), и обеспечиваем удобочитаемость текста.
Создание собственных инструментов
Я сделал этот инструмент в подтверждение своей концепции. Я хотел почувствовать, каково это — контролировать систему и играть с параметрами вместо того, чтобы писать код. Я также хотел выяснить, как ощущается дизайн для минимальных и максимальных разрешений одновременно и есть ли от этого дополнительная польза, помимо того, что можно постоянно видеть текущее состояние.
Главное, что я получаю от этих подсказок — это знания. Конечно, превратить эти идеи в реальные инструменты, которые работают, требует гораздо больших усилий. Но мне все же хочется вдохновить желающих попробовать создать свой собственный (пусть небольшой) инструмент. Попробуйте!
Жалобы на недостаток функционала никуда не приведут нас в ближайшее время. По этой же причине я разработал множество плагинов (Color Contrast Analyser, Line Height, Mate, Style Inventory, Consistency, …).
На мой взгляд, главное достоинство Sketch в том, что он имеет полностью открытый API , через который разработчики могут создавать свои плагины. Команда Sketch всегда понимала, что они не смогут решить все проблемы их пользователей. Но на их прочном фундаменте применить наши творческие способности для создания инструментов стало невероятно легко.
Попробовать
Вы можете попробовать «Adaptive Modular Scale» на CodePen. В действительности он не предназначен для использования в реальных условиях, и я не проводил тщательного тестирования. Очевидно также, что разработка «максимального» состояния требует большого экрана или использования контроля масштаба, который я не делал.
Над переводом работали: Наталья Лекшина, Варвара Новожилова, Владимир Клименко
