Компания
  • Давайте знакомиться!
  • Наша команда
  • Партнеры
  • Вакансии
Услуги
  • Разработка сайтов
    • Сайты на 1С Битрикс
    • Landing Pages
    • Адаптивные сайты
    • Интернет-магазины
  • Продвижение сайтов
    • Продвижение сайта в ТОП 10
  • Реклама
  • Поддержка и развитие сайтов
    • Увеличение конверсии сайта
    • Стоимость разовой поддержки сайта
  • Брендинг и айдентика
  • Мобильные сайты
  • Приложения для сайтов
    • Калькулятор натяжных потолков
    • Калькулятор рольставен (рольставней)
    • Калькулятор деревянных окон
    • Калькулятор ПВХ окон онлайн
    • Калькулятор секционных ворот
  • Продвижение сайта в cоц. сетях
Портфолио
Клиенты
Блог
Контакты
Ещё
    Tomatys — Дизайн с усами.

    Оставить заявку

    • Разработка
    • Продвижение
    • Реклама
    • Кейсы
    • О компании
      • Давайте знакомиться!
      • Наша команда
      • Партнеры
      • Вакансии
    • Контакты
    Tomatys — Дизайн с усами.
    • Разработка
    • Продвижение
    • Реклама
    • Кейсы
    • О компании
      • Назад
      • О компании
      • Давайте знакомиться!
      • Наша команда
      • Партнеры
      • Вакансии
    • Контакты
    • +7(495) 128-72-67
    Москва, ул. Горбунова д 2 стр 204, БЦ «Гранд Сетунь Плаза», офис 228
    hello@tomatys.com
    • Facebook
    • Вконтакте
    • Twitter
    • Instagram
    • Telegram

    21 Декабря 2011

    Модульные сетки в веб-дизайне

    Начало


    Вам нарисовали дизайн сайта. Красивый, яркий, но какой-то нестройный и разваливающийся? Прислали макет на верстку, а в нем черт ногу сломит от разнообразия отступов и блоков?

    Не волнуйтесь! Просто дизайнер рисовал этот макет от души, позабыв заложить в него логику компоновки. Как же быть? Элементарно! Просто слегка приведем макет в систему — применим к нему модульную сетку!

    Что такое модульная сетка?

    Макет сайта будет выглядеть красиво, если он построен на основе системы модульной верстки, в простонародье — модульной сетки.

    Попытки «систематизировать красоту» предпринимались еще в Средние века переписчиками книг. Они использовали набор специальных правил для разметки страниц.

    После Второй мировой войны несколько графических дизайнеров, включая Макса Билла и Джозефа Мюллера-Брокмана, вдохновленные работой «Новая типографика» Яна Чихольда, задались вопросом верстки страниц.

    Они начали разрабатывать систему, которая бы позволила наилучшим образом располагать текст и иллюстрации на странице. Фундаментальная работа Мюллера-Брокмана — «Grid Systems in Graphic Design» — способствовала распространению модульных сеток в европейской, а позже и американской типографике.

    Модульная сетка — система верстки, основанная на сетке с вертикальным и горизонтальным ритмом. Условной единицей в этой системе является модуль, откуда, собственно, и пошло название.

    Модуль — условный блок в конкретной сетке, шаг в ее ритме.


    Зачем использовать модульную сетку?

    «Чтобы ровненько выстраивать блоки!» — скажет сферический дизайнер в вакууме. И будет прав… ну, на треть половины, например.

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

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

    А ещё, использование модульной сетки дает преимущества при верстке проекта, облегчает добавление новых элементов и поддержку проекта в целом. Не возникает путаницы с размерами колонок и отступов, а при необходимости немного изменить страницу, например, добавить один-два рекламных блока — это будет легко сделать, не нарушив целостности сайта.

    Как этим пользоваться


    Как пример — сайт компании А2К. В нем мы для удобства использовали фиксированную 12-колоночную сетку. По этой сетке у нас выстраиваются все ключевые элементы — начиная от меню и переключателя языков, логотипа, телефонов и заканчивая копирайтами.


    На этой странице видно, как добавляется новый элемент — боковое меню, которое тоже прекрасно вписывается в сетку. И если нам понадобится поменять контент и боковой блок местами…


    …благодаря сетке, страница останется все такой же целостной и собранной.

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


    Типичная реакция дизайнера, открывшего для себя модульную сетку

    Полезные ресурсы

    Сетки для Photoshop

    Grid 960 — замечательный макет 960-пиксельной сетки в любых форматах. Благодаря 6-пиксельному вертикальному модулю, обеспечивает гибкий контроль текстового ритма.

    The Golden Grid Template — шаблон, построенный на базе css-фреймворка The Golden Grid.

    CSS-фреймворки на основе сеток

    1KB Grid — замечательная библиотека, которая ставит во главу угла скорость. Выберите количество колонок, их ширину и ширину отступа — нажмите «Скачать» и приступайте к верстке вашего сайта.

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

    Twitter Bootstrap — огромная библиотека, фреймворк «для быстрой фронт-энд разработки», как называют его авторы. Построен на модульной сетке, причем с фиксированным и резиновым вариантами.

    Вооружаться, однозначно!

    Модульные сетки — это удобно, полезно, модно, молодежно! Стоит набить руку, и через некоторое время вы будете подбирать оптимальную сетку интуитивно. И пусть макеты дизайна, которые вы создаете, будут аккуратными, целостными, да просто — совершенными.



    Вернуться ко всем статьям


    Назад к спискуСледующий
    Tomatys — Дизайн с усами.
    Мы занимаемся разработкой сайтов для России и зарубежных рынков с 2011 года. Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют Томатус предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.

    © 2011–2023
    Политика конфиденциальности

    Компания
    • О «Томатус»
    • Процесс
    • Кейсы
    • Наша команда
    • Вакансии
    • Блог
    • Контакты
    Брендинг
    • Логотипы
    • Фирменный стиль
    Разработка
    • Корпоративные сайты
    • Интернет-магазины
    • Сайты на 1С Битрикс
    • Адаптивные сайты
    Продвижение
    • Оптимизация сайта
    • Аудит эффективности
    • Продвижение в ТОП
    • Продвижение в регионах
    • Контекстная реклама
    Поддержка и развитие
    • Техническая поддержка
    • Комплексная поддержка
    • Разовые работы
    +7(495) 128-72-67
    Оставить заявку