Технология проектирования веб-сайтов

Графический дизайн

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

Основные принципы компоновки

1. Принцип лаконичности. Графическое изображение должно содержать лишь те элементы, которые необходимы для передачи существенной информации, точного понимания ее значения. Это создает необходимый зрительный акцент на основных композиционных элементах. Лишние, затемняющие детали не должны присутствовать на изображении.
2. Принцип обобщения. Основные формы графического изображения не следует излишне дробить, включая в них элементы, обозначающие несущественные детали изображаемых объектов, – их форма должна быть рационально обобщена.
3. Принцип унификации. В пределах всей мультимедийной электронной информационной системы символы, обозначающие одни и те же объекты и явления, должны иметь единое графическое решение.
4. Принцип акцента на основных смысловых элементах. Выделять размерами, формой, цветом следует лишь те объекты, которые наиболее существенны для восприятия передаваемой информации. В отдельных случаях допустимо даже нарушение пропорций между размерами символов и изображаемых ими реальных объектов.
5. Принцип автономности. Части графического изображения, передающие относительно автономные (самостоятельные) сообщения, следует четко обособить и четко отграничить от других частей.
6. Принцип стадийности. Если процесс предоставления информации разбит на несколько стадий, на каждой из них должен выбираться состав сообщений, отображаемых на данной стадии. Разделение информации способствует ее последовательному восприятию.
7. Принципы дидактики. При последовательном, постадийном предоставлении информации следует использовать основные принципы дидактики: от простого к сложному и от известного к неизвестному.
8. Принцип использования привычных ассоциаций и стереотипов. В графических изображениях преимущество нужно отдавать устойчивым, привычным ассоциациям между символами и отображаемыми ими объектами и явлениями, а также стереотипным реакциям на определенные символы и сигналы. Везде, где это возможно, надо применять не абстрактные условные знаки, а символы, привычно ассоциирующиеся с соответствующими объектами и явлениями.

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

Набор средств, которыми располагает дизайнер (т. е. "инструментов дизайнера"), включает в себя такие, как согласование части и целого, симметрия и асимметрия, метр и ритм, обрамление, контраст и нюанс, пропорции, акцент (ударение), масштаб, цвет, фактура. Эти средства позволяют сделать композиционное решение целым, гармоничным.

Композиционная завязка состоит из определения целого и его частей, составления иерархии частей и деталей по их важности для организации восприятия, выбора главного и вспомогательных композиционных центров.

Важным условием завершенности композиции является уравновешенность ее частей относительно главного центра.

Поиск равновесия осуществляется по-разному в симметричных и асимметричных композициях.

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

Кроме того, ось симметрии может и существовать, но визуально не восприниматься – например, если в горизонтальном ряду одинаковых предметов, расположенных на равных расстояниях, число предметов превышает 7.

В асимметричных композициях задача уравновешивания значительно сложнее. Иногда оно достигается концентрическим расположением символов вокруг единого геометрического центра, иногда – вводом дополнительных символов, иногда – цветовым решением (например, использованием того факта, что цвета могут восприниматься как "легкие" и "тяжелые").

Глаз наблюдателя в процессе поиска требуемых элементов изображения совершает не хаотические, а упорядоченные движения, состоящие из горизонтальных и вертикальных смещений (для европейца эта упорядоченность выступает в виде "слева направо" и "сверху вниз"). Количество этих перемещений должно быть минимальным.

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

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

Прослеживание кривой линии также имеет траекторию, состоящую из горизонтальных и вертикальных отрезков, дающих в целом ломаную линию.

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

В теории композиции известно два вида закономерностей повторности элементов – метрическая и ритмическая.

Метрическая закономерность, или "метр", основана на равномерном чередовании одного или нескольких элементов.

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

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

Ритм могут создавать линии, имеющие одинаковый угол наклона (в том числе – горизонтальные и вертикальные) или выходящие из одного центра, концентрические круги, четкие группы символов, если эти элементы чередуются через одинаковые или закономерно изменяющиеся интервалы.

Завершенность ритмического строя элементов зависит от того, как "остановлен ритм", т. е. как выполнены концы ряда. Ряд нельзя обрывать случайным образом. Поскольку ритмический ряд в графическом объекте можно читать как слева направо, так и справа налево, ритмический ряд должен быть завершен и слева, и справа.

При большом числе графических элементов метр приводит к монотонии, затрудняет обнаружение требуемых элементов. Ритм дает более интересные композиционные возможности.

Обрамление изобразительной поверхности графического объекта и характер изображения у его краев влияют на то, как воспринимается данный графический объект – как самостоятельный, замкнутый, автономный зрительный объект или как один из элементов какого-то комплекса.

В первом случае четкая зрительная ограниченность позволяет сосредоточить внимание наблюдателя на выводимом сообщении.

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

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

Под нюансом, или нюансным отношением, понимаются незначительные отличия между однородными свойствами.

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

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

Обычно нюанс и контраст одновременно оба присутствуют в композиционном решении, поскольку они подчеркивают и усиливают друг друга. Нюанс и контраст могут переходить друг в друга, придавая изображению динамичность.

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

Контрольные вопросы

1. От чего зависит эффективность веб-представительства фирмы?
2. Чем определяется авторитетность сайта?
3. Охарактеризуйте основное назначение web-mastering.
4. Чем можно привлечь внимание к веб-сайту?
5. Как удержать внимание на сайте?
6. Назовите возможные экономические выгоды предприятия от использования сайта.
7. Какие виды страниц существуют на веб-сайте?
8. Дайте определение основному назначению кадра, выводимого на сайте.
9. Что характеризует целевых посетителей сайта?
10. Перечислите состав работ, выполняемых при концептуальном проектировании веб-сайта.
11. Покажите наиболее информативную часть экрана и охарактеризуйте состав информации в этой части.
12. Как не допустить информационного пресыщения экрана?