Admin panels: Design

grid types
Види сіток

Є два підходи до використання базової сітки: 8px HARD GRID

та 8px SOFT GRID.

При використанні hard-сітки (жорстка сітка) всі елементи

мають розміри кратні – 8 і розташовуються строго по сітці

з відступами, теж кратними восьми.

*усе ділиться на 8 *тут не ділиться на 8 (60,

20 не ділиться)
 Admin panels: Design

grid types
Види сіток

У Фігмі є налаштування такої сітки. Тут важливо орієнтуватися

саме по основним квадратам, щоб все було кратне восьми.

Основний плюс використання hard-сітки – це те,

Основний плюс використання hard-сітки – це те,
що як би ти не групував елементи між собою,
що як би ти не групував елементи між собою,
ти завжди зможеш контролювати внутрішні
ти завжди зможеш контролювати внутрішні
та зовнішні відступи та переміщати контейнери
та зовнішні відступи та переміщати контейнери
елементів, як цеглинки.
елементів, як цеглинки.

8 px
8 px

8 px
8 px
 Admin panels: Design

grid types
Види сіток

Другий підхід – soft-сітки (м'якший підхід), де ми

не використовуємо налаштування сітки у Фігмі.

У нас немає намальованої сітки, ми так само орієнтуємося

на відступи між елементами та їх розмірами, кратні 8.

При цьому не обов'язково, щоб саме ширина елементів

була кратною 8.

Головне, щоб відступи між елементами та висота елементів

рівнялась на 8. Ми також використовуємо направляючі у фігмі,

щоб собі допомогти.

Email

Введіть email 48px

16px

Пароль

8px

48px Введіть пароль

8px
 Admin panels: Design

8px SOFT GRID

Чому ще 8px сітка це зручно?

Тому що у більшості поширених девайсів розмір екрану

в пікселях кратний восьми, отже розробляти дизайн

інтерфейсів для них із цією системою буде простіше.

Крім того, якщо всі числові парні значення, масштабувати дизайн,

зберігаючи його в початковому вигляді, стає простіше. Навіть,

коли ти змушений користуватися іншою сіткою, все одно роби

парними всі числові значення елементів.

*усе ділиться на 8 *тут не ділиться на 8 (60,

20 не ділиться)
 Admin panels: Design

8px SOFT GRID

Що стосується іконок та 8px сітки, ти виявиш, що більшість з них

була розроблена для розміщення всередині рамок, теж кратних 8

(16x16, 24x24, 32x32 і т.д.). Навіть якщо основна сітка, якась інша.

Переконайся, що будь-яку іконку, яку ти додаєш у свій дизайн, ти

поміщаєш у невидимий контейнер, у фрейм, який використовує

кратне значення 8 (наприклад, 24x24).

Це просто дозволить послідовно розміщувати

Це просто дозволить послідовно розміщувати
іконки в твоїх інтерфейсах користувача.
іконки в твоїх інтерфейсах користувача.

16 px 16 px 16 px
16 px
 Admin panels: Design

4px SOFT GRID

В Material Design більшість вимірів вирівнюються по сітці 8рх,

яка вирівнює як інтервали, так і загальний макет. Компоненти

меншого розміру, такі як іконки та текст, вирівнюються по 4рх.

Google комбінують дві сітки і за рахунок цього їх інтерфейси

виглядають візуально збалансованими.

Лі жко Halmar Velvet

8px

Артикул: V-CH-K/410-KR-POPIELATY

8px

8px

4 85 см x 65 см x 62 см

Вельвет, жаккард, скотчгард,

терможаккард, гобелен,

терможаккард, гобелен.

12px

Крісло Halmar Velvet - ідеально підходить

практично до будь-якого сучасного

інтер'єру кухні, їдальні, бару чи кафе.

Поєднує в собі стиль, практичність

і якість.

4px

Спробувати в AR
 Admin panels: Design

4px SOFT GRID

Звертайся за допомогою до популярних дизайн
Звертайся за допомогою до популярних дизайн
систем типу Material design (від гугл), HIG (від епл),
систем типу Material design (від гугл), HIG (від епл),
Carbon, IBM.
Carbon, IBM.

В аргументації теж можна на них посилатися, але не так, що "От

Material теж так робить" – це не аргумент.

А ось "У матеріал дизайні, до речі, команда дизайнерів

рекомендує використовувати розмір чекбоксів не менше 24px,

тому що це мінімально допустима зона для кліку і тд ..." – це вже

аргумент, який пояснює чому варто взяти до уваги досвід великої

компанії, не просто тому що це велика компанія.