Перейти к навигации · Перейти к содержимому

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

Про grid

Как известно, модульная сетка (grid) — это один из самых эффективных способов придания четкой визуальной структуры содержимому, а также обозначения связей между элементами страницы.

Википедия говорит:

The purpose of the grid is to help the designer organize the content of the page in a pleasing and easy-to-digest manner for the viewer by imposing structure and cohesion to the layout.

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

О приемах работы с сеткой можно почитать, например в статье Марка Бултона Five simple steps to designing grid systems.

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

Виджет для создания сетки

Grid-виджет

Указанный способ мне кажется слишком сложным, к тому же, совсем недавно я обнаружил чудесный инструмент для визуализации сетки без всяких неудобств. Речь идет о виджете easyGRID для самого лучшего браузера — Opera 9.

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

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

В общем, попробуйте — думаю понравится.

P.S. Ушел смотреть футбол. Италия вперед! =)

Комментарии

О, просто отличный виджет. Надо будет заходить по чаще на их сайт. Спасибо за инфо!

Опа! А я уж думал что виджеты бесполезная вещь =)
Только вот под линуксом он у меня не заработал =(

Хм, знакомо…
Пользуюсь расширением Web Developer для FF. Он тоже предоставляет подобный функционал, а вот до 9 оперы всё не обновлюсь =\

Ага, я сначала тоже думал, что виджеты — просто красивые игрушки.

А насчет web developer для FF — мне их гайды показались не очень удобными в использовании, и к тому же они пропадают после каждого обновления страницы.
Лучше — этот виджет и WebDevToolbar для Оперы

С удачным переездом!

Спасибо =)

А я и не знал про такой способ…
Спасибо.
буду к вам частенько заглядывать.

Спасибо.
очеь пригодилась ваша информация!

Очень актуальная информация. Спасибо.

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