Навигация

Партнеры


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

Css дизайн. Часть 11.


Баллада


Использование воображения для создания визуального потока и направления взгляда зрителя. Сама сущность сайта CSS Zen Garden располагает к спокойному созерцанию, и именно с этого начала иллюстратор Шарлотта Ламберт, приславшая дизайн «Баллада». Ламберт совершила мысленную прогулку по саду. А по пути ее воображению предстали различные образы: лестница, небольшой мостик, потягивающаяся кошка.
Выйдя из медитации и взявшись за кисть, она сделала несколько предварительных набросков, чтобы уточнить идею дизайна. Затем она запечатлела карт - фотоины, возникшие в мозгу во время прогулки. Сначала они были нарисованы китайской тушью и белой краской на бумаге и даже на карт - фотоонке из-под пива, а потом с помощью Photoshop были подготовлены изображения для Web.

Как направить взгляд зрителя

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

В терминах CSS


В последние годы появилось целое поколение дизайнеров новой школы, которые не мыслят в терминах традиционных для HTML табличных методов верстки. Вместо этого на первый план выходит применение CSS. Хотя все варианты дизайна на сайте CSS Zen Garden предполагают именно такой подход, но есть еще много дизайнеров старой школы, которые цепляются за слишком жесткие и зачастую более сложные методы верстки на основе таблиц. В «Балладе» автор выстроил макет сразу с помощью CSS. А что, если бы это было не так? Беды старой школы Если взглянуть на этот дизайн с точки зрения представителя старой школы, то быстро выясняется, что создание чего-то подобного с помощью таблиц выливается в кошмар. Возьмем всего два раздела из ос-
новной части страницы и попробуем построить для них макет в Macromedia Fireworks, пользуясь инструментом для разрезания картинок. Получившиеся кусочки нужно будет поместить в таблицу:

<table bgcolor="#ffffff" border="0"
cellpadding="O" cellspacing="O" width="597">
<tr>
<td rowspan="3"ximg name="ballade_rl_cl"
src="images/ballade_rl_cl.gif" width="30"
height="887" border="0" alt=""x/td>
< t d x i m g name="ballade_rl_c2" src="images/
b a l l a d e _ r l _ c 2 . g i f " width="537" h e i g h t = " 2 7 3 "
b o r d e r = " 0 " a l t = " " x / t d >
<td rowspan="3"ximg n a m e = " b a l l a d e _ r l _ c 3 "
s r c = " i m a g e s / b a l l a d e _ r l _ c 3 . g i f " width="30"
h e i g h t = "887" border="0" a l t = " " x / t d >
< t d x i m g s r c = " i m a g e s / s p a c e r . g i f " width="l"
h e i g h t = " 2 7 3 " border="0" a l t = " " x / t d >
< / t r>
< t r>
<Cdximg name= " b a l l a d e _ r 2 _ c 2 " src="images/
b a l l a d e _ r 2 _ c 2 . g i f " width="537" height="429"
b o r d e r = " 0 " a l t = " " x / t d >
•ctdximg src=" images/spacer . g i f " w i d t h = " l "
h e i g h t = " 4 2 9 " border="0" a l t = " " x / t d >
< / t r>
< t r>
•ctdximg name= " b a l l a d e _ r 3 _ c 2 " src="images/
b a l l a d e _ r 3 _ c 2 . g i f " width="537" h e i g h t = " 1 8 5 "
b o r d e r = " 0 " a l t = " " x / t d >
< t d x i m g s r c = " i m a g e s / s p a c e r . g i f " width="l"
h e i g h t = " 1 8 5 " border="0" a l t = " " x / t d >
< / t r>
</table>


Из этого кода видно, что макет усложняется в нескольких отношениях:
• при табличной верстке возникает много лишней разметки;
• применение пустых картинок в качестве разделителей вместо полей и отступов, имеющихся в CSS, без необходимости увеличивает «вес» страницы;
• большая часть картинок включена в саму разметку, что увеличивает размер файла за счет дополнительных тегов, а значит, и время загрузки;
• табличный дизайн по своей природе должен оставаться неизменным на всех страницах сайта. На каждой странице будет присутствовать разметка таблицы и все теги , поэтому картинки и компоненты страницы перерисовываются при каждой
загрузке. В случае CSS макет кэшируется, а для сайта CSS Zen Garden код, управляющий изображениями, загружается только один раз. Конечно, все эти проблемы характерны для любых таблиц. Большинство дизайнеров понимают, что чрез-
мерное использование таблиц может быть причиной и других неприятностей, в том числе и в плане доступности, поскольку многие программы чтения с экрана, предназначенные для слепых, неправильно интерпретируют содержимое таблиц. А если учесть основной смысл данной работы - направление взгляда зрителя - то становится очевидным еще одно: неуклюжий старый подход разрушает впечатление непрерывности потока, поскольку сложный табличный макет обычно прорисовывается кусками.

Подход новой школы


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

tpreamble h3 {
background: url(road.jpg) top left no-repeat;
height: 106px;
}
#explanation h3 {
background: url(about.jpg) top left norepeat;
height: 168px;
}
#participation h3 {
background: url(particip.jpg) top left norepeat;
height: 154px;
width: 565px;
)
•benefits h3 {
background: url(benef.jpg) top left norepeat
;
height: 171px;
}
•requirements h3 {
background: url(req.jpg) top left no-repeat;
height: 125px;


С помощью расширения Web Developer для браузеров Mozilla и Mozilla Firefox можно включить прорисовку контуров для блочных элементов и увидеть идентификаторы и классы всех элементов. Это очень удобно, когда нужно узнать точное расположе-
ние различных секций в дизайне.
Поместив контент внутрь элементов и применив на странице фоновую графику, дизайнер достиг сразу нескольких важных целей:
• за счет более простой разметки уменьшился вес страницы;
• вынесение большей части (или всего!) оформления в таблицу стилей способствует ускорению загрузки сайта, поскольку CSS-файлы кэшируются и браузеру не нужно повторно интерпретировать информацию о стилях при каждой загрузке страницы;
• сайт становится более доступным, так как в самом документе нет никаких презентационных элементов;
• сайтом становится проще управлять. Предположим, что с приходом весны мы хотели бы обновить «Балладу», включив зеленые и золотистые цвета вместо той понурой гаммы, в которой она нарисована сейчас. CSS позволяет справиться с этой задачей намного легче и с меньшими накладными расходами, так как мы заранее подумали о гибкости дизайна.

В поисках моста

Эффективное проектирование веб-страницы - непростая задача. Дизайнеру приходится учитывать многие факторы. В «Балладе» наглядно продемонстрировано,
как можно с помощью дизайна направить взгляд зрителя, с помощью цветов передать настроение и как использование CSS вместо таблиц может повысить качество сайта. Нам кажется, что дизайнер-новичок, сразу начавший с изучения CSS, будет свободен от ограничений и условностей, налагаемых традиционной техникой.
Для дизайнеров, которые переходят на CSS от табличной верстки, трудно вырабатывать новый способ мышления. Бесспорно, что CSS позволяет выйти за
рамки многих ограничений, когда мы делаем наброски, работаем в Photoshop, готовим разметку и применяем к ней стили. Но вот найти мост, соединяющий разные технологии, - это проблема. Продемонстрировав удачное сочетание творческого воображения, живописи и CSS, Шарлотта Ламберт призывает дизайнеров пройти по мосту и взглянуть на мир по-новому. Она доказала, что новые прогрессивные методы
работы могут освободить нас от пут традиционного веб-дизайна.






css

Multicolored Fish Vector
CSS

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



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



Поиск

***

Онлайн
Всего на сайте: 46
Гостей: 26
Пользователи: crab22, KeithJef
Роботы: robot Bot, Yandex Bot, robot Bot, robot Bot, robot Bot, Yandex Bot, robot Bot, Yahoo Bot, Yandex Bot, Google Bot, robot Bot, robot Bot, crawl Bot, robot Bot, robot Bot, Google Bot, robot Bot, robot Bot

20-ка посетителей: KeithJef, crab22, Jamesvum, Dargothpl, Masonmt, deanafj3, Dawsonpt, wordpress, Housepn, Rendellpi, AgnesAccony, antoniagu11, Shawnwrasy, debbieau11, msvuser, antonioqx4, bonniedt3, Hareklalt, Servicehpp, JaffarCano


Партнеры

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

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

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

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