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

Определившись с функционалом страницы не лишним будет создать черновой прототип, либо по-старинке на бумаге, либо в программах вроде «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 и более возможна, а в некоторых случаях и неизбежна, ситуация когда контент будет упираться в края экрана. Это также стоит учитывать.

Статьи по теме:

• Дизайн для самого ужасного заказчика. Себя. (7)
• 5 способов поднять CTR страницы в Google Adsense (10)