Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS дизайн. Часть 15

Монах
Выразительное позиционирование и сетки

Кто сказал, что сначала нужно составить план? Дизайнер Седрик Саварезе работал над
своим «Монахом», экспериментируя в Adobe Photoshop и наблюдая, что получается. Достоинством такого подхода является гибкость: когда в голову приходит новая мысль, старые можно отбросить или приспособить к новому варианту верстки.
Саварезе решил, что внимание нужно привлечь в первую очередь к заголовку, а остальной макет выстроить вокруг него. Перепробовав множество шрифтов, он выбрал для заголовка и подзаголовка те, которые в наибольшей степени соответствовали идее дизайна. Тема дзен-буддизма была дополнена садовыми мотивами, а для визуальной привлекательности использована спокойная красно -серая цветовая гамма.

Позиционирование как выразительное средство


Доминирующее изображение монаха занимает место, на которое зритель обращает внимание в первую очередь, - левый верхний угол. Самый первый элемент
дизайна - одновременно самый идейно важный и занимает наиболее значимое место.
Если взять плоский «холст» фиксированного размера, например лист бумаги, и расчертить его пополам по вертикали и по горизонтали, то получится четыре
квадранта. В западных языках текст читается слева направо и сверху вниз. Поэтому типичный зритель бессознательно приписывает разным квадрантам разные приоритеты.
Вы никогда не задумывались, почему логотипы сайтов обычно находятся в левом верхнем углу? Да потому, что именно туда прежде всего устремляется взор
посетителя. Поместив какой-либо элемент в левый верхний угол, мы привлечем к нему максимум внимания, поэтому для торговых марок - это самое подходящее место.
Правый верхний квадрант тоже важен. На веб-странице выделяется пространство, расположенное «на холме», то есть видимое без прокрутки. Именно ему придается наибольшее значение. Элемент, находящийся в правом верхнем углу, чуть менее важен, чем тот, что занимает левый верхний угол, но все же значим для страницы в целом.
Два нижних квадранта не слишком существенны для большинства веб-страниц. Некоторые дизайнеры помещают сюда дополнительную навигацию, другие - лишь информацию об авторских правах и больше ничего. В традиционном дизайне печатных
изданий размещение элемента внизу страницы может создать впечатление, будто расположенные выше элементы приподняты. Такое ощущение трехмерно-
сти характерно только для печатных страниц, а в Webна информацию, находящуюся внизу, просто не обращают внимания.
Все шире распространяется интересная практика размещения малозначимой информации вдоль нижнего края страницы. Здесь могут оказаться ссылки на внут-
ренний контент или на функции сайта, не нашедшие места среди механизмов регулярной навигации. Если посетитель не заметит их, ничего страшного, он смо-
жет добраться до нужного контента другими способами. Ну а те, кто обратят внимание на такие ссылки, получат возможность воспользоваться дополнительными функциями.

Сетка


Сетка - это важный инструмент верстки, но из-за «негибкости» ею часто пренебрегают. Как и в математике, сеточный макет - это просто набор прямоугольников,
на которые окно разбивается перпендикулярными прямыми. Именно в эти прямоугольники и помещаются позже элементы дизайна. Если строго следовать сетке,
то пропорции и промежутки получатся более выверенными, правда, ценой чрезмерной упорядоченности и сухости.
Классический табличный дизайн ярко демонстрирует ограничения, налагаемые излишне структурированной сеткой, - у элемента, помещенного в ячейку таблицы, нет другого выхода, как только оставаться в этой ячейке. Если необходим эффект перекрытия, то нужно задействовать соседние клетки. Часто единственный способ как-то нарушить регулярность состоит в разбиении изображения на мелкие кусочки, которые затем собираются путем создания сложных вложенных таблиц.
С другой стороны, CSS позволяет гораздо точнее контролировать расположение элементов, не прибегая к помощи сеток. В основе макета может лежать сеточная структура, но размещение отдельных элементов с нарушением регулярности осуществляется гораздо более гибко. Модель позиционирования, принятая в
CSS, обеспечивает элементам куда большую свободу.
Элементы могут располагаться за пределами своих контейнеров, да и вообще в любом месте страницы.

Построение сетки

Конечно, чтобы выйти за пределы сетки, ее надо сначала построить. Если наложить сетку на «Монаха», то окажется, что заголовок разбит на три компонента, а основная область занимает две колонки.

Заголовок

Заголовок состоит из трех областей, важность которых неодинакова: силуэта монаха, текста Zen Garden и текста из раздела #preamble, который вынесен в заголовок из нормального потока документа.
Но при взгляде на отдельные картинки, составляющие заголовок «Монаха», создается впечатление, что силуэт и текст объединены в одно изображение. Хотя
на самом деле это разные структурные части заголовка, при кодировании они рассматриваются как единое целое. Это вообще типично для веб-дизайна -
перед сохранением изображения надо объединить в одну карт - фотоинку, чтобы потом было проще кодировать.

Область контента

Хотя в основе дизайна «Монах» лежит одна центральная колонка с текстом, но заголовки, помещенные на полях, создают ощущение, будто есть вторая
колонка. Мы раскрасили дизайн в синий цвет, чтобы были наглядно видны пропорции обеих колонок.
Ширина левой колонки составляет примерно 2/3 ширины правой, то есть соблюдается соотношение 2:3. Пропорции устанавливаются автоматически: коль скоро ширина первой колонки задана, вторая занимает все оставшееся место. А отношение 2:3 - это классическое гармоничное отношение, которое определяет естественный и приятный ритм страницы.

Выход за пределы сетки

Саварезе выстроил основную часть макета «Монаха» на базе сетки, но некоторые элементы расположил вне ее ячеек, чтобы нарушить регулярность и сделать ма-
кет более интересным. Гибкости имеющейся в CSS модели позиционирования для этого достаточно, причем можно воспользоваться как абсолютным, так и относительным позиционированием. Анализ различий между ними
позволит принять решение, какой вариант лучше применить.

2012 css

Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 14
Гостей: 7
Пользователи: - отсутствуют
Роботы: Google Bot, MSN Bot, MSN Bot, Google Bot, crawl Bot, Google Bot, Yahoo Bot

20-ка посетителей: Ailapam, melvintn60, Lrj5gesf, Givesstuct, leonmb11, DanielWhini, beckyfz60, jinkikkClell, KulakOn, Joeywrap, Leonhef, Chenorpili, PUHarbuckTob, alexjp18, JamesFashy, sidneyio16, Goosehaph, ymtwtxhuch, fluellusy, Geraldrob


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги