Библиотека программиста

Все, что необходимо начинающему и опытному программисту

Урок 29. Дизайн сайтов: примеры

В качестве примера посмотрим на дизайн сайта, предварявший выход операционной системы Windows версии Vista:

Что в нем хорошего?

Очень красиво. Непонятно, почему девушка (метафора красоты?), почему в поле (широкие возможности?), почему такой набор цветов, но красиво. Ролловерные эффекты на кнопках тоже красивые.

Что в нем плохого?

Логотип компании, встречающийся на странице 5 раз — это легкий перебор. В Opera некорректно обрабатываются цвета подчеркнутых ссылок. Часть текста сделана графикой — зачем? Страница очень долго загружается, как будто она сначала систему на подлинность проверяет.
Ролловерные изображения не прописаны в предварительной загрузке и начинают подгружаться, только когда наведешь мышь, а это смазывает эффект подсвечивания, которое при модемных скоростях происходит не мгновенно.
Очень много пустого места: композиция неудачная. Тянущуюся верстку в Microsoft не проходили. При небольших разрешениях поисковый блок уходит вправо за границу экрана и появляется горизонтальная прокрутка.

Что в нем неясно?

Какие-то неясные светлые цветные точки слева сверху от ссылок-изображений. Это мне напоминает времена 4-го Нетскейпа. Так и не понял, почему часть текста в заголовке набрана полужирным, а часть — светлым начертанием. Монитор на первой ссылке почему-то макинтошевский напоминает.

В данный момент больше всего нас интересует странная композиция. Текст, меню, логотип и дополнительные блоки сверстаны очень свободно, но непонятно: левая колонка высокая, текст посреди занимает минимум пространства, поисковый блок не двигается при изменении размеров страницы. Из-за этого образовалось большое количество пустого места справа и снизу от текста.

Правила композиции нельзя формулировать однозначно, потому что композиция — это бесконечный ряд вариантов сочетаний объектов, их количества, цветов и т. п. Одна из основных рекомендаций, которые можно применить к любой композиции, звучит примерно так: композицию следует организовывать так, чтобы у зрителя не возникал вопрос «почему?», касающийся самой композиции.

Почему тут пусто, а тут все забито мелкими деталями?
Почему рядом с неимоверно крупным объектом присутствует пара одинаковых мелких?
Почему тут все так симметрично, как в реальной жизни совсем не бывает?

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

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

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

Помимо симметрии, очень большое значение при дизайне и верстке любой композиции (шрифтовой, графической, на газетной полосе или вебстранице) приобретает выравнивание элементов, когда одна из сторон нескольких элементов располагаются по невидимой линии. Таких «кажущихся» линий на странице может быть несколько, и именно для этого в графических редакторах и программах верстки существуют вспомогательные линии — направляющие.

Опрятность и аккуратность в дизайне сайтов — это великое дело.

Если очень красивые картинки и симпатично сверстанный текст расположить на странице так, что глаз не сможет провести воображаемые вертикальные или горизонтальные линии, которые касались бы более одного блока, страница будет казаться сверстанной небрежно. Текст нужно верстать так, чтобы у него была хотя бы одна общая линия набора (именно поэтому тексты, выключенные от центра, кажутся сверстанными непрофессионально). Рассмотрим один пример (www.artlebedev.ru/kovodstvo, одна из версий):

А теперь проведем линии, и сразу поймем, почему страница кажется сверстанной аккуратно:

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

Существуют привычные, никак не задевающие человеческий глаз размеры и соотношения. Например, привычный коэффициент междустрочного интервала (а точнее, высоты строки) по отношению к высоте символов в строке — не более 1,2.

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

Но есть и другие «привычные размеры». Среди них — правило золотого сечения.
Правило заключается в том, что размер большего элемента так относится к размеру меньшего, как размер целого (сочетания этих двух элементов) относится к размеру большего.

В числах это выражается как 5:(3:2) или 8:(5:3). Например, общая ширина блока — 500 пикселей. В этом случае красиво для человеческого глаза будет такое деление колонок, когда ширина первой будет составлять около 300 пикселей, а второй — около 200 (или наоборот). Однако такое правило применяется не всегда и не всем оно кажется оптимальным. Скрытый смысл такого правила таков: оно создает динамику с равномерным ускорением или замедлением.

Динамика — не пустое слово для статичных, казалось бы, композиций. Человеческий глаз всегда двигается при изучении любых объектов, будь то текст (чтение) или картина (рассматривание). В силах создателя композиции — заставить глаза зрителя двигаться в нужном направлении.

Динамика на странице — это создание линии условного движения, или изменения. Например, динамику создает ряд блоков, каждый следующий из которых немного меньше предыдущего. В этом случае создание динамики прямолинейно: глаз автоматически выстраивает правило поиска. Есть динамика по чередованию цветов объектов, стилей и т. п. Расположение объектов «по прямой» вразброд, вне таких трудноуловимых правил оставляет впечатление случайно набросанных элементов.

Нужно сказать, что такие тонкости построения композиций, естественно, применимы не ко всем веб-страницам. Достаточно сложно реализовать динамику на странице, где присутствует только текст. Можно только добиться того, чтобы текст не выглядел монолитным кирпичом: разбить на абзацы, на главы.

В общем же случае для создания минимальной динамики на странице достаточно трех явно отделенных друг от друга элементов, при условии, что элементы по размерам будут соотноситься друг с другом как «большой — средний — маленький» (возможны варианты, когда играют роль не размеры, а, например, цвета: «насыщенный — средний — бледный»). Это правило работает в композиции настолько же безотказно, как сочетание черного, белого и красного цветов.

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

Потому что в композиции есть еще и понятие акцента.

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

<< Назад         В начало         Далее >>

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru