Модульная сетка и цветовая схема

      Что такое модульная сетка? Понятие пришло из полиграфического дизайна. А полиграфия заимствовала его у строительства.

Согласно Википедии «В архитектуре «модулем» (от лат. modulus — маленькая мера) называют единицу измерения, которая служит для придания соразмерности всему сооружению или его частям. Так, в классической архитектуре в качестве модуля часто принимался радиус колонны у её основания. Размеры различных элементов здания — например высота колонны, ширина и высота окна или портала — устанавливались соразмерно этой единице».

        Модульная сетка — это основа, плоскость, разбитая на клетки. Клетки модульной сетки отделены одна от другой пробельными шагами, которые соответствуют принятым для страницы пробелам между текстом и иллюстрациями (или между расположенными рядом иллюстрациями). Ее шагом служит некий модуль. Например, прорабатывая дизайн для веб-страницы, изначально можем опереться на любой размер экрана. Я применяю как основу ширину экрана в 1024px или в 100%. Плоскость экрана разбивается на прямоугольники или квадраты. Для вертикальной разбивки я применяю Правило золотого сечения. Те элементы, которые имеют самое важное значение, располагаю так, чтобы они попали в зрительные центры.  Далее находим самый мелкий элемент или такой элемент, который может иметь высоту, пропорциональную самому мелкому, и принимаем его высоту как шаг модуля. Если шаг не укладывается по ширине, корректируем его таким образом, чтобы он отвечал как ширине, так и высоте элемента.

     Созданная таким образом сетка и будет нашей «баклушей».

На сегодня уже все основные браузеры поддерживают правило css -display: grid. Это правило работает по принципу модульной сетки. Оно позволяет качественно сделать разметку.

Помимо модульной сетки, понадобится составить схему цветов, цветовое решение сайта. Цветовая схема содержит палитру, применяемую на сайте. Множество готовых схем, а также программ по созданию таковых есть в сети.

Важно помнить, дизайн страницы — фон контента. Он должен поддерживать содержание, а не затмевать его.

   Я считаю: шрифты и цвета ссылок желательно оставлять на усмотрение браузера. А страницу «подстраивать» к ним. Догружать дополнительные файлы шрифтов, создавать дополнительные соединения — во вред скорости загрузки. Конечно, бывают случаи, когда есть необходимость применить особенные шрифты. И цвета ссылок, само-собой разумеется.  Тогда использование "особенных" шрифтов оправдано.

   В этой статье я даю краткий обзор понятий модульная сетка и цветовая схема. Далее рассмотрю их подробнее.

2018-03-16

◄ Назад 

 Вперед ►