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

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

Я подчеркиваю: самым эффективным путем является использование карандаша и бумаги для проработки задачи, поиска возможных решений и изучения перспективных (и не очень) идей, проверка которых другим способом может оказаться слишком дорогой или трудоемкой. По сути, эскизы позволяют быстро просмотреть возможные идеи без существенных финансовых затрат. Помните, что наброски остаются всего лишь набросками, они не должны быть красивыми.

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

Терминология

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

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

Юнит

Юнит – это строительный «кирпичик» любой сетки, самый узкий вертикальный объект на странице (в юнитах измеряют ширину), на основе которого формируются колонки. Как правило, юниты имеют слишком маленькую ширину, чтобы использовать их непосредственно для размещения текстовых материалов.

Колонка

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

16 блоков

8 колонок

3 блока

2 области

Блок

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