Created using
htm2chm 3.0

Download it NOW!


main frame

 Sorry there are not a frame support in your browser.


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

Основные элементы
стрницы

Самое первое, что вы заметили документ этот фреймосодержащий. Страница разбита на 3 фрейма, 2 верхних не имеют скроллинга, в них расположен логотип и кнопки навигации (место для кнопок в во втором фрейме не более 450 пикселей по горизонтали). Заголовок заключеный в вехние фреймы служит 2 целям: первое - навигция всегда под рукой, и второе - логотип всегда на виду, и посетитель невольно запоминает его, также это придает странице законченность при прокрутке в основном фрейме.

Основной фрейм

О заголовке будем говорить позже, он всегда на виду, - успеем еще, поговорим об основном фрейме. Основной фрейм с бэкграундом светло-серого цвета. Имеется левое поле в виде 2-х красных полос. Текст изначально заключен в таблицу из 3-х колонок, что придает "журнальную" видимость. Горизонтальные линии служат ту же службу, что и в печатных журнлах - отделяет текст по тематике, но имеется и другая ее функция, о ней позже.

Поговорим о бэкграундах

Так, как мы собираемся поговорить о бэкграундах, мы о них и поговорим. Дело в том, что бэкграунд сам по себе это только графическое изображение или определенный цвет, и рассматривать его отдельно от других элементов страницы не имеет смысла. С этой целью, мы и остановимся на том, что изначально рассмотрим именно этот пример, а далее поговорим уже и в общем аспекте.
Итак, как вы уже успели заметить я перешел от формата с тремя колонками на обычный формат, оставив поля, конечно тегами <BLOCKQUOTE> . . . </BLOCKQUOTE>, при этом пришлось изменить шрифт, - строка теперь длиннее, а шрифт с засечками помогает не терять строки при чтении. Дело в том, что многие пытаются изобразить страницу в виде печатного журнала, оно конечно, колонку легче читать, так, как от конца строки до начала следующей меньше расстояние и это снижает нагрузку на зрение. Но, это всеже не на бумаге и размер видимого поля будет среднем в два раза меньше журнального, ведь монитор имеет в основном по вертикали меньший размер. Второй случай, почему часто изображают в таблицах, - слева обычно располагают кнопки навигации, иногда используют третий столбик для рекламных баннеров, почему именно третий - рядом полоса прокрутки, если не промахнулся случайно попав по баннеру, то заинтересовавшись рекламой далеко гнать указатель мыши не нужно. Но друзья мои, посмотрите на обычный журнальный или газетный лист. Что видите? Колонки то все одинаковой ширины. А вот в Веб-е этого добиться крайне трудно. Незначительные отклонения ширины воспринимаются как деффект. В дизайне не могут согласоваться объекты одного цвета или текстуры незначительно отличающиеся по размерам, а текст это тоже своеобразная текстура.
Почему я выбрал именно такую текстуру для заголовка этой страницы? Во первых, я здесь собираюсь говорить о бэкграундах, вот и выбрал на мой взгляд сложный бэкграунд. Чем он сложен? Первое - градиентный, второе - мало цветов сочетаются с этим, третье - линейчатая текстура. Линейчатая текстура предполагает, что все изображенные на нем округлые объекты будут иметь "рваные" границы. Вы скажете а как же круглые кнопки? Они, извините, немного темнее того цвета, что и широкие полосы, а те в 5 раз толще черных, таким образом кнопки как бы вливаются в текстуру. Второй бэкграунд - это полоса голубого цвета, которая в три раза уже верхней полосы и в четыре - серо-зеленых полос. Почему именно такая ширина? Единство и еще раз единство форм. Дело в том, что это по сути прямоугольники, а чтобы прямоугольники составляли единую композицию их размер должен отличаться в 3-5 раз, при этом форма также должна не переростать в подобие квадрата. Черезчур большие отличия также ломают дизайн и именно поэтому в качестве основного фона страницы я выбрал светло-серый цвет, так, как если установил белый, то бросалось бы в глаза существенное отличие размеров белого элемента на логотипе и белого поля страницы. Ну и наверное от черезчур яркого белого фонового цвета быстро устают глаза.
Логотип, как я и говорил ранее, на таком бэкграунде подойдет только из прямоугольных композиций, - у округлых будут рваные края. Почему это происходит? Заметим, что при резком переходе от более темного цвета к более светлому, когда светлый по размерам значительно меньше бэкграунд пытается как бы "Поглотить" светлый элемент. Светлый элемент становится более сильно выделен в центре, а по краям появляется кажущаяся затемненность от бэкграунда, при этом текстура играет огромную роль в этой неоднородности. Если же соотношения светлого и темного объектов близки и они же близки по размеру, то на границе перехода от темного к светлому будет ярко выражена граница светлого на светлом и темного на темном. Как именно происходит воздействие в нашем примере? Очень просто, это также справедливо и для темного элемента на светлом фоне, а у нас черные линии значительно меньше предполагаемого к размещению объекта. В таком случае темные элементы будут "захватывать" темные элементы бэкграунда, а светлые - соответственно будут частично "поглощены" темными элементами, в данном случае линиями, а светлые элементы "захватят" часть серо-зеленой части.
Почему именно градиентный бэкграунд? Дело в том, что в логотипе использовано много черного цвета, а на однородном фоне он выглядел бы "тяжеловато", дабы сохранить "центр масс", в районе логотипа фон несколько высветлен. Градиент также немного сглаживает угловатость самого логотипа.
Как же гормонируют логотип из прямоугольников с двумя круглыми кнопками? Дело в том, что две кнопки вместе дают соотношение похожее на соотношение сторон белого прямоугольника в логотипе. Представьте например модель ВАЗ-2106, - 2 круглые фары в подчеркнуто бампером прямоугольных формах, и почему именно две, - в комплексе они создают форму ближе к прямоугольной. Наш же пример приближен к таким соображениям, и еще, - один объект выраженно светлый ближе к нижнему-левому краю, другой темный (группа объектов) к верхнему-правому, - единство противоположностей или иным словом контраст.
Теперь поговорим о прямоугольных псевдообъемных кнопках для навигации. Заметим, что кнопки все одного размера, того же цвета что и полоска. Теперь представим другой их цвет. Представили? Что получилось? А то, что кроме того, что кнопки имея одинаковые размеры в комплексе составляют один объект, размер их по горизонтали меньше размера полосы, а если занять всю полосу кнопками, то это будет относиться только к одной кнопке. Тоесть здесь правила соотношений соблюдены. Но вот только если применить другой цвет, сразу объекты станут разрозненны. Достаточно только двух соотношений: полоса - кнопка и полоса - группа кнопок. И еще, применив другой цвет, сыграл бы еще один отрицательный фактор: кнопка 2-мя сторонами граничила с одним цветом, одной с серо-зеленым и одной с светло-серым, представляете такое безобразие? А так мы изображаем их цветом полосы и освобождаем две стороны.
Кнопки я применил псевдообъемные, как бы подчеркнув их главное назначение в этой композиции. Неплохо бы смотрелись в данном примере и текстовые кнопки, но кнопкам уготовлена главная роль в навигации и посетитель не должен их искать, - он должен их видеть подсознательно.
Теперь об основном бэкграунде. Мы уже говорили почему я выбрал именно светло-серый цвет, а вот об красных линиях пока небыло сказано. Вспомните школьные тетради. Поля нужны не для того, чтобы там чего писать, а исключительно для удобства чтения. Оставить чистый лист - это значило бы, что чего-то не хватает, нет какого-то ориентира, хотя полоса ориентиром не является. Представим, мы использовали бы слева заполнение какой-либо текструрой или цветом. Страница выглядела бы неопрятно - это еще мягко сказано. Использовать 2 и более различных бэкграундов на одной странице нельзя. Исключение составляют, пожалуй, только страницы одинаковой текстуры с различными световыми (или цветовыми) параметрами. У нас же использованы только 2 тонкие полоски в противовес полосам на бэкграунде заголовка. Также обеспечивают видимость объекта противоположному - полосе прокрутки.
А заметили ли вы горизонтальные полосы перед и после колонок с текстом? Вот эти полосы играют как минимум три роли: первая: - отделяет одну часть текста от другой, вторая: - верхняя полоса опять же "буфер" в композиции перехода от заголовочной части в основную, третья: - подчеркивает текст убирая бэкграунд на задний план, так, как горизонтальная полоса как бы зачеркивает красные линии поля.

О бэкграундах

Вот, когда мы разобрались с дизайном этой страницы поговорим о различных бэкграундах. Что я могу сказать, да и не только я, наверное. Представьте себя в квартире, стены которого из мрамора, - напоминает чем-то подземный переход, ведь так? Теперь представьте страницу журнала, текст которого расположен на пестром фоне. Представьте комнату, где в виде барельефа из одного слова выложены стены. А долго ли вы можете всматриваться в яркое облачное небо пытаясь прочитать там какой-либо текст (что маловероятно, если это не божественное знамение)? Как долго бы вы жили в ванной комнате, стены которой выложены из плитки? Так можно перечислять и перечислять. Важно здесь одно: профессиональные дизайнеры стараются не использовать текстурную заливку, а если и используют, то только мелкую текстуру образованную простыми фигурами (квадраты, прямоугольники, линии и др.). Также можно использовать и текстуру в виде одиночного крупного рисунка соответствующего контуру логотипа, причем этот рисунок не должен сильно выделяться от фона и не иметь контрастных элементов. Бэкграунд должен сочетаться с другими элементами страницы. В отличие от бумажных дизайнерских исполнений, монитор сам излучает свет, при этом можно получить огромное множество различных цветов. В этом то и сложность. Ведь получается, что основных цветов значительно больше семи. Если два цвета например не сочетаются, но немного стоит изменить уровень одного из основных цветов (RGB) как можно неожиданно получить очень неплохие результаты. Представим, журнал в котором фон всех страниц черный. Проблема здесь в том, что это непривычно, да и типографской краски уйдет много. В Веб-е же это вполне допустимо, мало того, уменьшается нагрузка на строчную развертку монитора, а следовательно и уменьшается интенсивность излучаемых электромагнитных волн, меньше света попадает на сетчатку глаз - полезней для здоровья. Конечно, очень объемные тексты помещать на черный фон не рекомендуется, здесь сказывается яркость букв. Подбор бэкграунда также зависит и от тематики страницы: если например страница посвящена фото, каким-либо фото-работам или приемам фотосъемки, то желательно воспользоваться основными черным и белым цветами. А вот если например страница демонстрирует модели одежды, здесь подойдет градиентный однородный фон, причем линия градиента останется неизменной, при разном значении цвета, имеется в виду, что одним цветом здесь не обойтись. Примеров можно также приводить много. Надеюсь, что вы подчерпнули полезное для себя и сделаете правильный выбор бэкграунда, ведь это самый главный элемент Веб-страницы.