Всем привет! В этой статье речь пойдет о веб дизайне, а именно для чего нужна модульная сетка в веб дизайне.
Мы узнаем что это такое, посмотрим на нее и поймем для чего же она предназначена и нужна ли вообще, как с помощью нее делать сайты?
Модульная сетка в веб дизайне
Как понять, что это вообще за модульная сетка?
Модуль — это шаг в сетке. То есть определенное расстояние от одного блока к другому
Благодаря этой сетке веб дизайнер может видеть всю картину будущего сайта. Так же она помогает им чтобы элементы сайта не выходили за рамки экрана.
То есть из вышесказанного можно сделать вывод, что модульная сетка — это рамка сайта с помощью которой веб дизайнер может располагать элементы оформления в границах экрана.
Читайте так же статью: С чего начать в веб-дизайне
Для чего предназначена модульная сетка в веб дизайне?
Основное ее предназначение — это правильное расположение элементов для упрощения дальнейшей работы верстальщика.
Если бы веб дизайнер располагал все так как ему нравится, то сверстать такой макет будет крайне сложно, а некоторые элементы и вовсе не получится. Для упрощения работы верстальщика и используется модульная сетка.
Все элементы в ней должны начинаться в большом столбце. Размещение начала элемента в малом столбце недопустимо.
Какого размера бывают модульные сетки в веб дизайне?
Самый распространенный размер под ПК — это 970px пикселя.
Для широкоформатных экранов — 1170 пикселя.
Под планшеты — 750 пикселя.
Под мобильные телефоны и смартфоны — 480 и 320 пикселя.
Адаптивная верстка
Выше мы перечислили самые распространенные размере модульных сеток. Для чего они все нужны? Для корректного отображения на каждом экране будь-то ноутбук или смартфон, что повышает юзабилити сайта.
Сейчас большинство сайтов используют именно адаптивную верстку для своего сайта ибо это удобно и практично.
Это была основная информация по вопросу: для чего модульная сетка в веб дизайне
Надеюсь статья была вам полезна.
Топ 5 курсов обучения веб-дизайну
Полная статья: streethacker.ru/web-design/modulnaya-setka-v-veb-dizaine.html
Больше информации читайте на: streethacker.ru
