Сетка


Рекомендуем выравнивать элементы интерфейса по базовой сетке с модулем 4px. Размер иконок, высота текстовых блоков, отступы между элементами и интерфейсные блоки советуем выстраивать по этой сетке.

Базовая сетка в 4px помогает корректно масштабировать элементы интерфейса под необходимое разрешение экрана и соблюдать пропорции элементов и компонентов.

Базовая сетка

 

Кнопки

 

Блоки и отступы

 

Изображения

Иконки

 

Изображения

Размер 1х144х144
Размер 1,5х216х216
Размер 2х288х288
Размер 3х432х432
Размер 4х576х576

 

Типографика

 

Наверх

Типы страниц

На сайте используется два типа страниц: интерфейсные и лендинги. Они различаются визуализацией и структурой. Шапка и подвал сайта страниц могут быть одинаковыми.

 

Интерфейсные страницы

Контентная часть формируется из интерфейсных блоков, расположенных на сером фоне.

 

Лендинги

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

 

Наверх

Под какое разрешение проектировать и тестировать?

Все макеты для десктопной версии сайта проектируются и передаются на верстку в разрешении с шириной 1280px.

Рекомендуется тестировать макеты на популярных десктопных разрешениях: 1280×1024, 1366×768, 1440×900, 1920×1080 до передачи на верстку и после. А также проверять отображение на мониторах с разной плотностью пикселей и разной контрастностью экранов.

 

Интерфейсные страницы

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

Сетка

Для декстопной версии сайта, все элементы интерфейса внутри контентной части располагаются по 12-колоночной сетки с фиксированной шириной 1180 px. Для планшетной и мобильной версии страницы проектируются с использованием других сеток.

 

Типы компоновки

Компоновка блоков может быть одноколоночной или многоколоночной. Чередование двух типов компоновки в рамках одной интерфейсной страницы не допустимо.

 

Многоколоночная компоновка

Существует множество вариантов расположения интерфейсных блоков на странице на одной горизонтали при том условии, что ширина блока кратна размеру, заданному в колоночной сетке.

Последовательное чередование разных вариантов блоков в рамках одной страницы возможно, но не желательно.

 

Одноколоночная компоновка

Страницы с одноколоночной компоновкой ограничиваются 6 вариантами с фиксированной шириной блоков. На таких страницах, интерфейсный блок всегда располагается по центру. Ширина блока не может отличаться от заданной в колоночной сетке размера.

Наверх

Интерфейсные блоки

Интерфейсный блок — это группа элементов интерфейса, связанных между собой по смыслу.

Интерфейсные блоки располагаются на прямоугольных или квадратных плашках с радиусом скругления 10px для всех углов. Из блоков формируется контентная часть интерфейсных страниц.

Минимальная высота интерфейсного блока— 64px.

Блоки бывают статичными и активными. Оба вида блоков размещаются на сером фоне #F5F5F5.

 

Статичные блоки

Статичные блоки служат подложкой. Их задача — привлекать внимание к контенту и интерактивным элементам.

 

Активные блоки

Активные блоки — это интерактивные элементы, реагирующие на наведение и клик.

 

Внутренние отступы

Для интерфейсных блоков предусмотрено два типа внутренних отступов: обычные и увеличенные. Не рекомендуем размещать блоки с обычными и увеличенными отступами на одной странице.

Обычные отступы чаще всего применяются для компактного размещения контента в интерфейсных блоках шириной до 580px. Увеличенные оступы могут использоваться на блоках шириной более 580px.

Цвет блока#FFF
Цвет фона#F5F5F5
Тень#000, 12%, Y: 1px,
размытие: 2px

 

Отступы между блоками

Вертикальный отступ от одного интерфейсного блока до другого равен 20px. Исключение — блоки, разделенные внешним заголовком или навигацией. В таком случае величина отступа зависит от параметров разделяющего элемента. Горизонтальные отступы между блоками также составляют 20px.

Наверх