Как спроектировать современный сайт

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

Создание сетки

Создание колоночной сетки (юниты)

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

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

Разделение страницы на три равные колонки не подходит для нашего рекламного блока

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

Давайте разобьем страницу на простые и понятные блоки. На набросках видны три области – левая почти в два раза больше правой. Ширина области просмотра составляет 960 пикселов, значит, страницу можно разделить на три колонки по 320 пикселов каждая.

Такое соотношение стало бы изящной основой для сетки, но одной колонки будет недостаточно для размещения рекламного блока шириной 336 пикселов. Можно уменьшить левую область и увеличить правую, но в таком случае наша сетка станет непродуманной, и впоследствии возникнут проблемы. Наша цель – создать универсальный принцип разбиения страниц, которым мы будем руководствоваться при решении проблем дизайна, возникающих в этом проекте.

Давайте добавим поля шириной 5 пикселов справа и слева от рекламного блока, чтобы отделить его от краев колонок. Таким образом, ширина крайне правой области должна быть не менее 346 пикселов. Умножив это значение на три, получим 1038 пикселов, что превышает максимальную ширину области просмотра, а ведь мы еще не учли промежутки между колонками. Структура, состоящая из трех колонок, была бы простым решением, но наша задача требует более тонких расчетов.

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

К тому же, оба левых блока станут слишком узкими для использования в качестве колонок. Логичное соотношение 2:1 будет нарушено.

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

Чтобы создать более тонкую сетку колонок, восемь блоков разделим на шестнадцать

С другой стороны, количество юнитов и колонок, кратное четырем, часто позволяет найти правильное решение, даже если сами по себе они не годятся для работы. (На самом деле, большинство эффективных решений построены из четырех, восьми или шестнадцати колонок, и это нужно учитывать при создании новых сеток.) Если разделить страницу на 8 юнитов по 120 пикселов каждый, можно будет объединить 3 юнита в колонку шириной 360 пикселов, что идеально подойдет для рекламного блока. Ширина левой области составит 600 пикселов, поэтому исходное соотношение 2:1 сохраняется, и в этой области можно разместить основной текст статьи. Но левая область будет состоять из 5 юнитов – не слишком удачное число, если нам потребуется дальнейшее разделение.

Непродуманным решением является разбиение левой области на 2 колонки по 300 пикселов каждая. По сути, мы так и поступим, но эту возможность следует использовать для принятия более обдуманного решения. Разделив 8 блоков сетки шириной 120 пикселов на 16 блоков шириной 60 пикселов каждый, мы получим более тонкую сетку колонок. Теперь левую область можно разделить на 2 колонки по 5 юнитов каждая, а правая область будет состоять из 6 юнитов либо, если понадобится дальнейшее разделение, 2 колонок по 3 юнита каждая.

Сетка из шестнадцати юнитов