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

Площадь, занимаемая браузером на экране, не превышает 80 % площади, доступной при просмотре любой веб-страницы. Поэтому доступная область в браузере имеет размеры 974 х 650 пикселов

Учитывая поля на левой и правой сторонах браузера, получаем доступную «активную» область экрана примерно 960 х 650 пикселов

Рекламный блок

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

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

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

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

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

Бренд

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

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

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

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

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

Выводы

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

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

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

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

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

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

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

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

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