---

В процессе повседневной работы с разработкой дизайна интерфейсов в Figma столкнулся с тем, что в существующих дизайн-системах и руководствах к ним нет полноценного обоснования поведения тех или иных компонентов оформления, вписанных в рамки единой дизайн-системы (или у каждого оне хорошо попрятаны). Я тоже не собираюсь обнародовать сие широко, но для собственного употребления решил сделать… Здесь даю ознакомительный фрагмент сего.

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

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

Иллюстрация 1. Пример создание атомных компонентов системы

Описание дизайн системы

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

Метатеги, микроразметка

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

Иллюстрация 2. Базовые метатеги, теги разметки

Базовые сетки

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

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

Иллюстрация 3. Базовые сетки для верстки

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

Для поэкранной разбивки, которая будет особенно актуальна при проектировании лендингов, есть подключаемая разметка в виде горизонтальных направляющих (подключение их отображения через CTRL+R)

Иллюстрация 4. Темная тема. Атомные компоненты

(конец фрагмента)

---

Просмотров: