Работаем с сеткой и «960 Grid System»

Опубликовано 21 апреля 2009 в категории Дизайн →  13 комментариев

— «С чего начать работу над макетом сайта?». Вопрос на который каждый дизайнер скорее всего ответит по своему. Лично я склоняюсь к тому что все зависит от того, над сайтом какого типа нам придется работать. Так ли нужна строгая модульная сетка, скажем, промо-сайту нового товара/услуги и что без нее будет делать информационный портал или блог? (пример ниже)

double_small2Определившись с функционалом страницы не лишним будет создать черновой прототип, либо по-старинке на бумаге, либо в программах вроде «Axure RP». В любом случае, при работе над чистовым вариантом нам понадобится сетка. И в этом моменте не лишним будет воспользоваться как «960 Grid System» (http://960.gs), с уже готовыми шаблонами для фотошопа, иллюстратора и пр., так и скриптом для создания заданного макета сетки в случае если рабочая область шире стандартных 960 пикселей .

Говорят цифры.
Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Стандартная ширина рабочей области макета в 960 пикселей делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. Что делает работу с такой сеткой очень гибкой.

Стандартные размеры. 12 и 16 колонок.
Сетка на 12 колонок разбита на равные части по 60 пикселей каждая, соответственно 16ти колонная сетка будет по 40 пикселей. Стандартный отступ слева и справа каждой колонки — 10 px., или 20 в сумме. Для нестандартных размеров стоит воспользоваться небольшим скриптом, работающим на основе этой системы(линк ниже).

Примеры использования: посмотреть
Все шаблоны одним архивом: скачать
Генератор произвольной сетки: перейти

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

960 или 980.
Ширина сайта в 960 пикселей так же оптимальна для мобильных устройств и планшетов (тот же iPad и большинство нетбуков). При создании макета шириной в 980 и более возможна, а в некоторых случаях и неизбежна, ситуация когда контент будет упираться в края экрана. Это также стоит учитывать.

Подписка на блог
Самый простой способ получать обновления прямо на почту
при добавлении новых материалов.
Просмотров: 31 927
  • Спасибо за статейку, я честно говоря, без сеток всю жизнь работал, даже и не знал что они нужны. Нужно будет попробовать с ними. Вот было бы еще интересно про историю сеток поичтать, типа зачем они нужны?

  • Viacheslav

    Пжлст., пока правда довольно сумбурно получается писать в блог 🙂
    Историю сеток можно легко нагуглить, но в целом корни тянуться из издательств (где верстальщик в кварке или индизайне всегда работает по сетке журнала). В вебе с этим несколько попроще, я например зачастую формирую сетку уже в зависимости от той графики и информации которая появляется в макете. Т.е. бывает начинаешь с одной сеткой, а финальный макет оказывается уже совсем с другой. В любом случае вот эта 960-система достаточно универсальна, что бы перекраивать макет на лету и при этом не нарушая основные пропорции. Рекомендую попробовать.

  • Да, спасибо! Даже не знаю еще, полезно ли это будет для меня. Ведь сайторисователем я себя не называю, руки пока еще не из того места, но ведь какие-то пародии на сайты иногда рисую, а значит пригодится и сетка ))) Хотя, честно говоря, рассматриваю ее пока что только как дополнительный утежелитель при беге, вроде и полезно и правильно, но мешает ))) Проще под каждый конкретный сайт свою сетку нарисовать гридами, чем я, собвтенно говоря, всегда и занимаюсь )

  • Сетки это очень хорошо, но почему именно за стандартную ширину сайта берете 960?? "Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768." Из 1024 вычтите ширину скроллнига и бордюра браузера и получиться 990 px Это полностью видимая область сайта, так зачем же сокращать драгоценное пиксели для сайта еще меньше,, меньше размеров-меньше информации на сайте. Я думаю что автор хорошо изучил труды заграничных дизайнеров которые 80% лепят web2нольные нерезиновые отцентрированные сайты при которых 960 оптимальный варинат, но для России это непрокатывает в большинсве случаев. Был бы признателене если сделали бы перерасчет сеток на реальные 990 px/

  • Viacheslav

    2Joker: дело в том что именно при 960px ширине удобно делить макет на равное кол-во, скажем, колонок. Получается гораздо большее кол-во универсальных блоков к которыми можно работать в сетке и проверить это не трудно кстати (см. раздел про цифры) 😉 К примеру, на 4 равные колонки ты 990 ширину уже не поделишь. Речь именно о том, что удобно рассчитывать блочные расстояния и отступы при макетировании, а при +30 к ширине этого сделать уже не получится и смысла пересчитывать под такую сетку стандартные блоки нет.

    И еще, не важно где, хоть в Зимбабве делай, хоть в России, но с 960 будет удобнее и быстрее 🙂

  • Вы бесусловно правы в той части что касается нерезиновых сайтов,, но если для резинового сайта сверстать 960px беря за исходную позицию сайта 1024 мониторы то сразу же сайт начнет резиниться!!!!,, Зачем в исходно минимальной позиции на 1024 тянуть сайт,,, а если вы уже стали тянуть на минимальном расширинии то нафига нужны были все ваши стройные сетки которые сразу же потеряют свои размеры при растягивании сайта,,, Как можно будет увидеть всю вашу рассчитанную с точностью до пикселя красоту на 1024 мониках?? принудительно сузить окно броузера до 960? =))

    Для каждой задачи свои решения, и зачем упрощать себя работу за счет последующих касяков. Вот я буду очень Вам признателен если найдется универсальный способ решить задачу сетки на стандартные 990 px =)

  • Viacheslav

    @JoKeR: В статье речь шла про сайты с фиксированной шириной (как это видно из примеров). Если нужна сетка под плавающие размеры можно воспользоваться "960 fluid" — http://designinfluences.com/fluid960gs/.

    И кстати, нет такого стандарта либо фреймворка разработки который был бы рассчитал под 990px, просто потому что это ненужно.

  • Viacheslav спасибо за ссылку и за статью, думаю она мне пригодиться для фиксированных сайтов. Вам успехов и счастья =)

  • Спасибо, очень познавательная заметка, натолкнулся на которую, чтобы ответить для себя на вопрос, а какую же выбрать все же сетку из обилия таковых. После вашего поста решил попробовать 960 grid system. Спасибо

  • Если у вас трудность — с одеванием этой верстки на CMS — по пишите мне на почту grandcazino@gmail.com , я могу одеть её на Modx ))

  • Я уже переехал на Twitter Bootstrap 2

  • Julia-sun07

    Спасибо Вам за статью, очень помогает при создании собственного сайта, а что касается сетки, то Вы правы — я учусь в инсте на дизайнера -графика — сказали сделать любой сайт можно по сетке можно нет, дали книгу почитать Чои Вин :"Как спректировать современный сайт" — Я все-таки склоняюсь к тому мнению, что сайты сделанные по сетке — выглядят более профессионально, четко, чем просто так, как делали в 95-е

  • спасибо

Читать раньше:

Читать дальше: