| Альманах Вебмастера №21. 28 июля 1999 |
|
Новости отовсюду "Общие принципы композиции в скрин-дизайне" "Вынесите вперед" Полезные ссылки Объявления |
| Новости отовсюду |
|
Новость недели! Марк Велч продает свой сайт Adbility.com. Этот сервер предназначен для вебмастеров и собирает 120 тысяч посетителей ежемесячно. При сайте действует брокерная баннерная сеть, несколько модерируемых дискуссионных листов и форумов. У сайта 7 доменных имен, собственный сервер, а также широкий круг уже существующих рекламодателей (и, к тому же, ужасный внешний вид). При среднем доходе с сайта около 100 тысяч долларов в год Марк Велч назначил цену между 250 и 500 тысяч долларов. Предложение еще в силе. Подробности на http://www.adbility.com/valuation/ Крупнейший рекламный брокер в интернете фирма Double Click купила на прошлой неделе другого брокера - Abacus Direct, специализировавшегося на оффлайновой рекламе интрнет-приложений. Несмотря на временное падение курса акций Double Click, к концу недели положение стабилизировалось, и стоимость акций опять поползла вверх. Теперь Double Click присматривается к другому брокеру NetGravity. Один и крупнейших поисковых порталов Alta Vista отказался от практики продажи лидирующих мест в индексе по ключевым словам. Причины сего действия остаются неизвестными, нет даже стандартной отписки: "акция не оправдала себя". |
| Общие принципы композиции в скрин-дизайне |
|
Возникающая на экране монитора картинка для многих продолжает выглядеть этаким чудом современной техники. Между тем, культурный шок от массового проникновения компьютерных технологий уже пошел на убыль. Теперь становится ясно, что никакой революции в способах восприятия изображений человеком компьютер не принес. Законы воздействия изображения на человека остались теми же, что и сорок тысяч лет назад. Просто в семью визуальных искусств - внуков живописи - наравне с фотографией, кинематографом и телевидением двадцатый век принес еще одно. Это скрин-дизайн. Но, несмотря на его юность и технические особенности "младшенького", родовые черты остаются вполне заметны. Рассмотрим наиболее общие закономерности расположения деталей (надписей, картинок, кнопок и т.д.) внутри рамки экрана. Здесь мы опираемся на принципы, с помощью которых в живописи изучается композиционная структура картины. Для анализа используется система ОПОРНЫХ ЛИНИЙ (см. рис. 1):  1 - серединная вертикаль; 2 - серединная горизонталь; 3 - восходящая диагональ; 4 - нисходящая диагональ; 5 - вертикали золотого сечения; 6 - горизонтали золотого сечения; 7 - геометрический центр; 8 - оптический центр. Сетка, образованная линиями золотого сечения первых 4-х порядков (см. рис. 2)  1. СЕРЕДИННАЯ ВЕРТИКАЛЬ (см. рис. 3)  Делит композицию кадра на левую и правую половины. Благодаря моторно закрепленной привычке читать слева направо, общей для всей европейской культурной традиции, глаза зрителя и здесь движутся слева направо. В результате левая часть кадра воспринимается как связанная с началом, с прошлым, с тем, что было прежде. Правая часть кадра связана с будущим, с завершением. Середина кадра ассоциируется с текущим моментом. Смещение акцента влево от серединной вертикали воспринимается как его движение навстречу зрителю (схема 1, рис. 3). Таким образом, нагруженная левая часть кадра ощущается как движение вспять, в прошлое, навстречу "нормальному" ходу событий. Перенос центра масс кадра в левую часть может вызвать иллюзорное вращение композиции против часовой стрелки. Нагруженная правая часть кадра (схема 2, рис. 3) читается как "убегание" от зрителя в пространстве или устремление в будущее - во времени. В любом случае такой вариант композиционной схемы вербализуется как девиз "Вперед!". Массивная правая часть может заставить кадр вращаться по часовой стрелке. Нагруженность середины кадра (схема 3, рис. 3) читается как формула "Все сразу и сейчас". Этот вариант сосредотачивает внимание зрителя на текущем моменте. 2. СЕРЕДИННАЯ ГОРИЗОНТАЛЬ (см. рис. 4)  Отождествляется с линией горизонта при нормальном положении наблюдателя (наблюдатель стоит на горизонтальной поверхности, луч зрения параллелен земле). Завышение горизонтальной оси кадра относительно серединной горизонтали (схема 1, рис. 4) соответствует низкому, прижатому к земле положению наблюдателя. И напротив, низкий горизонт (схема 2, рис. 4) соответствует приподнятому, летящему над землей положению зрителя. Преобладание масс в верхней части кадра (схема 3, рис. 4) создает эффект неустойчивости, смутной угрозы, эмоционально острое ощущение напряженности. Психологическая подоплека этого эффекта основана на подсознательном опасении, что нависшая над головой масса может рухнуть. Массивная нижняя часть кадра (схема 4, рис. 4) несет ощущение статичности, основательности и стабильности. Размещение центра масс на серединной горизонтали связано с ощущением сбалансированности, усредненности, уравновешенности. Здесь уместны такие понятия, как "здравый смысл" и "обыденная повседневность". 3. ДИАГОНАЛИ Вертикальные и горизонтальные элементы статичны. Вертикали "стоят", горизонтали "лежат", но и те, и другие лишены идеи движения. Динамичные мотивы в композиции кадра передаются диагональными элементами. Все та же привычка читать слева направо заставляет воспринимать диагональ из левого нижнего угла как восходящую, а из левого верхнего - как падающую. Наиболее мощное и энергичное движение передает диагональ "из угла в угол". Чем ближе к прямому угол между диагональю и горизонтом, тем более резкое и порывистое движение она передает, причем приближение к вертикали делает этот рывок все короче, судорожнее, сближая его с напряженным "стоянием" вертикали. Выполаживание диагонального элемента, сближение его с горизонталью, задает движение более протяженное, медленное и спокойное. Изогнутые диагональные элементы композиции читаются как движение с положительным либо отрицательным ускорением. Обращаем внимание читателя на то, что восприятие диагональных элементов сильно зависит не только от формата кадра, но и от характера самого элемента:  На рис. 5 формат кадра близок к квадрату, диагональный элемент "из угла в угол" воспринимается как равномерное восходящее движение.  На рис. 6 вытянутый по горизонтали формат кадра заставляет воспринимать такой же элемент как более резкое, порывистое движение вверх.  На рис. 7 такая же диагональ, образованная рядом элементов, передает движение в более слабой форме. 4. ЦЕНТРЫ(см. рис. 8)  Схема композиционного анализа включает рассмотрение трех центров. Фактически здесь центрами мы будем называть не точки, а некоторые области, конкретные размеры которых зависят от размера кадра и его общей структуры. Геометрический центр лежит вблизи пересечения серединных осей, обычно он обладает диаметром около одной десятой горизонтального размера кадра. Деталь, помещенная в геометрический центр, выглядит резко подчеркнутой, выделенной и имеет много шансов оказаться "фокусом" композиции в целом (схема 1, рис. 8). Оптический центр является областью, в которой взгляд зрителя, скользящий по изображению, пребывает наиболее часто. Этот центр расположен над пересечением серединной вертикали с верхней горизонтальной осью золотого сечения, размеры его примерно равны одной пятой горизонтального формата кадра. Обычно этот центр нагружен деталью, которая предназначена для наиболее тщательного и подробного разглядывания. При этом характер детали, помещенной в эту область, как бы распространяется на кадр в целом. Так, светлый и яркий оптический центр придает всему кадру жизнерадостность и оптимистичность (схема 3, рис. 8), а темное пятно в оптическом центре может окрасить кадр в мрачный и меланхолический тон (схема 2, рис. 8). Локальная плотная деталь в оптическом центре читается как интравертное состояние погруженности в себя, а пустой центр ассоциируется с внутренней пустотой - от блаженной нирваны до безнадежного отчаяния. Для ряда случаев композиционного решения характерно наличие еще одного центра - смыслового, то есть области или элемента, наиболее значительных по смыслу (согласно замыслу автора композиции). Размеры и расположение смыслового центра совершенно произвольны, но зритель бессознательно ожидает обнаружить его в оптическом центре. Несовпадение смыслового и оптического центров читается как движение первого: либо в плоскости кадра, либо, если центры не совпадают по размеру, - перпендикулярно этой плоскости. Сдвиг смыслового центра вправо от оптического воспринимается как "убегание" от взгляда. Несовпадение смыслового и оптического центров, когда смысловой центр оказывается левее оптического, читается как движения навстречу взгляду зрителя, родственное "наезду" камеры в кинематографе. Смысловой центр наплывает на зрителя, поджимая пространство кадра. Взгляд вынужден двигаться в непривычном для него направлении, что привносит в восприятие кадра некоторый драматизм. Смещение смыслового центра вверх от оптического заставляет зрителя "задирать голову". Иллюзорное движение смыслового центра вверх способно иногда прибавить высоту кадра, потянув за собой всю верхнюю часть. И напротив, смысловой центр, расположенный ниже оптического, выглядит движущимся вниз. В ряде случаев такое движение способно "прогнуть" кадр в целом, вызвав иллюзорное опускание середины композиции по сравнению с краями. Несовпадение смыслового и оптического центров по размерам также считывается как движение: либо вглубь кадра (если смысловой центр меньше оптического), либо на зрителя из глубины кадра (если смысловой центр больше оптического). Особый случай - делокализованный смысловой центр, когда автор располагает несколько важных по смыслу деталей рассредоточено относительно оптического центра. Как правило, этот вариант композиции как бы расслаивается, что заставляет проводить раздельный анализ композиции кадра в целом и локальной структуры, образованной смысловыми элементами. 5. ДОПОЛНИТЕЛЬНЫЕ ОПОРНЫЕ ЛИНИИ (линии золотого сечения) (см. рис. 9)  Линиями золотого сечения называются линии, параллельные одной из основных опорных осей и делящие перпендикулярную ей ось в пропорции золотого сечения: 1 х 0,62 х 0,38 х 0,24 х 0,14. Линии золотого сечения "вырезают" в кадре области, связанные с ощущениями порядка, академичной суховатой продуманности и рассудочности. На схеме показаны опорные линии, соответствующие первому из ряда золотых сечений (1 х 0,62). Эта пропорция наиболее любима европейской изобразительной культурой эпохи классицизма. Опорные линии второго и третьего членов ряда золотых сечений (1 х 0,38 и 1 х 0,24) выглядят более утонченно и экзотично для европейского взгляда. Эти пропорциональные отношения преобладают в японской визуальной традиции начиная с эпохи Хэйань вплоть до эпохи Мэйдзи. Во второй половине девятнадцатого века японская и европейская традиции пересекаются: стиль модерн активно прибегает к "японским" вариантам золотого сечения, а японская гравюра в духе Кидагава Утамаро столь же старательно подражает европейским понятиям красоты. Сегодня "всеядная" эстетика постмодернизма успешно использует весь ряд золотых сечений в зависимости от поставленной задачи. 6. S - ОБРАЗНЫЕ (ХОГАРТОВЫ ЛИНИИ) Опорные линии, названные по имени английского искусствоведа и эстетика Уильяма Хогарта, начиная со второй половины семнадцатого века, претендовали на роль основных гармонизирующих осей любой композиции. Была разработана процедура проецирования конической спирали на плоскость кадра, позволяющая получить сложную кривую с несимметричными витками (на схеме показан упрощенный вариант). Для эстетической системы барокко и раннего классицизма именно эта ось становится воплощением идеальной гармонии, а задаваемое ей вихреобразное движение - высшей и конечной формой красоты. (см. рис. 10)  Вряд ли сегодня возможно ставить вопрос о некоей идеальной "линии красоты", но спиральные волюты и S-образные кривые продолжают активно присутствовать в композиционных решениях. Общий смысл спирального композиционного элемента заключается в криволинейном движении либо к центру, либо из него. В некоторых вариантах дополнительные детали четко указывают на характер движения: на схеме 1 спираль "всасывает" взгляд (движение к центру), а на схеме 2 она разворачивается от центра к периферии. Здесь направление движения указано привязкой к читающему движению глаз слева направо. На схеме 3 направление движения по спирали дополнительно подчеркнуто массивным пятном в правом верхнем углу. Смещенный таким образом центр масс заставляет всю композицию вращаться по часовой стрелке, задавая вихревое движение к центру. (см. рис. 11)  Во многих вариантах движение по спирали может читаться в равной степени как центростремительное и центробежное, создавая образ некоего колебания. В виде меандра такое движение приобретает ритмичный характер, ассоциируясь с чередованием сжатия и расширения - с ритмом сердцебиений. ПРИМЕР В качестве примера рассмотрим композиционную структуру титульного листа сайта. Авторы принимали непосредственное участие в создании этой скрин-пикчер, поэтому могут не стесняться и анализировать ее вволю. Анализируется вариант для монитора со средним размером экрана (600 на 800 пикселей). (см. рис. 12, 13)   Композиция кадра в основном выстроена вдоль восходящей диагонали. Образующая прямая, немного более пологая, чем диагональ "из угла в угол". По образующей линии расположены дробные элементы, наслоенные друг на друга. Горизонтальные элементы расположены в верхней и нижней части кадра, образуя незамкнутую рамку. Вертикальный элемент только один - полоса прокрутки (скроллинга) в правой верхней части кадра - причем слабый и малоконтрастный. Верхняя и нижняя части кадра равновесны по массам. Правая и левая части также близки, но правая несколько массивнее. Наиболее активна середина кадра. В геометрический центр помещен темный акцент динамичной формы (что-то вроде короны). Акцент смещен вниз из области геометрического центра. Область оптического центра пересечена ступенчатыми формами по восходящей диагонали. Они образуют яркий, светлый, контрастный фрагмент. Акценты опираются на линии золотых сечений, но не привязаны к ним жестко. Перечисленные композиционные особенности могут быть переведены на словесный (вербальный) язык. Получится следующий набор ключевых слов и словосочетаний: - равномерное движение вперед и вверх, шаг за шагом; - ограничения, рамки ощущаются, но не жестко. Они не останавливают движения, а направляют его; - уравновешенность, устойчивость, баланс; - наиболее актуален текущий момент, здесь и сейчас; - рассудочное начало активно присутствует. Разум, сам по себе динамичный и активный, обеспечивает устойчивость и опору; - эмоциональное начало активно, ярко, контрастно. Именно эмоционально ситуация воспринимается как движение вперед и вверх; - упорядоченность присутствует, но не связывает. Правила выполняются приблизительно, не жестко. Авторы полагают, что выраженный в композиции кадра образ вполне соответствует теме сайта. Ну а посетители сайта могут составить и высказать свое мнение в гостевой книге. ----------------- Об авторах: Лидин Константин Львович. Два высших образования (Иркутский государственный университет, химический факультет; Иркутский институт повышения квалификации работников образования, отделение психологии). Кандидат технических наук. Доцент Иркутского государственного Технического университета, (кафедра культурологии). Сертифицированный психолог (сертификат Профессиональной лиги психотерапевтов ПЛП). Автор ряда работ по теории визуальной культуры и психологии дизайна, участник международных конференций. Стаж научный - 15 лет, педагогический - 15 лет. Меерович Марк Григорьевич. Архитектор, дизайнер. Кандидат архитектуры. Член Союза Архитекторов России. Член Союза Дизайнеров России. Автор печатных работ в области истории архитектуры Восточной Сибири, теории архитектуры и дизайна. Участник международных конференций по архитектуре и дизайну. Доцент Архитектурного факультета ИрГТУ, ведущий преподаватель специальности "Дизайн интерьера". Стаж научной работы - 21 год, педагогический стаж - 17 лет. Полные иллюстрированные тексты этой и других не менее интересных статей находятся на сайте "Культура Приангарья" - в разделе "Статьи, Мнения, Анализ" |
| Вынесите вперед |
|
Пользователи интернет не любят копаться в сайтах, если только они не зашли специально для этого. Заниматься раскопками долго и муторно, конечно, проще этого не делать вовсе - тогда и проблем становиться значительно меньше. Если вы взгляните на логи своего сервера, то обнаружите, что многие посетители не углубляются в ваш сайт далее чем на одну-две страницы. Поэтому, если вы используете двойное или тройное вложение для каких-либо своих важных страниц, то рискуете тем, что мало кто до них доберется. Для того чтобы заинтересовать посетителей, добиться от них осмотра значительной части сайта попробуйте сразу запустить их на нужные вам страницы. Разместите на титульной (или другой входной) странице крупную ссылку на нужные вам материалы и вы увидите, как посещаемость этих страниц подскочит в несколько раз. Для того, чтобы ссылка имела большую эффективность оформите ее, как "Ссылку дня" или "Обязательно посетите". Если на вашем сайте большой процент повторных посещений, то лучше поставить генератор случайного текста, который будет подставлять случайную ссылку (из тех, что вы сами заранее определили) при каждом новом запросе страницы. По действию - это похоже на баннерную систему (см. совет "Делаем простую ротацию" http://www.mymoney.ru/news/newsletter13.shtml#z3 ) только с текстовыми ссылками - очень получается удобная вещь. Скрипт для организации текстовой ротации можно взять на сайте CGI-resources |
| Полезные ссылки |
|
Среди всех подобных сервисов - этот самый мощный. Бесплатная регистрация страницы в более чем 1000 поисковых машинах. Огромный список мест для рассылки просто поражает воображение - его порядок сравним с тем количеством сайтов, которое средний пользователь посещает за год. Онлайновый платеж по кредитной карте, как известно, состоит из двух частей. Во-первых, проверки собственно существования такой карты, а во-вторых, уже проведения самого платежа. Чтобы не платить за проверку карты стороннему провайдеру, можно скачать (не бесплатно, конечно) небольшую программу, которая сама свяжется с процессинговым центром и проверит требуемую карту автоматически и бесплатно. Скрипт.ру - пока еще редкий сайт - русскоязычная коллекция скриптов для сайтов. Здесь можно найти как Java, так и CGI скрипты, а также ссылки на полезные ресурсы и другие коллекции. Сайт существует при студии Land, гостевыми книгами которой обзавелась изрядная часть домашних страничек в Рунете. |
| Объявление |
|
Вы хотите публиковаться?! Если вы пишете статьи, если вы считаете, что они интересно, талантливо написаны, если ваша любимая тематика - интернет, то мы сработаемся! Присылайте свои статьи и, возможно, они будут опубликованы в этой рассылке, выходящей тиражом более 5000 экземпляров в неделю! Присылайте статьи почтой с пометкой "статьи в рассылку". Публикуя в этой рассылку интересные и познавательные статьи, вы получаете благодарную аудиторию, состоящую из специалистов, и можете завоевать себе лестную репутацию эксперта. |
| Интересное | |
|
|
| Реклама | |
|
|
| Проекты | |
|
|
| Реклама | |
[an error occurred while processing this directive] 
[an error occurred while processing this directive]
|
|
| Прочее | |
|
Copyright © Федор Вирин