Разделы: HTML | CSS | PHP | Design | Color | Art | All |
Страницы: 1 2 Следующая
12 | 01.04.2008
Послеобраз - скрытые возможности
Итак, послеобраз. Свиду, довольно понятная концепция, но вот как правильно её использовать?Когда после рассматривания каких-либо цветных поверхностей взгляд падает на белую поверхность, она кажется не белой, а окрашенной и воспринимается в "дополнительном цвете" к рассматривавшейся вначале цветной поверхности. Это явление носит название "послеобраз" и связано оно с инерцией зрения.
Вот основные результирующие последовательности цветов, которые бы не мешало использовать в web-дизайне:
- Жёлтый - синевато-фиолетовый
- Жёлто-оранжевый - ультрамариновый
- Оранжевый - васильково-синий
- Красно-оранжевый - зеленовато-голубой
- Красный - сине-зеленый
- Пурпурно-красный - зелёный
- Пурпурно-фиолетовый - жёлтовато-зелёный
- Фиолетовый - зеленовато-жёлтый
- Синевато-фиолетовый - жёлтый
- Ультрамариновый - жёлто-оранжевый
- Васильково-синий - оранжевый
- Зеленовато-голубой - красно-оранжевый
- Сине-зелёный - красный
- Зелёный - пурпурно-красный
- Желтовато-зелёный - пурпурно-фиолетовый
- Зеленовато-жёлтый - фиолетовый
Также важное замечание - если на глаз воздействует периодическая смена света и темноты, то зрительное восприятие такого раздражителя зависит от частоты смены света и темноты. При достаточно большой частоте глаз будет воспринимать свет постоянной яркости. Число прерываний света в секунду, при котором достигается ощущение неизменной яркости, называется критической частотой прерывания (об этом в следующих постах). Отсюда быстрый вывод - не стоит увлекаться излишней чересполосицей (подробнее об этом в предыдущем посте).
Именно эти особенности устройства и работы человеческого глаза (инерция зрения)накладывают определённые требования web-мастеру в разработке стиля дизайна сайта, предназначенного для успешного продвижения того или иного проекта.
Чем меньше цветов используется при оформлении дизайна сайта, тем легче добиться определённого воздействия (цветовой ассоциации) на посетителя сайта.
Весь смысл вышесказанного, можно очень просто подытожить - чем меньше контрастность и плавней переходы в цветовом оформлении сайта, тем с большей вероятностью можно предугадать цветовое воздействие на посетителя сайта и негласно влиять на его дальнейшие действия по отношению к вашему web-ресурсу.
Сюда же, можно отнести и использование плавных градиентных рисунков и фонов, вместо контрастных изображений и всякого рода мозаичных текстур в фоне страницы, поскольку это более предпочтительно с точки зрения акцентирования внимания на контенте.
Дерзайте!
Автор: Lasckorn | Комментарии [0] | Раздел: design
11 | 16.12.2007
Физиологическая размерность элементов web-страниц
Размернсть элементов на экране, а точнее размеры элементов веб-страниц и расстояния между ними, являются, как ни странно, сильным аттрактивным элементом в веб-дизайне. И заложено это отнюдь не в сложенных за время блуждания по сети стереотипах. Причиной тому физиологические особенности нашего зрения, и наши инкстинкты. В видеоэкологии, есть такие базовые понятия, как агрессивная и гомогенная визуальные среды, каждая из которых, качественным образом, влияет на работу зрительного аппарата человека.Видимая среда, в которой рассредоточено большое количество одинаковых элементов называется агрессивной средой. Гомогенная видимая среда - это такая среда, в которой либо совсем отсутствуют видимые элементы, либо число их резко снижено. Обе эти крайности визуальных сред, являются негативными в плане созерцания.
В студенческие годы:), была у меня магистрская работа, как раз по видеоэкологии. И там, вывел я несколько методик (кому интересно, могу поделиться), что в последующем, очень пригодилось мне на поприще веб-дизайна, когда даже обычная сетка таблицы, превращалась в шедевр, на который можно было любоваться часами.
В кратце, суть основной методики, составляло определение расстояния до объекта, при котором, негативное воздействие данного объекра на зрительный аппарат нивелировалось.
Cag = Ф/0,0350
Cho = Ф/0,2634
где: Ф - размер видимого элемента дизайна веб-страницы;
Cag - минимальное расстояние от объекта до наблюдающего, при кото-ром объект не создаёт агрессивной визуальной среды для человека;
Cho - максимальное расстояние от объекта до наблюдающего, при котором объект не создаёт гомогенной визуальной среды для человека.
Для расчёта Ф – необходимо руководствоваться условием исходных формул расчёта коэффициентов агрессивности и гомогенности (лень мне здесь всё писать, интересно, спрашивайте), то есть при расчёте Cag необходимо брать минимальное расстояние от нижней (или пер-вой по счёту боковой) границы объекта из одинаковой серии расположенной на одной линии (прямой) до третьей такой же границы. А при рас-чёте Cho - максимальную протяжённость гомогенных пустых площадей на элементах веб-страниц.
Минимальное безопасное (так считается, и во всех умных книжках пишеться) расстояние от монитора компьютера до глаз, должно составлять не менее 50 см. Стало быть, при расстоянии 50 см, высота, тех же повторяющихся строк в таблице, окрашенных к примеру в несколько цветов чересполосицей (агрессивная визуальная среда по определению), должна составлять не менее 1,75 см и не более 13,17 см. Если перевести полученные значения в пиксели, то получиться соответственно 73px и 549px, или 50pt и 376pt. Вычисляйте среднее расстояние от глаз до экрана и вперёд!
Конечно, вы сразу же могли заметить нереальность компановки строк таблицы с высотой 73px, с размерами экрана, особенно, если строк много (хотя для столбцов, это очень актуально, так как агрессивные свойства проявляются в большей степени в горизонтальном направлении):
| 1 Ваш контент |
| 2 Ваш контент |
| 3 Ваш контент |
| 4 Ваш контент |
| 1 Ваш контент | 2 Ваш контент | 3 Ваш контент | 4 Ваш контент |
| 5 Ваш контент | 6 Ваш контент | 7 Ваш контент | 8 Ваш контент |
| 9 Ваш контент | 10 Ваш контент | 11 Ваш контент | 12 Ваш контент |
| 13 Ваш контент | 14 Ваш контент | 15 Ваш контент | 16 Ваш контент |
Но в таком случае, выиграшную позицию можно занять увеличив длину (протяжённость по горизонтали:)) таблицы.
Думаю, далее уже все поняли, с чем надо эксперементировать.
Автор: Lasckorn | Комментарии [9] | Раздел: design
10 | 10.12.2007
Что не любят браузеры
Что не любят браузеры, а точнее что они не воспринимают? Этот вопрос неоднозначен, поскольку браузеров как известно - много. А воспринимать или нет, они могут только код. Всё до крайности бонально.Речь пойдёт о CSS, так как это самая наболевшая проблема. Вот бывает торопишься, пытаешся сокращать код до минимума, классы и идентификаторы, сокращаешь до 1 - 2 знаков. А потом, вытирая пот со лба, нажимаешь Ctrl+s Alt+Tab F5, и о ужас! Далее наверное комментировать не нужно, у любого вебмастера сразу всё падает. Это естественный рефлекс. Но всегда ли так бывает? Нет не всегда, а когда используешь, что-нибудь типа браузера Firefox и ему подобных! Так что же может не понравиться этим монстрам в деле обозревания Интернета? Есть несколько загвоздок, из-за чего браузерная совместимасть сайтов, превращается в настоящую головную боль для лубого верстальщика.
Вот загвоздка первая! Прочитайте пост http://xstyle.info/?show=7, вам сразу станет заметна проблема. Пример в том посте не отображается правильно в Firefox и Netscape, и вместо скруглённых углов, мы видим прямые. Ошибка в коде CSS, для этих браузеров, заключается в том, что идентификаторы заданы цифрами. Чтобы исправить ошибку, необходимо поменять названия идентификаторов. И всё. Пусть будет не 1 или 2, а primer1 или primer2, и даже pri1mer, тоже пойдёт, Но вот пускать просто цифры и цифры в начале имени идентификатора или класса не стоит, проверено горьким опытом.
Итак, правильным будет:
< style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
< /style>
Неправильно:
< style type="text/css">
#1qwerty{ваши правила}
#4{ваши правила}
.3{ваши правила}
.3qwerty{ваши правила}
< /style>
И так далее! Простое правило, которого следует избегать при вёрстке.
Второй и также немаловажной вещью для указанных браузеров, является правильность поочерёдности расстановки элементов страниц в теле документа и в коде CSS. Кажется немного бредом, но факт, который при том очень часто портит кровь. Что нужно делать!? Всё просто. Необходимо добиться соответствия поочерёдности расположения указанных элементов.
< head>
< style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
< /style>
< /head>
< body>
< div id="qwerty1">Ваш контент< /div>
< div id="qwer1ty">Ваш контент< /div>
< div class="qwerty3">Ваш контент< /div>
< div class="qwer3ty">Ваш контент< /div>
< /body>
А не так:
< head>
< style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
< /style>
< /head>
< body>
< div class="qwerty3">Ваш контент< /div>
< div id="qwer1ty">Ваш контент< /div>
< div id="qwerty1">Ваш контент< /div>
< div class="qwer3ty">Ваш контент< /div>
< /body>
Иногда, случается такое, что перестановки, требуют не отдельные идентификатоды, а их блоки, при том как в самих блоках, их положение может быть произвольным.
< style type="text/css">
/* 1 block */
#qwerty1{ваши правила}
#qwer3ty{ваши правила}
.qwerty3{ваши правила}
.qwer1ty{ваши правила}
/* 2 block */
#qwerty4{ваши правила}
#qwer4ty{ваши правила}
.qwerty2{ваши правила}
.qwer2ty{ваши правила}
/* 3 block */
#qwerty7{ваши правила}
#qwer6ty{ваши правила}
.qwerty6{ваши правила}
.qwer7ty{ваши правила}
< /style>
< /head>
< body>
< !-- 1 block -- >
< div id="qwerty1">Ваш контент< /div>
< div class="qwer1ty">Ваш контент< /div>
< div class="qwerty3">Ваш контент< /div>
< div id="qwer3ty">Ваш контент< /div>
< !-- 2 block -- >
< div class="qwerty2">Ваш контент< /div>
< div class="qwer2ty">Ваш контент< /div>
< div id="qwerty4">Ваш контент< /div>
< div id="qwer4ty">Ваш контент< /div>
< !-- 3 block -- >
< div class="qwerty6">Ваш контент< /div>
< div id="qwer6ty">Ваш контент< /div>
< div id="qwerty7">Ваш контент< /div>
< div class="qwer7ty">Ваш контент< /div>
< /body>
Практика делает чудеса! Этой фразой никого не удивишь. Со временем, начинаешь привыкать к такому построению страниц и к подобным капризам браузеров от различных производителей. Будем надеяться, что когда-нибудь, всё изменится, все друг друга купят и в приказном порядке договорятся до единых стандартов.
Автор: Lasckorn | Комментарии [0] | Раздел: css
9 | 22.11.2007
Выбор приемлемых шрифтов при разработке дизайна web-страницы
Итак, шрифты. Если подходить к данной проблеме, с позиции веб-дизайна, то выходит полная сумятица, полный хаос - на вкус и цвет, товарища нет, а программное обеспечение, даёт возможность видеть тот шрифт, какой захочет пользователь, или который ему больше нравится, и в размере, который он предпочитает или хорошо видит. И что тогда!? А тогда, всё очень просто, особенно, для веб-дизайнера - использовать тот шрифт, и того размера, который ему нравится самому (немножко неправильный подход, но всё же).Но возможен и другой вариант, когда пользователь, реально полный user, нормальный user конечно, вообще не трогает настройки своих браузеров, и видит, то что есть, то есть - те шрифты, которые прописаны на веб-странице, при условии, что они установленны у него в системе, в противном случае - шрифт по умолчанию в его браузере (например Times New Roman). Стало быть, необходимо подстраиваться под пользователя. Но как известно, и мне тоже, и другим веб-программистам, что очень тяжело подбирать шрифты под фоновый дизайн, намного проще и эффективней, подбирать их по тематике сайта, степени его оффициальности, а сам фон - под уже имеющийся шрифт. Вот так!
Для эффективной работы, дизайнер, должен выбрать набор собственных часто используемых им шрифтов, и тогда успех ему гарантирован.
Как всегда, у веб-дизайнера, есть собственный любимый шрифт, или несколько, с определённым любимым размером, и все свои работы, он воспринимает и неосознанно подстраивает под него. Причём, самые лучшие работы, получаются, когда вебмастер следует своему правилу "по умолчанию".
Автор: Lasckorn | Комментарии [0] | Раздел: design
8 | 19.11.2007
Ахроматическая цветовая схема дизайна web-сайта
Всем известна цветовая схема RGB. А что подобрать для своего сайта, чтобы он был приятен всем - опять же, какую-нибудь схему из этого самого RGB. Но какую!? Этот вопрос задают многие.Существует ряд принципиально отличных цветовых схем для веб-страниц, это:
1. Нейтральная.
2. Основная.
3. Дополнительная.
4. Терциарная.
5. Аналоговая.
6. Ахроматическая.
7. Дисгармоничная.
8. Дополнительная.
9. Монохромная.
(это не моя классификация, где-то когда-то это вычитал).
Но не суть дело. Обо всех этих схемах и их применении в веб-дизайне, я раскажу в следующих постах. Сейчас - наиболее универсальная для всех времён и народов цветовая схема. Не так давно, я уже описывал подобные цветовые композиции, но это был лишь набор цветов, для того или иного целевого восприятия сайта и привлечение постоянной целевой аудитории. А вот схема цветов, которая, вне зависимости от предпочтений и целевых установок, распологала бы к себе посетителя. Одно из правил при выборе - больше чистоты, второе - завершённость световой схемы. Чистый цвет - это понятно, а вот где взять "завершённость", или точнее сказать замкнутость, придающую элегантность и уют. Цветовая схема должна состоять из двух крайних цветов и их средних оттенков. А это, если вспомнить общенациональный триколор (красный - чёрный - белый), будут как раз - чёрный и белый. Такая цветовая схема в дизайне, называется "ахроматической". Пример, перед вашими глазами, или здесь.
Эта схема, имеет потрясающую популярность, и вместе с тем, каждый подобный проект, отличается уникльностью в восприятии посетителя web-страницы. Как известно, чистые цвета, благоприятствуют обострению внимания. Вспомните белоснежный лист формата A-4 с напечатанным в чистом чёрном цвете текстом и в противовес - старую пожелтевшую книжку с затёртыми страницами и посеревшим (а лучше сказать "пошкарябанным") текстом. Разница на лицо!
Даже если у вас будет только часть страницы, иметь ахроматическую схему, но только разумеется визуально целостная часть, то это будет безпроиграшное решение. И если хотите акцентировать внимание посетителя страницы на чём то серьёзном, сделайте такую вставку, либо сделайте оформленную в ахроматической схеме всю страницу.
Автор: Lasckorn | Комментарии [1] | Раздел: color
7 | 14.11.2007
Создаём скруглённые углы
Одна из проблем с которой рано или поздно сталкивается каждый HTML верстальщик - это оформление несодержательных в плане контента элементов веб-страницы. Если вам доводилось создавать визуальные блоки с закруглёнными углами, всегда возникала проблема, с тем, что нужно было рисовать эти самые углы.Конечно самый простой способ - это нарисовать эти самые углы и вставить их в таблицу. либо в отдельные блоки. Но в любом случае их нужно рисовать, и в добавление ко всем файлам на вашем сайте, будут лежать ещё и графические файлы ваших элементов оформления.
Как уже было сказано, можно делать так:
< table>
< tr>
< td background="corner_left_top.gif">< /td>
< td>< /td>
< td background="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td background="corner_left_bottom.gif">< /td>
< td>< /td>
< td background="corner_right_bottom.gif">< /td>
< /tr>
< /table>
или
< table>
< tr>
< td>< img src="corner_left_top.gif">< /td>
< td>< /td>
< td>< img src="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td>< img src="corner_left_bottom.gif">< /td>
< td>< /td>
< td>< img src="corner_right_bottom.gif">< /td>
< /tr>
< /table>
А можно более продвинуто, избегая использования рисунков, например применяя JavaScript, или CSS. При этом, использование JavaScript, влечёт за собой применение довольно больших и тяжёлых скриптов, так, что уж лучше даже использовать изображения скруглённых углов. А вот CSS - представляет довольно много возможностей с минимальными затратами построить нужную форму объекта.
Для того, чтобы создать закруглённый угол с помощью CSS, необходимо использовать ряд независимых в плане разметки веб-страниц объектов. Ими могут выступать div, span, b, i и многие другие объекты, которые не имея внутри себя никакого контента, не подчиняются никакому правилу "по умолчанию" и не отображаются на странице.
Возьмём div объект и попытаемся создать округлую форму, используя только правила CSS.
По умолчанию, каждый элемент имеет определённую высоту, в зависимости от типа вашего браузера. А посему, очень важное для нас свойство приобретает правило overflow, и для запрета отображения размерности контейнера, ему следует придать значение hidden.
Итак, что можно сделать:
< style type="text/css">
#block{width:200px}
#1{margin:0}
#2, #3, #4, #5, #6, #7, #8, #9{height:1px;overflow:hidden;background:#0099cc}
#2, #9{margin:0 5 0 5px}
#3, #8{margin:0 3 0 3px}
#4 ,#7{margin:0 2 0 2px}
#5, #6{margin:0 1 0 1px}
#content{padding:5px;background:#0099cc;font:11px Verdana;color:#000}
< /style>
< div id="block">
< div id="1">
< div id="2">< /div>
< div id="3">< /div>
< div id="4">< /div>
< div id="5">< /div>
< div id="5">< /div>
< /div>
< div id="content">
Ваш контент
< /div>
< div id="1">
< div id="6">< /div>
< div id="6">< /div>
< div id="7">< /div>
< div id="8">< /div>
< div id="9">< /div>
< /div>
< /div>
И получается следуещее:
Ваш контент
(Если Вы используете браузер Firefox или Netscape Navigator, то скорее всего примера не увидите, поскольку блоку не заданы отдельные параметры, но примером выступает само оформление блога, для просмотра именно этого примера, откройте страницу в другом браузере)
Как видно - всё очень просто, простое использование правил в CSS и результат на лицо, безо всяких рисунков.
Здорово, правда!? Вот она сила CSS. В оформлении данного блога, используется тот же принцип, если присмотритесь к углам блоков.
Пользуйтесь на здоровье.
Автор: Lasckorn | Комментарии [5] | Раздел: css
6 | 08.11.2007
Основное преимущество блочной структуры веб-страницы
В HTML используются две основные модели структуры разметки на веб-странице.Первая - это табличная структура со структурой:
< table>
< tr>
< td>
Ваш контент
< /td>
< /tr>
< /table>
< table> - таблица, < tr> - строка, < td> - столбец. При этом строк и столбцов внутри одной таблицы может быть сколько угодно, но это всё элементарно. Таблицы не обеспечивают гибкости элементов на страницах. Их, в любом раскладе прямоугольная сетка, не даёт возможности свободного позиционирования элементов. Даже при использовании CSS и наложении одних таблиц на дргуие, их внутренняя структура также подчинена правилам таблиц. Но главный минус - слишком объёмный код.
Вторая модеь - это блочная модель, состоящая из универсальных независимых элементов < div>, < span>, < b> и других.
С использованием CSS, есть возможность совершать всё что вздумается. Так что использование блочной стркутуры - более предпочтительней, хотя и требует больших навыков. Но как всегда, не стоит её идеализировать, поскольку таблицы тоже иногда бывают очень полезны, но об этом позже.
Автор: Lasckorn | Комментарии [0] | Раздел: html
5 | 05.11.2007
CSS - оптимизация структуры
CSS (Cascading Style Sheets) - каскадные таблицы стилей - технология оформления веб-страниц. Это уже фактически язык программирования, хотя это личное субъективноё. CSS используется для оформления главным образом документов с HTML и XML структурой, представляя собой списки правил, для отображения того или иного элемента на web-странице. Таблица стилей состоит из списка набора правил. Каждое правило, состоит из одного или нескольких селекторов, разделённых запятыми и блока определений. Блок определений - сектор списка, обрамляённый фигурными скобками, и состоящий из набора свойств и их значений.Схематически CSS, можно представить так:
selector(1), selector(2), selector(...), selector(n) {
property:value;
property(1):value;
property(2):value
}
Довольно простая схема, особенно, если выстроить всю конструкцию на одной строке (вот мой вредный совет):
selector{property:value;property(1):value}
Где-то так, причём можно опускать пробелы между символами, а после последнего правила внутри фигурных скобок не ставить закрывающую точку с запятой. Хоть это и не совсем валидно, но на самом деле, всем браузерам сине-фиолетово по факту и они всё прекрасно читают, а Вы плюс ко всему получаете существенное уменьшение "веса" документа (у меня иногда выходило на 40-50Kb и более).
Отображать CSS в теле документа можно по разному. Можно создавать их в отдельном файле с расширением ".css", а затем размещать ссылку на странице (< link rel="stylesheet" type="text/css" href="style.css" > или < style type="text/css" media="all" >@import "style.css";< /style >), или размещать в "шапке" (головной части) документа, используя тег "style" (конструкция 1) или свойсво "style", для элементов документа (конструкция 2).
Конструкция 1
< style type="text/css">
body{color: red}
< /style >
Конструкция 2
< p style="font-size:11px;color:blue">Ваш текст< /p >
или
< div style="background:#44ff00;color:blue">Ваш текст< /div >
Если использовать ссылку на CSS файл, то необходимо задать для элементов страницы идентификаторы: "id" или "class". Причём в самом CSS файле id-селектор, задаётся с помощью символа "#", а class-селектор, с помощью точки. Выглядит это примерно так:
<----------style.css---------->
#qwerty{width:125px;height:300px;background:#000;border:2px solid #990000}
.qwerty{font:12px Verdana; color:#fff}
.asd{font:14px Tahoma; color:#0000cc}
<----------style.css---------->
<----------body---------->
< div id="qwerty">
< span class="qwerty">Ваш текст< /span >
< span class="asd">Ваш текст1< /span >
< / div >
<----------body---------->
Но лучше всего использовать один id-селектор, так как он короче и с точки зрения созерцания - более заметен.
В этом посте, главная премудрость - сжатие структуры CSS, для оптимицации под Пользователя.
Автор: Lasckorn | Комментарии [1] | Раздел: css
4 | 30.10.2007
Цветовые схемы в веб-дизайне
Набор цветов на веб-странице, и общая цветовая гамма представленной на странице дизайнерской композиции - немаловажный фактор, помимо зрительного фона, создающий предрасположенность к тем или иным действиям у пользователей, посещающих данную страницу.Первое, что можно отметить - это целевые составляющие, с которыми пользователь заходит на сайт. К ним относятся, такие врианты как: поиск нужной информации, простой сёрфинг по ссылкам от нечего делать (просто заинтересовало то или иное слово в сыылке на вашу страницу), созерцание и сравнение дизайнерских оболочек.
Если исходить из принципа только поиска информации, то дизайн как составляющая оптимизации сайта для пользователей отпадают практически полностью, и уже включаются в использование механизмы структурирования самого документа по отношению информации на нём представленной (есть конечно исключения, когда оформление информационного блока сильно влияет на качество информационного продукта).
А вот уже "блуждание по страницам от нечего делать", это залог того, что посетитель зашедший на ваш сайт и не обременённый никакими умственными заботами на данный момент, определённо обратит внимание на цветовую гамму фона страницы и её оформление и погрузится в неосознанную атмосферу вашего дизайнерского мастерства. Для любителей красивых вещей, в том числе увлечённых web-дизайном, любое нстандартное цветовое решение явится просто напросто шоком, пусть и не надолго, но данный человек задержится на сайте, "посозерцает", покопается в исходном коде и скорее всего, если не будет разочарован, запомнит адрес, чтобы ещё раз вернуться.
Но это все прелюдия. Главное, о чём собственно говоря этот пост - это цветовые схемы веб-страниц и их использование для целевых посетителей (психологическая составляющая).
Предпочтительные цветовые схемы для сайта выбирать следует, исходя из его тематики. Анализируя возможные варианты и комбинируя психологические и традиционные ассоциации с тем или иным сочетанием цветов, можно выделить ряд следующих наборов цветов и их совокупностей:
1. Для всех без исключения страниц, можно использовать систему "крайних" цветов - чёрного и белого, а также их полутона - серый, с различным преобладанием того или иного спектра.
2. Комбинация "первичного" цветового набора - красный, белый, чёрный, является традиционной практически для всех культур народов мира, и в веб-дизайне также, проявляет все свои аттрактические особенности. Такую систему цветов, предпочтительней использовать для серьёзных проектов, особенно если разработка страницы ведётся для коммерческой среды.
3. Для специализированных проектов отлично подойдёт система "полярных" цветовых комбинаций. Это такие цветовые системы, как: красный - зелено - голубой; оранжевый - голубой; желтый - синий; желто - зеленый - фиолетовый; зеленый - пурпурный. С помощью использования подобных сочетаний, имеется возможность контрастного структурирования информации на странице. Помимо прочего, данные комбинации, подобно чёрно-белой (ахроматичной) композиции, являются универсальным фоном, для включения в дизацн страницы других монохроматических и полихроматических объектов.
4. Применение монохромных схем, лучше всего подойдёт для небольших документов, не имеющих динамических элеменотв и перспектив к обновлению.
5. Очень интересной и перспективной для веб-дизайна, является трёхцветная композиция из основных "физиологических" цветов (в зрительном аппарате человека, возбуждаются три основных цвета, все остальные различимые нами цвета, есть уже совокпность основных) - красного, зелёного и синего. Это наиболее полный цветовой набор на странице, так как в нашем мозгу формируется весь видимый спектр белого цвета. Пусть внешне страница и будет выглядеть агрессивно, но с точки зрения физиологии, это оптимальный цветовой набор для полноценного и безопасного восприятия информации. Правда тут есть и оговорка для веб-дизайнеров - невероятно трудная компановка этих цветов в структуре страницы (как сделать так, чтобы вместо серьёзного сайта не получить "попугая"). Необходимо обладать недюжим мастерством и опытом, чтобы использовать эту "природную" палитру.
6. Относительно компоновки более трёх цветов на странице, стандартным природным набором в мире дизайна, считается: красный - жёлтый - зелёный - синий, и цветовой набор радуги (как более широкий). Однако, по собственному опыту и проводимым мной исследованиям по "привлекательности тех или иных наборов цветов" среди друзей по университету (правда говорить об уж слишком большой репрезентативности данного исследования не приходится, проводилось оно главным образом, на Географическом факультете ТНУ в 2005-2006, и конкретно по кафедре Геоэкологии до 2007 года (это чтобы Вы не сомневались)), было установленно, что наиболее качественный для восприятия набор цветов на веб-странице, это любые соседние четыре цвета радуги, то есть: красный - оранжевый - жёлтый - зелёный, оранжевый - жёлтый - зелёный - голубой, жёлтый - зелёный - голубой - синий, зелёный - голубой - синий - фиолетовый. Включение в список их полутонов, только улучшает качественное разнообразие цветового фона.
7. И на закуску, можно затронуть тему так называемых "цветовых рядов", это универсальнейший способ оформления всего в современную эпоху. Все это используют, и все неосознанно, просто людям это нравится - изменение тонов одного и того же цвета, да ещё и с применением черезполосицы, отличный вариант для сайта любой тематики и структуры. Особенно хорошо его применять вместе с каскадными таблицами стилей (CSS) и динамическими элементами. Просто и современно! Возьмите страничку и задайте как основной цвет (включая различные его тональности разумеется) - сизо-коричневый, но за счёт обилия чередования его полутонов, эта страница будет выглядеть на все сто!
Автор: Lasckorn | Комментарии [0] | Раздел: color
3 | 27.10.2007
Web-страница и её визуальная структура
Web-страница - это не просто представление информации в сети Интернет, отображаемой на вашем мониторе, это отражение степени развитости технологий современной информационной эпохи. Зайдите на какую-нибудь малопосещаемую страницу с датой последнего обновления ещё в прошлом веке, а затем наберите в поиске что угодно, и перейдите по первой же ссылке на сгенерированной странице результатов поиска, и наслаждайтесь осязаемой разницей. Потому-что она не просто очевидна - это неоспоримо. Хотя нужно признать, что для своего времени, страница всегда будет смотреться шикарно, поскольку на период современников, ещё не успели сформироваться пристрастия и сложиться стереотип, какой должна быть современная web-страница.Если подходить к дизайну страниц с позиции "современного" дизайнера, то вопрос становится более сложным, так как возникает новый вопрос, и не о какой-нибудь графике, её стиле, качестве и визуальной привлекательности, а об эргономичности пользовательских блоков контента на ней размещаемой. Ведь никакой графической постановкой, уже давно не удивишь приевшегося интернет-пользователя, а продуманные с точки зрения позиционирования на странице блоки навигации и основного контента - располагают к себе посетителя того или иного сайта, западая ему в душу, заставляя полуосознано добавлять адрес страницы в "Избранное" (Ctrl+D), и как итог - возвращаться на данный сайт снова и снова (задумайтесь над тем, сколько страниц у вас в "Избранном", почему они там, по каким объективным и необъективным причинам вы их туда добавили).
Итак, рассмотрим такую немаловажную часть деятельности web-дизайнера, как построение структуры веб-страницы.
Традиционно веб-страница состоит из следующих блоков:
1. Шапка страницы - её верхняя часть, где обычно размещён Title сайта (его название, ссылка на сам сайт, короткий перечень навигационных ссылок на различные его разделы (иногда весь)).
2. Контентный контейнер - основная контент-содержащая часть, включающая всю основную информацию во всех формах её представления, обычно расположена в центральной части страницы, иногда оттесняемая слева или справа навигационным блоком.
3. Навигационный блок - визуально скомпанованный массив в теле документа, содержащий ссылки навигации между страницами сайта (внутренние ссылки), а также (иногда) внешние ссылки на другие ресурсы близкие по тематике, либо представляющие какой-то интерес для владельца сайта. Данный блок может распологаться как в абсолютно-правой или абсолютно-левой позиции, так и находиться в центре контентного блока, спава или слева от него.
4. Нижняя часть страницы (её "подошва", основание) - визуально опорный блок, который подобно шапке страницы, содержит в себе навигационные ссылки, и очень часто используется как подитоживающая статистическая область, где приведены данные о владельце, копирайт (Copyright), индикаторы статистики посещений страниц и активности на них.
Вроде логичная схема, подобно аксиоме не требующая доказательств, однако в неопределённости точных позиций центральных блоков на странице (контентного и навигационного) - вся загвоздка. Для того, чтобы страница смотрелась необычно и вызывала как пользовательский и дизайнерский интерес у её посетителей, дизайнер (веб-разработчик), долженопределить их взаимное расположение.
Кажется, что здесь думать, ведь в действительности вариантов не так уж и много - слева, справа, по центру, или же куда-нибудь сместить какой-нибудь из блоков внахлёст соседнему. Данный вопрос требует детального изучения.
Во-первых, перед расработкой структуры веб-страници, необходимо определиться с формой и качественными характеристиками предполагаемого к размещению контента, а так же количеством оного на каждой странице. Это позволит, установить размеры требуемого блока навигационных ссылок, даже если вебмастер планирует там поместить две или три ссылочки, неважно, всегда найдётся информация для заполнения пустого пространства (хоть рекламу туда ставьте). Если исходить из любых правил дизайнерского искусства и норм видеоэкологии, в горизонтальном направлении должно быть два визуальных полюса, причём одинаковых по протяжению в вертикальном направлении, так как любое несоответствие размеров по вертикали, будет создавать третий зрительный полюс, а в совокупности с одинаковыми прямыми линиями и углами в границах данных "полярных" областей - будет создаваться агрессивная визуальная среда, в которой человеку уже на подсознательном уровне будет не уютно, и скорее всего у него останется желание больше не заходить на подобную страничку.
Выглядеть это может примерно так:
1
2
Средняя часть просматриваемой веб страницы, должна выглядеть как на первой схеме, и поверьте, большенству посетителей сайта, это прийдётся по душе.
Конечно же это не жёсткое правило и никто вас не обяжет ему следовать, и может вы найдёте более универсальную и более достойную во всех отношениях композицию. Но представленное здесь утверждение работает (тесты проводились не только на хомячках, в качестве добровольцев выступали бывшие однокурсники (при проведении опытов, ни один человек не пострадал)).
Выбор остаётся всегда, и самый лучший индикатор качества - это глаз самого вебмастера.
Здесь же нельзя обойти стороной вопрос - а где же размещать навигационный блок, с какой стороны от контентной области? Традиционно так сложилось, что его размещают слева, и все к этому давно привыкли. Но не все в этом мире, держат мышку в левой руке - большенство в правой. Стало быть, намного эргономичнее было бы размещать всю навигацию справа, но как показала практика - пользователям всё-равно, с какой стороны экрана висит та или иная ссылка, мышка при этом не вылезет за пределы коврика - движения манипулятора минимальны.
Вывод здесь один - оригинальность, всё в ваших руках.
Вторым правилом в теме о структурировании страницы, можно обозначить визуальную соразмерность объектов на странице, включённых в разные блоки. Тут действует тоже самое правило "полярности" - их высота должна совпадать. Так, расположенный справа или слева массив ссылок в навигационном блоке, должен соответствовать по высоте, расположенному в контентной области рисунку, если они по горизонтале располагаются на одном уровне. Исключение здесь - компановка текста с текстом, если убрать визуальные границы структурных блоков страницы (зделать границы бесцветными), поскольку текст - визуально прозрачный объект на странице имеющей фон (особенно если фоновый рисунок фиксирован).
3
4
Смело творите, создавая лицо сети Интернет завтрашнего дня.
Автор: Lasckorn | Комментарии [1] | Раздел: design
Архив 'Life online' | Сообщения по дате | Главная
При публикации контента данного ресурса, ссылка на сайт обязательна!
Компания оранта, страхование оранта , неплохая страховая компания
Россия создаст свой собственный интернет! на 1000pages.net
Экоцентр "Экосистема": Полевая география - родителям и педагогам
Мы проведём феерверк на дне рождения от компании Элитсалют.
Разделы:
Общение с HTML и последствия
Приёмы с CSS, высший пилотаж
PHP в web-дизайне | (архив статей)
Дизайнерские решения
Цветовые решения
Мой Art
Главная
Мой новостной обзор
Статьи
Новости Hi-Tech
новостной поток
Общение с HTML и последствия
Приёмы с CSS, высший пилотаж
PHP в web-дизайне | (архив статей)
Дизайнерские решения
Цветовые решения
Мой Art
Главная
Мой новостной обзор
Статьи