Навигация

Партнеры


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

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

Белая лилия
Принципы и процедуры эффективной верстки


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

Принципы верстки для Web


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

Семь раз отмерь, один раз отрежь


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

Решения, принятые при создании макета «Белой лилии»


Имея четкое представление о том, что надо делать, Кристенсен должен был решить, как подойти к визуальному представлению темы и контента.
Автор решил, что фотография лилии задаст нужный ему настрой на ботаническую тему. Фотография также определила цветовую гамму. Кроме того, он разработал дополнительный декор, подчеркивающий растительные мотивы.
Но по-настоящему работа Кристенсена заиграла, когда дело дошло до контента. Поскольку цель была четко поставлена, то не возникло сложностей с определением относительной важности контента и выбором эффективного представления.
Поместив общую информацию о саде в заголовок, Кристенсен достиг двух важных целей: представить «логотип» (в данном случае цветы и название страни-
цы CSS Zen Garden) и рассказать о причинах появления данной страницы. Кроме того, в этот же раздел помещены ссылки на примеры HTML и CSS-файлов, а равно на инструменты проверки.
Оставшееся место освободилось для навигации и основного контента. Элементы навигации Кристенсен поместил в левую колонку, поскольку именно там посетитель ожидает их найти. Правая же колонка используется для контента. Оба раздела умеренно стилизованы и не загромождены излишними украшениями.
Сочетание заголовка и двухколонной верстки прекрасно удовлетворяет поставленным требованиям, получившийся несложный дизайн работает.

Рекомендации по верстке


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

Проектирование интерфейса пользователя

В отличие от печатных изданий, веб-страница предполагает интерактивное взаимодействие, а не просто пассивное созерцание. Дизайн интерфейса пользова-
теля - это относительно неплохо разработанная область, поскольку интерактивные интерфейсы применяются в самых разных компьютерных технологиях, от операционных систем до прикладных программ.
Вот некоторые фундаментальные принципы проектирования пользовательского интерфейса:
• решите, на какую категорию пользователей будет ориентирован интерфейс;
• стремитесь к тому, чтобы пользователь не заблудился на странице и на сайте в целом;
• используйте знакомые метафоры. Прекрасным примером может служить символ магазинной тележки на сайте электронной коммерции. Даже незнакомые
с Web люди сразу понимают его смысл;
+ старайтесь, чтобы фунциональные особенности были ясно видны. В «Белой лилии» это списки ссылок, назначение которых очевидно с первого взгляда;
• будьте последовательны в выборе элементов дизайна. Если бы «Белая лилия» была взята в качестве шаблона для полноценного сайта, то элементы навигации следовало бы расположить одинаково на всех страницах, равно как фотографию и логотип. Из-
менение местоположения эмблемы сайта и функциональных элементов может запутать пользователя, избегайте таких решений;
следите за центром внимания. В дизайне всегда должен быть какой-то объект, притягивающий вгзляд.
В «Белой лилии» это сам цветок. Выявив центральный объект, дизайнер может затем расположить остальные элементы для достижения зрительного баланса;
• не оставляйте сомнений в том, чему же посвящена страница. Люди не могут долго сохранять сосредоточение; обычно они согласны ждать не более 9 секунд - если за это время человек не поймет, в чем дело, то, скорее всего, переключится на что-то дру-
гое. Кристенсен добивается внимания посетителя за счет размещения основного контента в отдельной области на странице.
Дизайнеры интерфейсов всегда озабочены соотношением эстетики и функциональности. Обратите внимание на стрелочки в заголовках разделов списка ссылок в «Белой лилии». Все они одинакового размера, имеют приятный внешний вид и помогают посетителю сориентироваться.

Практичность


Хотя концептуально практичность и дизайн пользовательского интерфейса связаны между собой (и их исторические корни одинаковы), но цели их несколько различаются. Пользовательский интерфейс естественным образом касается пользователей, поэтому
главная задача инженеров и разработчиков - понять, как лучше удовлетворить их потребности.
При изучении практичности упор делается на том, каким образом пользователь работает с предложенным интерфейсом. Оба вопроса тесно связаны друг с другом,
поскольку результаты исследования практичности влияют на методы проектирования интерфейсов, а разработанные интерфейсы предлагаются пользователям
для тестирования с целью последующего улучшения. Как и проектирование пользовательских интерфейсов, изучение практичности - кстати, тоже пришедшее из
других компьютерных технологий - ведется уже давно. Практичность в Web - эта лишь часть более широкой проблематики, но для нее выработаны специфические рекомендации.
Вот некоторые предложения по вопросам верстки, имеющим отношение к практичности:
• Информация должна быть «на холме». Конечно, в применении к Web «холм» - это лишь метафора, но смысл ее ясен: та информация, которая нужна пользователю в первую очередь, должна располагаться как можно ближе к началу страницы. В «Бе-
лой лилии» логотип сайта и заголовок страницы сразу бросаются в глаза.
Всегда размещайте описание в элементе t i t l e :
css Zen Garden: The Beauty of the CSS Design
Эта строка помещает указанную строку в заголовок окна браузера, что помогает пользователю понять, о чем идет речь на странице. 4- Следите за тем, чтобы ссылки и система навигации размещались по возможности в одних и тех же местах. Кроме того, включайте ссылку на начальную страницу. Полезны также ссылки на страницы с
описанием авторских прав, политики обеспечения конфиденциальности и контактной информации. В случае сайта CSS Zen Garden все варианты дизайна защищены лицензией Creative Commons, что четко обозначено в тексте.
+ Для большинства средних и больших сайтов настоятельно рекомендуется реализовать систему поиска. Понятно, что CSS Zen Garden - это демонстрация подходов к дизайну, а не методов построения сайтов, но на практике пользователи ценят возможность поиска и часто ею пользуются. Если, конечно, она расположена в интуитивно понятном месте. Как правило, поле для ввода поискового запроса находится там, где ему логически надлежит быть, например, рядом с элементами навигации. Если бы
в «Белой лилии» была предусмотрена возможность поиска, то поместить ее следовало бы, наверное, над списком ссылок.
4- Разбивайте содержимое колонок с помощью отступов. Это способствует улучшению внешнего облика страницы и помогает пользователю уяснить ее структуру.
Конечно, о практичности можно говорить еще долго, но следование даже этим рекомендациям позволит выделить важные детали, касающиеся формы и функ-
ции, и в конечном счете сделать работу со сверстанной вами страницей более удобной для пользователя.

Следуйте процедуре


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

Печатная страница как источник вдоховения


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

В нарушение всех правил


Хотя ландшафтный формат эффектно выглядит в печатных изданиях и потому применяется очень часто, но веб-дизайнерам до последнего времени рекомендовали избегать такой верстки. Причины связаны главным образом с практичностью. В случае горизонтальной верстки браузер помещает полосу прокрутки вдоль нижнего края документа. Это считалось неудобным, поскольку пользователи обычно не любят совершать движений больше, чем это необходимо для получения информации. А для людей с некоторыми физическими недостатками прокручивать окно по горизонтали особенно трудно. Поэтому веб-дизайнеры, как правило, прибегали к горизонтальной верстке лишь в особых случаях, скажем, в целях эксперимента или, что особенно печально, создавали такого рода дизайн по ошибке, неправильно оценив разрешаю-
щую способность экрана.
Редким исключением стал запущенный в 1998 году сайт Circle of Friends (В кругу друзей), посвященный людям, страдающим от болезней позвоночника. Эта организация, основанная в числе прочих ныне покойным Кристофером Ривом (Christopher Reeve), выбрала такой дизайн, потому что именно из горизонтального положения люди с больным позвоночником вынуждены смотреть на мир. В то время
подобная дизайнерская концепция была революционной, но отражала конкретный человеческий опыт .
Заинтересовавшись тем, как горизонтальное расположение материала может повлиять на Web, Мейер решил попробовать создать убедительную версию печатной страницы - не только работоспособную, но и сверстанную с применением CSS.

Горизонталь бросает вызов

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

Фиксированное позиционирование


Яркий образ женщины побудил Мейера разместить карт - фотоинку так, чтобы она всегда была видна на экране, а текст прокручивался под ней. Этот эффект возможен только в Web.
CSS предоставляет дизайнеру много возможностей для реализации фоновой графики, но если сделать фотографию женщины фоновой карт - фотоинкой в элементе body, то текст будет прокручиваться поверх нее. При этом и текст будет невозможно читать, и воздействие образа сведется на нет.
Один из способов решить эту проблему - присоединить изображение к d i v с фиксированной позицией. Элемент с фиксированной позицией будет всегда оста-
ваться в одном и том же месте на странице, он не прокручивается, что бы ни происходило с остальными элементами. Для этой цели подошел бы такой селектор:
div#static-image {
background-image: url(bg_face.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 594px;
width: 2 05px;
z-index: 2;

Если браузер полностью совместим со спецификацией CSS, то значение f i x ed свойства p o s i t i o n гарантирует, что этот d i v будет жестко закреплен на странице,
а прочие элементы можно будет расположить за ним
(рис. 3).
Ошибки в браузерах
Как это часто бывает, когда приходится учитывать дефекты браузеров, разумно сначала создать идеал, а затем заняться браузерами, которые по той или иной
причине не поддерживают нужного эффекта. Для этого создаются разные варианты дизайна, а затем с помощью javascript-сценария определяется, с каким бра-
узером мы имеем дело. Впрочем, некоторые считают такой подход неэффективным, в частности потому, что многие пользователи отключают поддержку javascript в своих браузерах. В случае «Прет-а-порте» курс был взят на то, чтобы создать альтернативный дизайн для Internet Explorer, который бы хорошо выглядел и прорисовывался, пусть даже изображение лица прокручивалось бы за
пределы окна.
Internet Explorer не поддерживает также селекторов дочерних элементов. Синтаксически такие селекторы задаются с помощью символа >. Так, селектор p>s t r o n g означает, что следующее за ним объявление должно быть применено только к элементам s t r o n g внутри абзацев.
В связи с отсутствием поддержки фиксированного позиционирования и селекторов дочерних элементов в Internet Explorer, были написаны правила, которые ре-
ализуют оптимальный дизайн для браузеров, совместимых со спецификацией CSS, и альтернативный дизайн для Internet Explorer.

body#css-zen-garden>div#extraDiv2 {
background-image: urllbg_face.jpg);
background-repeac: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 594px;
width: 205px;
z-index: 2;


Следующее правило применяется только в браузерах, не понимающих предыдущего, в данном случае в Internet Explorer. Поскольку специфичность селекторов дочерних элементов больше, то у предыдущего правила более высокий приоритет,div#extraDiv2 {
background-image: url(bg_face_ie.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
bottom: 0;
height: 600px;
width: 265px;
}

И хотя карт - фотоинка с фиксированным позиционированием в Internet Explorer 6.0 уходит за пределы окна, дизайн все-таки остается эстетичным и приемлемым.

Особенность браузера Opera


При создании «Прет-а-порте» пришлось также решать проблему отсутствия надлежащей поддержки в браузере Opera, разработанном компанией Opera Software.
Даже тогда, когда разработчики привержены стандарт - фотоам, как в случае Opera, по разным причинам реализация не всегда оказывается идеальной.
В версиях Opera младше 7.5 не появляется полоса горизонтальной прокрутки. Разумеется, в этом случае дизайн оказывается абсолютно непригодным для ра-
боты.
К счастью, авторы Opera решили эту проблему, и теперь дизайн не просто работает, но и поддерживает фиксированное позиционирование, как и другие CSS- совместимые браузеры.

Чему мы научились


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








CSS
css

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



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



Поиск

***

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

20-ка посетителей: edgarzl1, JerryVef, tapedkag, Thomasimmix, centai.ru, evangelinaml4, marleneua16, carmellawf4, Edwardkax, RafaelNew, fluellusy, aileenbj1, Jertryteesk, MichaelWah, Williamcloca, shadowmoon, leaqh2, TimLep, bapedkag, wordpress


Партнеры

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

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

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

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