Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

20 июня 2012 | Опубликовано в Веб-дизайн | 13 Комментариев »

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

Йозеф Мюллер-Брокман

 

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

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

Рассмотрим два макеты страниц представлена ​​на рисунке ниже:

скриншот

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

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

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

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

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

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

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

Стоит отметить, что существует два способа создания сетки шаблона:

Способ №1: Создайте свою собственную сетку

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

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

Возможно, в этом вам помогут следующие статьи:

Вот несколько примеров сетей, созданных в Photoshop с помощью направляющих (View> New Guide):

Создайте свою собственную сетку

Плагины для создания сеток в Фотошопе

1. GuideGuide — полезный плагин для дизайнеров, которые вручную чертят сетки.  Есть версии для Photoshop CS4 и CS5+. Подробнее читайте здесь.

2. Modular Grid Pattern

3.  GridMaker 2

4. Скрипт для создания сетки из шейпов в Фотошопе

Способ №2: Скачайте готовый шаблон сетки

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

Сетки фиксированной ширины

1. 960.gs — пожалуй, самый популярный инструмент для создания сеток. О том, как пользоваться этим фреймворком читайте здесь.

2. Сеточные шаблоны для Photoshop

3.  Modular Grid Pattern (о том, как использовать этот сервис,  читайте  здесь )

4. Grid Designer

5. Grid System Generator -генератор таких популярных сеток, как 960.gs, Golden Grid, 1Kb Grid, Simple Grid/ установите нужные параметры и нажмите «GENERATE».

6. Grid Calculator — калькулятор, который позволяет рассчитать параметры сетки.

Grid Calculator

 

Сетки для резиновых/ адаптивных сайтов

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

1. Gridpak — генератор адаптивной сетки

2. Fluid grid calculator — сервис, который позволяет создать резиновую сетки. Введите параметры и получите готовый код.

3. Fluid Baseline Grid — резиновая сетка с базовой линией

Учимся работать с сеткой

Для закрепления материала рекомендуем серию уроков на английском языке по созданию сайта, который построен на сетке

Смотрите демонстрацию

Часть1 — рисуем макет в  Фотошопе

Часть2 — верстка

Часть3 — натягиваем на Wordpress

Полезные статьи и ресурсы:

 

При написании статьи использованы материалы из :




Комментарии

  1. Op
    Thumb up Thumb down 0

    :P

    Ответить

  2. Demi
    Thumb up Thumb down 0

    Ура Ура !!!! Спасибо ! *IN LOVE*

    Ответить

  3. Demi
    Thumb up Thumb down +4

    ДЕЖУРКА КРУЧЕ ВСЕХ !!!!!!!!!!!!!!!!!!!!!!!! *CRAZY* *CRAZY* *CRAZY*

    Ответить

  4. hvonick
    Thumb up Thumb down +1

    Спасибо, Кэп)

    Ответить

  5. Илья
    Thumb up Thumb down +3

    Вот она, самай важная статья на сайте!! Огромное спасибо

    Ответить

  6. Azamat
    Thumb up Thumb down 0

    *DANCE* *YAHOO*

    Ответить

  7. Dasha
    Thumb up Thumb down +1

    Недавно увидела отличный тестер адаптивного дизайна

    plastilin5.com/tools/

    Ответить

  8. ЕЛЕНА
    Thumb up Thumb down -2

    Слава Дежурке!!!! спасибо!!!1 =)

    Ответить

  9. Вэл
    Thumb up Thumb down 0

    Спасибо за статью, очень полезная,

    но фраза «ваш дизайн будет иметь скучный дизайн» вызывает боль

    Ответить

  10. Лиза
    Thumb up Thumb down 0

    по ссылке www.agasyanc.ru/modgrid скрипт не работает.

    все правильно установили — запускаем и фигня получается.

    сам сайт у чувака тоже плохо работает

    Ответить

  11. 771
    Thumb up Thumb down 0

    =) Кому нужна помощь, обращайтесь

    Ответить

  12. 771
    Thumb up Thumb down 0

    websash.ru

    Ответить

Оставить ответ


9 − три =

Вставить изображение

Похожие статьи