Критерии качества веб-ресурса

 

Обычно выделяют следующие критерии качества веб-ресурса:

· доступность;

· ориентация на пользователя;

· реактивность;

· многоязычность;

· прозрачность;

· эффективность;

· совместимость;

· управляемость;

· сохранность;

· производительность;

· посещаемость.

Основы дизайна (пространственные отношения, форма, текстуры, шрифты и тексты)

Текст и фон

Элементы, без которых не обходится ни одна web-страница, — фон, текст и гипертекстовые ссылки — ставят задачу гармонизации трех (или четырех, если учитывать цвет «посещенных» ссылок) цветов, занимающих в композиции различающиеся площади и выполняющих разные функции. Есть немало страниц с минимумом графики и достаточно ординарной композицией, которые привлекают и запоминаются своей цветовой гаммой.

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

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

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

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

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

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

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

Пространственные отношения элементов

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

Размер

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

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

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

Пропорции

Излюбленное соотношение архитекторов и художников заключено в формуле: b / a = a / ( a + b ), или b = 0, 618a.

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

Подпишитесь на рассылку Pandia.ru!

Размещение

Все элементы композиции можно разделить на два типа:

· одноуровневые элементы

· разноуровневые элементы

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

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

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

Плотность

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

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

Форма

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

· состоящие из прямых линий (вертикальные и горизонтальные линии, прямоугольники)

· криволинейные (в форме которых выделяется окружность или ее часть)

· бесформенные (аморфные) элементы

Прямые

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

Прямоугольники

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

Круги и закругления

Круг - самодостаточная фигура, его трудно удачно вписать в композицию. Координировать круг с другими элементами не просто, однако можно взять только часть окружности — дугу. Концы дуги проще объединить с другими элементами: ведь появляются еще две дополнительные точки. Можно объединить окружность и прямоугольник — получится прямоугольник с закруглениями вместо углов. Эта фигуру легче внедрить в композицию.

Кривые Безье

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

Рис 5. Кривые Безье

Текстуры

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

Плоский цвет

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

Геометрические текстуры

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

Фотографические текстуры

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

Материальные текстуры

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

Получить полный текст

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: