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

Кроме того, рекламные блоки способны помочь дизайнеру. Мы уже говорили, что чем строже ограничение, тем результативнее бывает решение. Бросающийся в глаза рекламный блок способен стать основой для создания сетки; он фактически определяет ее форму.

В качестве второго ограничения будет выступать большой рекламный блок рекламного интернет-агентства размером 336 х 280 пикселов. Между прочим, спецификация позволяет разместить еще два рекламных блока в ширину: прямоугольный блок среднего размера 300 х 250 и полустраничный 300 х 600 пикселов. Таким образом, в дизайн, построенный на основе большого рекламного блока, можно легко добавить рекламные блоки других размеров.

Бренд

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

Сделаем несколько простых предположений о торговой марке Designery.us:

• Целевая аудитория – дизайнеры всех возрастов с разным уровнем компьютерной подготовки.

• Общий стиль – дружелюбный, простой и спокойный.

• Логотип должен сразу бросаться в глаза.

Выводы

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

Разработать основные шаблоны страниц для онлайн-журнала, целевая аудитория – дизайнеры. Сайт объединяет статьи и функции социального общения, как это следует из моделей (см. с. 57–60). Шаблоны должны соответствовать минимальному разрешению экрана 1024 х 768 пикселов с активной областью 960 х 650 пикселов. На странице должен располагаться стандартный рекламный блок размером 336 х 280 пикселов. Готовый проект должен соответствовать продуманному и спокойному образу бренда Designery.us; логотип должен находиться на видном месте. Необходимо использовать красный, черный и белый цвета.

Дизайн всех страниц начинается с карандашных набросков

Создание наброска

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

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

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

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