Навигация

Партнеры


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

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


Бери больше, кидай дальше!

Многие посетители нашего сайта предлагали, как сделать его больше, лучше, по-другому, громче, с витамином С и так далее. Предложений хватало на любой вкус. Вот перечень некоторых идей.

CMS Zen Garden

Применить стили к одной странице - это хорошо, но как насчет целого сайта? Почему бы не распространить концепцию на разные страницы настоящего, обновляемого сайта, сопровождаемого с помощью системы управления контентом (CMS), чтобы полнее отразить реальные условия?

E-commerce Zen Garden


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

javascript Zen Garden


Отделить структуру от представления - цель благородная, но почему бы не сделать еще один шаг и не ввести поведенческий уровень, отделенный от двух предыдущих?
Великолепную иллюстрацию этой идеи предложил один из ее авторов Рарес Портан (Rares Portan) .

XML/XSLT/RSS/бог знает что еще Zen Garden


Подставьте любой желаемый язык разметки и примените к нему CSS-стили. Почему бы не продемонстрировать потенциал CSS в сочетании с другими языками на базе XML, а не только с XHTML?
И где это все?
Без сомнения, все эти идеи завораживают, и реализация многих из них принесла бы несомненную пользу вебсообществу. В большинстве случаев авторы предложений получили положительные отклики и предложение разместить демонстрацию своих концепций вне сайта.
У сайта Zen Garden очень специфические цели, он не предназначен быть хранилищем всего для всех. Изменение правил игры и предназначения сайта сейчас,
когда накоплено уже столько материала, было бы несправедливо по отношению к тем, кто прислал свои работы раньше.
Но на базе предложенных идей можно организовать другие сайты. Если вы можете сделать лучше, приступайте. Один или два сайта даже были созданы, но долго
не просуществовали. Есть разные мнения по поводу причин этого, мы поделимся своим.
Во-первых, на сайт Zen Garden очень легко присылать работы. Необходимо лишь быть искусным дизайнером и знать правила написания CSS, но на создание своего
варианта дизайна не надо затрачивать несколько недель.
Стилизовать целый сайт гораздо сложнее, особенно если контент постоянно изменяется. Если работа оплачивается, то оправдать временные затраты можно, иначе они становятся непреодолимым барьером.
Во-вторых, главная цель Zen Garden была достигнута. Мы пытались с его помощью изменить отношение к дизайну на основе CSS, мы это сделали. И хотя стили
применяются всего к одной странице, но обобщить идею на целый сайт в принципе несложно. Если кому-то абсолютно непонятно, как распространить концепцию на несколько страниц, то существует немало следующих стандарт - фотоам сайтов, которые
можно взять за образец.
Таким образом, в самых разных отраслях имеется интерес к стандарт - фотоам, а ценность последних реальные примеры доказывают даже убедительнее, чем чисто
демонстрационный сайт типа Zen Garden.

Дизайн


Процесс веб-дизайна претерпевает драматические изменения, но его принципы остаются
прежними. Думаете ли вы о выборе палитры, визуальном потоке, об эффектном использо
вании образов или управлении визуальной близостью страничных элементов - традици-
онные ценности остаются в силе.
Обсуждаемые в этой главе варианты дизайна иллюстрируют эту точку зрения, отвечая
одновременно на вопрос, все чаще встающий перед современными дизайнерами: как эффективно управлять технологическим процессом? Вне зависимости от того, что вы
предпочитаете: работать в Adobe Photoshop, готовить эскиз, создавать прототип с помо-
щью CSS или сразу приступать к кодированию, вы обязательно найдете в этой главе
новые для себя полезные приемы.

Атлантида


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

Минимализм


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

Типография


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

Иконография


В расположенное слева меню Дэвис поместил небольшие иконки напротив названия каждого варианта дизайна. Поскольку они расположены рядом со ссылками, то сливаются с текстом и выглядят как скромные маркеры, на которых глаз не задерживается. Эта мелкая деталь визуально отделяет название варианта от
находящегося ниже текста. В результате простое, в сущности, меню выглядит более интересно. Иконки (или пиктограммы) - это упрощенные символы, которыми можно представить как отдельный объект или идею, так и целую концепцию - путем
замены длинного текстового описания визуальным образом. Визуально представить объект обычно просто, а вот визуализировать процессы или действия куда сложнее. Хорошая иконка не нуждается в пояснениях, но часто их приходится делать абст-
рактными. Надо стараться, чтобы вид иконки как можно точнее выражал ее функцию, чтобы после многократного просмотра у зрителя возникала устойчивая связь между тем и другим.

Линии


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

Поля


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

Единство и символизм


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

Согласованность


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




gjhyj ltnb



ajnj css


AJNJ GJHYJ

gjhyj ajnj ltnb
Ajnj css

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



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



Поиск

***

Онлайн
Всего на сайте: 36
Гостей: 10
Пользователи: bivaarrits, surseQuosy, surseQuosy, Ernestloro, alorbbiare, surseQuosy
Роботы: Yandex Bot, robot Bot, robot Bot, robot Bot, robot Bot, robot Bot, MSN Bot, crawl Bot, MSN Bot, spider Bot, Google Bot, robot Bot, Google Bot, robot Bot, MSN Bot, robot Bot, Google Bot, robot Bot, The Python Robot, robot Bot

20-ка посетителей: alorbbiare, surseQuosy, bivaarrits, Ernestloro, VibAbanny, Reannedia, Curtisdum, Jabemuby, intacrice, anton.1988dBep, dradbawl, layerlyDap, minnieuy16, SregoryPaurb, AgnesAccony, RYRoderick, Bemsstine, Jamesglunc, Stevenbub, xa5rrellnor


Партнеры

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

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

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

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