По мотивам http://www.digital-web.com/articles/principles_and_elements_of_design и http://www.digital-web.com/articles/principles_of_design/
Веб-дизайн - относительно новая форма дизайна. И как любой дизайн, веб-дизайн имеет свои отличительные особенности. В частности он очень сильно завязан на средства, для которых он создаётся: разрешение экрана, цветовое пространство, сжатие графических изображений и т.д. И веб-дизайнер часто, погружаясь во все эти техничсекие детали, не замечает аспектов более глобальной картины, относящийся к дизайну вообще. Ведь веб-дизайн эволюционировал на протяжении многих веков из классического дизайна, впитывая в себя все его принципы: от печатного дизайна до дизайна интерьеров. И даже ещё глубже: дизайн картин, дизайн скульптур, дизайн литографий... Сейчас мы поговрим о принципах дизайна, то есть о размещении объектов, элементов дизайна, об их композиции.
Баланс
Баланс - это равновесие изображения с точки зрения нашего взгляда на него в соответсвии с физической структурой (масса, сила тяжести и т.д.) каждого отдельного элемента. Баланс может быть симметричным (формальный) и ассиметричным (неформальный). При симметричном дизайне вес композиции равномерно распределён по цетральной вертикальной или диагональной оси. Иногда по обеим. Симметрия называется приблизительной, если выражается похожими, но не идентичными формами. Когда вес распределён вокруг центральной оси, то дизайн называется радиальным. При ассиметричном дизайне, как вы догадались, вес распределён не равномерно. То есть в нём используются объекты разных размеров. Чаще всего бывает, что используется один доминантный элемент и несколько второстепенных, уравновешивающих дизайн.
 |  |  |  |
| Горизонтальная симметрия | Приблизительная горизонтальная симметрия | Радиальная симметрия | Ассиметрия |
Например, Centerfold, один из дизайнов Zen Garden, использует приблизительную горизонтальную симметрию. Может быть, правая часть страницы выглядит немного тяжелее, но в целом дизайн сбалансирован. Это достигается большим количеством пространства белого цвета. Кроме того графический текст ненавязчив. Все элементы гармонируют и с фоном, не становясь доминантными ни в каком месте. Редкие зелёные оттенки используются лишь для выделения навигационных элементов.
Ритм
Ритм - это повторение или чередование элементов в соотсветсвии с заданным интревалом (очередностью). Ритм создаёт ощущение движения и является средством для создания паттерна или текстуры.
Bиды ритма:
| Регулярный | Плывущий | Прогрессивный |
 |  |  |
| Интервалы между элементами и сами элементы похожи между собой в размере | Имеет органическую природу | Последовательность форм показывается, как прогрессия шагов |
Например, дизайн Manhattan Edition использует регулярный ритм в верхней части страницы и в правой навигационной панели. Это создаёт ощущение движения в "небе" над городом и вообще добавляет дизайну текстурирования, которое дополняет текстуру зданий и заголовков. Текстурирование контрастирует с общей гладкостью чёрного фона и мягким свечением вокруг текстовой информации.
Пропорции
Пропорция - это сравнение размеров или распределние форм. Это отношение между элементами, выражающееся в масштабе. На примере ниже легко заметить, что более крупные элементы привлекают внимание, а мелкие отходят на задний план.
Дизайн Musem - хороший пример того, как пропорция может быть использована для привлечения внимания на специфические элементы страницы. Посмотрите на эти маленькие фигурки, которые присутствуют в интерьере музея. В шапке странице фигурка человечка уводит взгляд сквозь проём в стене. Проматывая страницу вниз, вы увидите ещё больше таких силуэтов, которые опять будут привлекать ваше внимание к содержимому, возле которого они присутствуют. У вас также возникнет ощущение, что человечки смотрят на картины в музее. А вы, глядя на них, будете попадать взглядом на содержимое.
Отсутствие ярких цветов в этом дизайне помогает ещё лучше сфокусироваться на структуре страницы, что ещё больше подчёркивает пропорцию композиции. Использование линий и форм для создания 3D-иллюзии помогает привлечь взгляд на нужные области страницы.
Это фиксированный центрированный дизайн шириной в 762 пикселя.
Преобладание
Говоря о преобладании, мы имеем в виду различные степени акцентирования в дизайне. Преобладание определяет визуальный вес композиции, задаёт пространство и перспективу и очень часто направляет взгляд на элементы, которые нужно видеть в первую очередь. Существуют три уровня преобладания (важности) элементов страницы по сравнению с другими:
- Доминантный - элемент имеет наибольший визуальный вес и акцент, выступает на первом плане страницы
- Суб-доминантный - элемент имеет вторичный акцент и находится на среднем плане композиции
- Второстепенный - элемент обладает наименьшим визуальным весом и акцентом, находится на заднем плане композиции
наприемер, на картинке ниже деревья - доминантные элементы, домик на холме - суб-доминантный, гора - второстепенный.
ZenGarden дизайн Прелестный розовый использует принцип преобладания, чтобы акцентировать отдельные элементы страницы. Самая правая колонка, где находится всё смысловое содержимое страницы, является доминантной. Это широкая область яркого цвета, использующая простой крупный заголовок контрастного цвета и модный штрихованный фон. Центральная колонка - субдоминантная часть страницы. Она так же заметна и привлекает внимание, но использует нейтральные цвета и меньший размер шрифта. Наконец, левая колонка с логотипом и вводным текстом является второстепенной, она отходит на задний план страницы и нашего внимания.
В общем, хорошим тоном для веб-дизайна является акцентирование внимания на содержание страницы и навигацию. Так же заметим, что в данном дизайне доминантная часть не теряет своё преобладание ни при каком размере окна браузера, но аккуратно подстраивается под него. Сам же дизайн выровнен по левому краю.
Единство
Концепция единство описывает отношения между отдельными частями и всей композицией. Имеются в виду аспекты некого дизайна, которые необходимы, чтобы представить композицию, как единое целое или разбить её, придав ей вид разнообразности. Вот эти аспекты:
- Замыкание
Замыкание - это заполнение при отсутсвии информации. В примере ниже мы заполняем отсутсующие части изображения в своём воображении для того, чтобы получить замкнутую фигуру:
- Непрерывность
Непрервность здесь подразумевается, как непрерывность движения взгляда: мы смотрим в неком направлении до тех пор, пока что-то более доминантное не перехватывает нах взгляд на себя. На примере ниже, взгляд будет следовать по направлению дороги. На картинке нет других доминантных объектов, но мы можем воспользоваться этой концепцией, чтобы показать посетителю сайта нечто важное:
- Схожесть и выравнивание
Объекты одинакового размера формы и цвета хорошо группируются и складываются в некий более общий объект. Например, на картинке ниже объекты в левом верхнем углу хорошо сгруппированы в некую аккуратную фигуру, чего не скажешь про объекты в правом нижнем углу:
Другие аспекты дизайна
Контраст - динамический конфлик между элементами дизайна. Позитивное и негативное пространство - непосредственное соседство объекта (позитивное пространство) и его фона (негативное пространство). Правило третей - объекты, находящиеся на расстоянии 1/3 всей ширины или высоты страницы, привлекают внимание больше всего. Визуальный центр - чуть выше и чуть правее математичского центра есть естественное расположение визуального фокуса. Цвет и типография (заслуживает отдельной статьи).
Интернет-ресурсы по теме
- Art, Design, and Visual Thinking by Charlotte Jirousek
- Gestalt Design and Composition by James T. Saw
- Society for Gestalt Theory and its Applications
- Graphic Design Basics
- Introduction to the Principles of Design by Jacci Howard Bear
Книги
- Design Basics by David Lauer
- The Elements of Graphic Design by Alexander W. White
- Principles of Two-Dimensional Design by Wucius Wong
- Grid Systems in Graphic Design by Josef Muller-Brockmann
- Design Principles and Problems by Paul Zelanski, Mary Pat Fisher
- A Primer of Visual Literacy by Donis A. Dondis
- History of Art by Anthony F. Janson
- A History of Graphic Design by Philip Meggs
- The Non-Designer's Design Book by Robin Williams
- Geometry of Design: Studies in Proportion and Composition by Kimberly Elam
0 коммент.:
Отправить комментарий