Виявлені елементарні дизайн-частинки


Чесно кажучи, мені вже незручно в черговий раз говорити про Атомарному дизайні. Про концепції дизайн-систем сказано практично все і, здавалося б, додати вже нічого. Але постійте! Адже атоми в реальному світі з чого складаються: протони, нейтрони, електрони… чи Можна співставити зі структурою атома дизайн-функціонал, з яким ми працюємо? Я впевнений, що відповідь позитивний і ось чому…

Глобальні стилі

Пришестя в дизайн-інструменти глобальних стилів як приєднуваної сутності до будь-якого об’єкта на артборде, наштовхнула мене на метафору. Склад атома еквівалентний тим діям, які ми застосовуємо до дизайн-об’єкту: підбираємо колір, додаємо обведення, іноді ще й тінь, а потім зрізаємо кути, якщо це прямокутник.

Якщо розглянути, наприклад, кнопку як молекулу, що складається з двох атомів: фону і написи, то на фон можна впливати наступним чином:

  1. Додати колір (Fill). Будь фон можна зафарбувати або заповнити текстурою.
  2. Додати обводки (Stroke). Потім регулювати товщину, зробити пунктирною, змінити колір.
  3. Скруглить кути (Corner radius). Кнопки з максимально округленими кутами, здається, знову стануть популярними в осяжному майбутньому.
  4. Додати тінь (Shadow). В основному зовнішню, але іноді і внутрішню. Сучасні інструменти дозволяють нашаровувати кілька тіней.

Я не включив сюди поворот об’єкта і зміна розмірів, т. к. це більше про зміни в просторі

Елементарні частинки дизайн-атома

Подивіться на схему складу атома, перш ніж я продовжу:

Image copyrightsStructure of a beryllium atom: four protons, four neutrons and four electrons.
Credit: general-fmv © Shutterstock

Тепер найцікавіше. Хто-небудь вже здогадався, які властивості дизайн-об’єктів можна зіставити з частинками атома?

Нейтрони — це заливка. На візуалізації структури атома нейтрони в самому центрі. Метафора підходить бездоганно.

Протони — заокруглення кутів. Їх розташовані по кутах атома відразу асоціюється з цією властивістю в дизайні.

Читайте також  Чого я навчився, створивши 100 ігор за 5 років

Нуклони дуже хочеться порівняти з обведенням. На жаль, нуклон не є часткою, а лише є назвою об’єднуючим протони і нейтрони, але це і неважливо! Отже нуколы — це тінь. Бо як обведення збирає воєдино те, що знаходиться всередині неї. Це повністю збігається з картинкою вище.

Електрон — це тінь. Вікіпедія показує мені цю картинку, що нагадує тінь. Ідеальний збіг за всіма параметрами.

Тому до дизайн-систем

Це лише доповнення до загальної теорії Атомарного дизайну при проектуванні дизайн систем. Концепція глобальних стилів однозначно викликає звикання до Figma (здається Sketch нещодавно пішов аналогічним шляхом). І завдяки такій подачі, ми — дизайнери і розробники отримали ще більше гнучкості для кастомізації якщо ефективно плануємо архітектуру майбутньої системи:

P. S.: Дизайн вимагає практики, а не теорії. Але іноді варто відволіктися від практики ненадовго, щоб структурувати накопичений досвід у нові теорії.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *