Принципы и элементы дизайна (часть 2, выпуск 10)

По мотивам http://www.digital-web.com/articles/principles_and_elements_of_design и http://www.digital-web.com/articles/elements_of_design/

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

Что такое элементы дизайна?

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

Точка

Точка - это элемент дизайна, который имеет точное месторасположение, но не размеров. Однако, будучи использованными группами, точки могут быть интерполированы человеческим мозгом в фигуры (см. Замыкание).

Точка	Ряд точек интерполируется в линию	Замыкание точек в треугольник

В качестве примера рассмотрим Zen Garden дизайн sub:lime, который использует в шапке пикселизированное изображение двух половинок лайма. Затем суть этого мотива повторяется в остальном дизайне страницы. В пикселизированной картинке каждый пиксель - это точка. Но наш мозг объединяет их и интерполирует в изображение двух половинок лайма. Кроме того, точка расширяется в диапазон цветов, которые используются для разделения областей страницы на смысловые части. А линии (см. ниже) используются в заголовках.

Этот дизайн является хорошим примером того, как элементы дизайна используют друг друга для создания единой композиции. Дизайн имеет фиксированную ширину в 715 пикселей и центральное выравнивание.

Линия

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

Органика	Жёсткость	Разный вес

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

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

Форма

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

Контурная форма	Пространственная форма

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

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

Текстура

Текстура - это физическая структура формы или её поверхности. Иными словами, текстура - это материал, из которого что-то сделано. Текстура является производной от формы, линии и точки. Это визуальный и тактильный феномен.

Цвет

Цвет - это реакция глаза на электромагнитные, находящиеся в цветовом диапазоне. Цветовой зиапазон - это свет, который мы видим в окружающей среде. Невооружённый человеческий глаз воспринимает волны длиной 400-700 нанометров (нм), где 700нм - это красный цвет, 400 нм - фиолетовый цвет.

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

• Тон (Hue) - положение цвета на колесе. Термины "красный", "сине-зелёный", "розовато-лиловый" определяют тон данного цвета.
• Яркость (Value) - тёмность или светлость данного цвета. Его близость к чёрному или белому.
• Насыщенность (Saturation) - интенсивность, уровень цветового сигнала. Более серый цвет имеет более низкую интенсивность.

Гармония цветов

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

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

Триадные - три цвета, равноотстоящие на колесе.

Комплементарные	Аналогичные	Триадные

Цветовые пространства

Цвета обычно организованы в иерархии, на основании того, как они смешаны друг с другом. И цветовое пространство помогает определить, как они смешаны. Существуют два типа цветовых пространств:

• Субтрактивный (вычитание цветов): традиционное цветовое пространтсво, которое мы используем, когда говорим о цвете. Он основан на пигменте цвета, как в изобразительном искусстве. Пигмент воздействует на длину цветовой волны. Отсутсвие пигмента - белый цвет. Смешение всех пигментов - чёрный. Основные цвета: красный, жёлтый, зелёный. Вторичные цвета: оранжевый, зелёный, филетовый.
• Аддитивный (сложение цветов): электронное цветовое пространство. Основано на количестве света. Свет отображается монитором. Отсутсвие света - чёрный. Присутствие всего наличного света - белый. Основные цвета: красный, зелёный, синий. Вторичные цвета: жёлтый, фуксин, голубой.

Субтрактивное цветовое пространство	Аддитивное цветовое пространство

А сейчас рассмотрим пример опять из CSS Zen Garden. В частности, El Collar de Tomas может покаться оформленным триадными цветами, но в реальности в нём были использованы аналогичные цвета. Использованы оттенки красного, жёлтого и оранжево с серо-голубым в качестве контраста. Их яркость снижена до среднего значения, отчего жёлтый кажется почти зелёным. Вдобавок он окружён элементами красного и оранжево цвета, из-за чего эффект триадности усиливается. В результате мы имеем очень мягкий, яркий, богатый на цветовую гамму дизайн, который базируется всего лишь на трёх рядом лежащих оттенках.

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