19 примеров использования модульной сетки в дизайне сайта

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

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

 

Используем модульную сетку

Цели должны определять дизайн, который  будет выглядеть логичным, а не просто набором абстрактных блоков. Отлично, когда структура шаблона создает ощущение потока, ритма и даже движения. Нужно использовать различные изображения, блоки текста и другие элементы дизайна так, чтобы они подходили друг к другу, формируя сцены просмотра содержания. Хорошая модульная сетка не только объединяет все элементы, но и создает единое целое, которое гармонично представляет вместе различные разрозненные объекты. Лучше использовать одинаковую структуру сетки для всего шаблона сайта. Стоит тщательно разбирать все идеи, которые могут привести к достижению желаемого результата. Даже самая абсурдная мысль может оказаться именно тем решением, которое максимально соответствует вашим целям.

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

Простая модульная сетка

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

Чтобы разработать самый лучший вариант сетки надо предусмотреть возможность создания объектов страницы с помощью сложения нескольких базовых ячеек. Если рассмотреть наш пример, то мы имеем сетку шириной в три базовых ячейки. Это дает нам возможность просто организовать три колонки. Но верхний и нижний колонтитулы имеют ширину трех базовых ячеек (смотрите следующий рисунок). Такой подход к структуре шаблона очень популярен в практике построения сайтов. Глупо ожидать, что все элементы страницы будут иметь одинаковую ширину. Поэтому при использовании сетки нужно использовать тщательно продуманную ширину базовой ячейки.

Типовой трехколночный шаблон

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

Шаблон сайта на основе сетки

Шаблон сайта на основе сетки

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

 

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

Жесткая структура сетки успокаивает пользователя. Она ему визуально знакома и помогает понять, как скомпоновано содержание сайта. Такой подход может налагать определённые ограничения на дизайн, но часто является проверенным и работающим инструментом при построении сайта.  Ячейка сетки часто определяет размеры объектов шаблона, что создает условия определенности при построении сайта.

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

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

 

 

Модульная сетка как структура дизайна

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

В некоторых случаях сетка может определять только ширину колонок, или даже расстояние между объектами. В таких случаях сетка является в большей степени структурой дизайна, а не стилем. На рисунках ниже приведен сайт  NME.com и его упрощенная сетка. В действительности структура сетки более сложная, но модель демонстрирует как сформирована основа.

Пример использования сетки

Пример использования сетки

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

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

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

Пример использования модульной сетки

 

Модульная сетка как интерфейс пользователя

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

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

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

Пример использования сетки

Пример использования сетки

Пример использования сетки

Пример использования сетки

Пример использования сетки

Пример использования сетки

 

Заключение

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.onextrapixel.com/2011/03/24/beyond-the-grid-with-grid-based-web-design/
Перевел: Сергей Фастунов
Урок создан: 2 Июля 2011
Просмотров: 110618
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

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

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 2 Июля 2011 17:36
    AntiArt
    Исправьте ошибку в заголовке.
  • 2 Июля 2011 17:39
    genixxx
    А браузер что грамматические ошибки не «подсвечивает» ?
  • 2 Июля 2011 22:54
    <:Golgi:>
    мда... если бы вы показали как такое делать, я бы понял цель урока(
    • 3 Июля 2011 03:22
      vadik21
      Как делать уже описано сотни раз -гугл... А вот "гибким инструментом" назвать трудно...
  • 3 Июля 2011 10:26
    amor1996
    А мне понравилось )) вдохновение какое то прям..)
  • 3 Июля 2011 11:25
    ppaull
    Что это было?
  • 3 Июля 2011 13:53
    dimasik662
    Ребят подскажите где лежит видеоурок по редактировнию flash шаблонов?
    • 3 Июля 2011 22:46
      truehazard
      его в природе нету....
  • 3 Июля 2011 23:19
    sigrosigro
    покажите плз как такие разметки делать..
    • 4 Июля 2011 15:47
      unframed
      Берешь генератор CSS http://ruseller.com/adds.php?rub=34&id=2166. Там даже пример html кода есть. И полученные стили используешь для дивов, в которых будешь размешать контент.
    • 19 Сентября 2011 12:52
      Chosen_One
      нарисуй в фотошопе или иллюстраторе - кино на фон wrappera (основного контейнера) потом подгоняй под него свои дивы - там как умеешь =)
  • 4 Июля 2011 01:31
    kqlek
    Помоему это бред все, разве что только для спамо-сайтов и доров, а реально верстается всегда с нуля с псд...
    • 4 Июля 2011 11:24
      art_reklama_com
      Дизайнер должен знать принципы верстки, если он их не знает, то что он наверстал, хоть в PSD, хоть в CDR - можно смело выкидывать на помойку. Урок полезен тем, кто только начинает делать сайты. Вам знакомо понятие золотое сечение? Тоже бред?
  • 19 Сентября 2011 01:33
    dimadaviduyk
    cooll
  • Комментарий удален
    • 2 Июля 2011 23:31
      notbot
      А что, ты не любишь дистилированую воду?
^ Наверх ^