— «С чего начать работу над макетом сайта?». Вопрос на который каждый дизайнер скорее всего ответит по своему. Лично я склоняюсь к тому что все зависит от того, над сайтом какого типа нам придется работать. Так ли нужна строгая модульная сетка, скажем, промо-сайту нового товара/услуги и что без нее будет делать информационный портал или блог? (пример ниже)
Определившись с функционалом страницы не лишним будет создать черновой прототип, либо по-старинке на бумаге, либо в программах вроде «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 четко заданной сеткой не только сделает конечный продукт более структурированным и понятным конечному пользователюи, но и ощутимо сэкономит время при разработке как дизайнеру, так и кодеру.
{ 9 comments… read them below or add one }
Спасибо за статейку, я честно говоря, без сеток всю жизнь работал, даже и не знал что они нужны. Нужно будет попробовать с ними. Вот было бы еще интересно про историю сеток поичтать, типа зачем они нужны?
Пжлст., пока правда довольно сумбурно получается писать в блог
Историю сеток можно легко нагуглить, но в целом корни тянуться из издательств (где верстальщик в кварке или индизайне всегда работает по сетке журнала). В вебе с этим несколько попроще, я например зачастую формирую сетку уже в зависимости от той графики и информации которая появляется в макете. Т.е. бывает начинаешь с одной сеткой, а финальный макет оказывается уже совсем с другой. В любом случае вот эта 960-система достаточно универсальна, что бы перекраивать макет на лету и при этом не нарушая основные пропорции. Рекомендую попробовать.
Да, спасибо! Даже не знаю еще, полезно ли это будет для меня. Ведь сайторисователем я себя не называю, руки пока еще не из того места, но ведь какие-то пародии на сайты иногда рисую, а значит пригодится и сетка ))) Хотя, честно говоря, рассматриваю ее пока что только как дополнительный утежелитель при беге, вроде и полезно и правильно, но мешает ))) Проще под каждый конкретный сайт свою сетку нарисовать гридами, чем я, собвтенно говоря, всегда и занимаюсь )
Сетки это очень хорошо, но почему именно за стандартную ширину сайта берете 960?? «Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768.» Из 1024 вычтите ширину скроллнига и бордюра браузера и получиться 990 px Это полностью видимая область сайта, так зачем же сокращать драгоценное пиксели для сайта еще меньше,, меньше размеров-меньше информации на сайте. Я думаю что автор хорошо изучил труды заграничных дизайнеров которые 80% лепят web2нольные нерезиновые отцентрированные сайты при которых 960 оптимальный варинат, но для России это непрокатывает в большинсве случаев. Был бы признателене если сделали бы перерасчет сеток на реальные 990 px/
2Joker: дело в том что именно при 960px ширине удобно делить макет на равное кол-во, скажем, колонок. Получается гораздо большее кол-во универсальных блоков к которыми можно работать в сетке и проверить это не трудно кстати (см. раздел про цифры)
К примеру, на 4 равные колонки ты 990 ширину уже не поделишь. Речь именно о том, что удобно рассчитывать блочные расстояния и отступы при макетировании, а при +30 к ширине этого сделать уже не получится и смысла пересчитывать под такую сетку стандартные блоки нет.
И еще, не важно где, хоть в Зимбабве делай, хоть в России, но с 960 будет удобнее и быстрее
Вы бесусловно правы в той части что касается нерезиновых сайтов,, но если для резинового сайта сверстать 960px беря за исходную позицию сайта 1024 мониторы то сразу же сайт начнет резиниться!!!!,, Зачем в исходно минимальной позиции на 1024 тянуть сайт,,, а если вы уже стали тянуть на минимальном расширинии то нафига нужны были все ваши стройные сетки которые сразу же потеряют свои размеры при растягивании сайта,,, Как можно будет увидеть всю вашу рассчитанную с точностью до пикселя красоту на 1024 мониках?? принудительно сузить окно броузера до 960? =))
Для каждой задачи свои решения, и зачем упрощать себя работу за счет последующих касяков. Вот я буду очень Вам признателен если найдется универсальный способ решить задачу сетки на стандартные 990 px =)
@JoKeR: В статье речь шла про сайты с фиксированной шириной (как это видно из примеров). Если нужна сетка под плавающие размеры можно воспользоваться «960 fluid» – http://designinfluences.com/fluid960gs/.
И кстати, нет такого стандарта либо фреймворка разработки который был бы рассчитал под 990px, просто потому что это ненужно.
Viacheslav спасибо за ссылку и за статью, думаю она мне пригодиться для фиксированных сайтов. Вам успехов и счастья =)
Спасибо, очень познавательная заметка, натолкнулся на которую, чтобы ответить для себя на вопрос, а какую же выбрать все же сетку из обилия таковых. После вашего поста решил попробовать 960 grid system. Спасибо