Модульная сетка

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

Модульная сетка представляет собой невидимую структуру, разделяющую пространство макета на колонки и интервалы. Она служит фундаментом для размещения контента и элементов интерфейса, помогая дизайнерам и разработчикам создавать упорядоченные и сбалансированные композиции.

Для разрешения экрана 1920 px

12-ти колоночная сетка
Отступ от края экрана: 40 px
Отступ между столбцами: 24 px

Для разрешения экрана 1440 px

12-ти колоночная сетка
Отступ от края экрана: 40 px
Отступ между столбцами: 24 px

Для разрешения экрана 768 px

12-ти колоночная сетка
Отступ от края экрана: 24 px
Отступ между столбцами: 24 px

Для разрешения экрана 375 px

4-х колоночная сетка
Отступ от края экрана: 16 px
Отступ между столбцами: 16 px

Для дизайн-системы Сеченовского университета предусмотрено несколько вариантов модульной сетки, адаптированных под различные разрешения экранов, чтобы обеспечить оптимальное отображение контента на любых устройствах:

1. Для экранов с разрешением 1920 px и более (Десктопные компьютеры и большие мониторы)

Тип сетки: 12-ти колоночная. 12 колонок обеспечивают максимальную гибкость для размещения разнообразного контента, от текстовых блоков до сложных графических элементов, на больших экранах.
Отступ от края экрана: 40 px. Этот отступ создает визуальное пространство вокруг контента, делая его более читабельным и отделенным от краев экрана.
Отступ между столбцами (колонками): 24 px. Интервалы между колонками обеспечивают достаточное пространство для разделения контента на логические

2. Для экранов с разрешением 1440 px (Стандартные десктопные компьютеры и ноутбуки)

Тип сетки: 12-ти колоночная. Сохранение 12-ти колоночной сетки на экранах данного разрешения обеспечивает преемственность и масштабируемость десктопного интерфейса.
Отступ от края экрана: 40 px. Как и для 1920px, отступ в 40px обеспечивает комфортное восприятие контента на экранах данного размера.
Отступ между столбцами (колонками): 24 px. Интервал между колонками остается неизменным для сохранения консистентности визуальной структуры.

3. Для экранов с разрешением 768 px (Планшеты в портретной ориентации)

Тип сетки: 12-ти колоночная. Несмотря на меньшее разрешение, сохранение 12-ти колоночной сетки позволяет адаптировать десктопный макет для планшетов, обеспечивая узнаваемость интерфейса. Однако на практике, на данном разрешении, дизайнеры могут использовать и более простую сетку в рамках 12-ти колоночной, например, задействуя только часть колонок или объединяя их.
Отступ от края экрана: 24 px. Уменьшение отступа от края экрана до 24px позволяет более эффективно использовать пространство на экранах планшетов, сохраняя при этом достаточное визуальное разделение контента от края.
Отступ между столбцами (колонками): 24 px. Интервал между колонками остается 24px, обеспечивая визуальную связь с десктопными версиями и сохраняя консистентность.

4. Для экранов с разрешением 375 px (Мобильные телефоны)

Тип сетки: 4-х колоночная. Для мобильных устройств с ограниченным пространством экрана используется упрощенная 4-х колоночная сетка. Она обеспечивает необходимую структуру для организации контента в условиях вертикальной ориентации экранов телефонов, при этом оставаясь достаточно гибкой для отображения основных типов мобильного контента.
Отступ от края экрана: 16 px. Отступ от края экрана уменьшается до 16px, чтобы максимально эффективно использовать узкое пространство мобильных экранов.
Отступ между столбцами (колонками): 16 px. Соответственно, интервал между колонками также уменьшается до 16px, чтобы сохранить пропорции и визуальную гармонию в мобильном представлении.