Главным препятствием на пути каких бы то ни было попыток веб-композиции всегда была разноразмерность экранов. Для графического дизайнера, строящего композицию исходя из формата издания, это препятствие кажется непреодолимым. Но его можно обойти, если в буквальном смысле изменить точку зрения. Это позволит выявить несколько закономерностей и даже создать обоснованную композиционную классификацию сайтов.
Исходная идея такова. Экран — это окно. Когда люди смотрят в окно, они обычно вначале направляют взгляд в его середину. Вторая посылка: западные люди читают слева направо и сверху вниз. В результате исходная точка, с которой начинается просмотр сайта, назовем ее оптический центр, смещается от геометрического центра влево и вверх.
В результате некоторых наблюдений я пришел к выводу, что оптический центр делит экран по горизонтали в отношении примерно 5:11, а по вертикали – в отношении 1:4. Я, разумеется, не претендую, что у всех людей дело обстоит именно так; более того, это очень приблизительный подход, потому что он не учитывает разницу в пропорциях экранов. Более точным было бы геометрическое определение этой точки, которое бы увязывало ширину и высоту экрана (рис. 1).
Рис. 1. Из центра экрана (1) по левой диагонали отложить вверх четверть ее длины (2); затем провести горизонтальную линию вправо до края экрана (3) и линию к верхней границе экрана под углом 45 к горизонтали (4). Из вершины этой второй линии провести линию в левый нижний угол экрана (5). Искомая точка (6) будет лежать на пересечении этой линии с проведенной ранее горизонталью.
А теперь начинается самое интересное. Сместим диагонали экрана так, чтобы они пересекались в новом центре (это прием из книжной композиции). Возьмем прямоугольник с диагоналями, равными половине проведенных. Эта область экрана будет самой заметной. Из ее правого верхнего угла проведем линии влево и вниз — образуются две новых области, соответственно вверху и справа. Мы получили одну из типичных веб-композиций: посередине слева область основного контента, вверху главное меню, справа контекстная колонка (рис. 2) — именно так устроено, например, большинство блогов (рис. 3).
Рис. 2.
Рис. 3.
Композицию можно усложнить, определив оптические центры для каждой из образованных областей и затем повторив деление еще раз. Такая композиция может подойти для сайтов со сложной структурой.
Другой вариант композиции мы получим, если сразу разделим экран из оптического центра, таким образом позволяя глазу иметь лучший обзор всего сайта вместо того, чтобы сразу фокусироваться на контенте. В этом случае мы видим сайт с верхним блоком (заголовок, баннер, меню…), главным меню слева, блоком контента справа и, если поделить оставшееся пространство еще раз, с дополнительной колонкой справа. Думаю, эта композиция является одной из самых распространенных (рис. 4-5).
Рис. 4.
Рис. 5.
Полученные области можно поделить дальше и получить что-нибудь ну очень сложносочиненное (рис. 6). Потом. Если захочешь 🙂
Рис. 6
13 replies on “Экспериментальная теория веб-композиции”
Весьма стройная теория!
Хотелось бы увидеть не только объяснения существующих, а и предложение новых композиционных схем 😉
Честно говоря, сразу на старте построений, смотрят «в середину окна» – уже ошибка, (все, что пишу дальше, естественно не подразумевает: «А! Ошибка!», просто мнение. Личное). Я попробовал посмотреть в разные окна – и оказалось… Начинаю просмотр я, всегда с самого яркого объекта.
Просмотр этой веб-страницы я, разумеется, начинаю с разноцветных квадратиков.
Вы не ушли от формата! Мне кажется, имеет смысл пробовать выстраивать «систему» не от экрана и его середины и др. участков – надо начинать, допустим, с того же яркого объекта. Произвольного формата. А потом окружать его линиями, сеткой и т.д.
Как-то так…
Иван, если яркий объект в окне уже есть, то, само собой, он будет сильно определять всё дальнейшее.
Фокус можно действительно поместить где угодно и от этого плясать. Но это при условии, что на странице практически нет текста. Как только появляется прямоугольник текста, предназначенный для чтения, формат экрана начинает работать.
Вот посмотрите — даже на сайте ниспровергателя типографских традиций яркое пятно именно в этом месте 🙂
Ага. Имеется.
Пришла в голову следующая мысль. Эксперимент.
Исходные постулаты:
изначально: сетки, форматов нет
размерность, сетку создаст самый яркий фокус-объект
самый яркий объект не выбирается из существующих, а назначается. То есть – делается чисто математическое преположение. Дано – что «Это» самое яркое
на этапе постороения какой-либо сетки текстовый блок заменяется на яркий красненький напаример прямоугльничек, для удобства работы
Вокруг него выстраивается окружение
После того как окружение готово – прямоугольник заменяется на текст
Что получим в итоге? Не знаю что, но попробовать можно…
не только самый яркий элемент притягивает внимание, но и, например, аннимированный (flash)
Ой как сложно-то все 🙂
На мой взгляд расуждать о том куда человек смотрит при открытии сайта, уже не правильный подход…строить графики на мой взгляд (подчёркиваю на мой) не имеетт смысла т.к. хороший дизайнер отличается от плохого тем что он умеет сконцентрировать внимание потребителя на нужном объекте. Этого можно добиться разными способами: цветом, размером, рядом находящимися объектами…безусловно в этом списке присутствует и местораположение. в 8 из 10 случаев человек начинает просмотр текстового сайта с верхнего левого угла опускаясь по диагонали в правый нижний угол. Наверно вы со мной согласитесь что время текстовых, хтмл сайтов уходит в прошлое…новое слово в веб-дизайне сказано флешем. Флеш – это новое слово, новые возможности и новый подход к веб-дизайну в целом. А для флеша чертить график не нужно!!) Если правильно построить флеш проект у поситетеля узла не возникнет желание беспорядочно бороздить глазами просторы своего монитора в поисках нужной информации. На практике всё дело заключается в умении…а теория вещь не плохая, даже нужная.
Напротив, сейчас как раз период развития текстовых сайтов с минимумом графики. Посмотрите на 10 самых успешных проектов, посмотрите на пресловутые сайты из серии «Веб 2.0». Где там флэш?
Про «новое слово от флэша» твердят уже года четыре, если не больше. К счастью, интернет не стал насквозь флэшевым.
Флеш хорош как функциональное расширение для показа чего-то, чему положено двигаться – мультиков, роликов, баннеров и т.д. – и для случаев, где нужен реальный графический интерактив. В качестве инструмента для создания сайтов он, я подозреваю, никогда не выйдет из разряда мулек.
Ничего не слышал если чесно о новой тенденции по созданию “безликих сайтов”, т.е. сайтов без лица, души и … графики. Знаю одно…сайт это одно из средств современного маркетинга, а один из принципов маркетинга, если ты запоминаем – ты успешен. Дотигнуть того что бы тебя запомнили с “безликим сайтом” высший пилотаж,наверно там текст должен быть серо-буро-малинового цвета и разметка какой-нибудь чудной))…тогда тебя запомнят, но не подумайте что на этот сайт зайдут второй раз что бы восхитится ещё раз талантом дизайнера.
[…] “Стимулятор Роста” – личный блог Виталия Колесника. На этот блог я попал по ссылке на статью о Веб-композиции. Прочитав ее я собственно и решил занести этот блог в избранное, надо надосуге его почитать, может почерпну для себя что нибудь еще интересное! […]
Флеш – это зло. Попробуй найти хоть одну флешку (не рекламу) на серьезном сайте. Конечно, есть сайты специально сделанные на флеше, но только для того, чтобы показать свою крутизну или привлечь молодую публику. Информативных сайтов на флеше я не знаю.
2vit: проверяла сегодня утром свое восприятие. постаралась отвлечься от твоей статьи и наугад открыла дюжину знакомых и не знакомых мне сайтов. наблюдения такие: сначала всегда смотрю в центр. затем либо на шапку (видимо, в поисках смысла – о чем это всё?), либо влево ( туда, видимо, где ожидаю найти то, чем управлять), вправо – практически никогда, только мельком (кроме старой версии сайта Грамота.ру, на котором все ценные поля ввода слов для проверки находились справа, но они уже исправились 😉 в общем, насчет “взгляда в окно” и “слева направо” всё верно. над остальными идеями нужно еще поразмыслить.
2screamge
я, естественно, не против графики, подчеркивающей суть веб-сайта, но имхо, душа сайта – не только визуал, и во второй раз заходят не только и не столько ради восхищения талантом дизайнера. я обычно возвращаюсь ТОЛЬКО туда, где ценно содержание, а это в первую очередь текст: интересные идеи, интересные наблюдения, настрой, переданный словами. картинки могут это подчеркивать, да, и прочие детали оформления тоже, то есть форма важна, но никак не важнее содержания.