Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн

Статьи о дизайне   Портфолио дизайнера
Дизайн Форум


Про дизайн и web дизайн




Главная     Форум     Галереи




  Статьи о дизайне





  Web дизайн - теория




Основы композиции для web

Что такое композиция? Композиция - объединение отдельных графических элементов в единое целое. Композиция строится на взаимном соподчинении всех графических элементов.


Свойства графических элементов композиции.

1. Параметры формы графического элемента для web
Величина формы графического элемента
- определяется соотношением размеров по трем координатам
- оценивается по отношению к размерам человека или других форм или как соотношение величин элементов одной и той же формы

Выделяются два вида формы:
а. объем - характеризуется относительным равенством всех трех измерений
б. плоскость - определяется полной уменьшенностью размеров по одной из координат измерения


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


2. местоположение и ориентация графических элементов на страничке относительно друг друга

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


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


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


5. цветовая совместимость граф. элемента с окружением
Цвет
- свойство тел вызывать то или иное зрительное ощущение
- цвет может быть использован в качестве активного композиционного средства

Характеристики цвета:
- как цветовой тон (различные оттенки цвета)
- насыщенность (степень яркости цвета)
- светлота (отражающая способность цветовой поверхности)

Цветовые ряды:
1. черно-белый - в пределах от белого до черного цвета

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

3. ряды, идущие от цвета к черно белому тону - от зеленого к белому, от зеленого к серому, от зеленого к черному



Чемпионат мира по футболу 2018


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


Композиция

Хорошая композиция не позволяет произвести какие-то добавления или наоборот, что-нибудь убрать, так как это в свою очередь приведет к глубоким изменениям ее характера

Средствами композиции являются
линия, штрих, пятно (тональное и цветовое)
Линия обозначает средство, тон - вес, а цвет - качество

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

Тональное пятно
- тональное пятно всегда дается на фоне более светлом/темном, чем оно само, иначе пятно не будет читаться

Цветовое пятно
- цветовые контрасты строят основу выразительности композиции


Свойства и качества композиции

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

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

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

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

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

Уавновешенная симметрия
- определяется как симметричное расположение асимметричных элементов

Практическая часть

Структура web странички

Несмотря на тематическое разнообразие сайтов, их дизайн наряду с приемами оформления "для конкретного сайта" предусматривает ряд общих правил композиции, которые за много лет существования www стали привычны и понятны пользователю:

1. Шапка
Заголовок
Слоган
Телефон
Имиджевый образ
Меню навигации (по сайту)

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

3. Подвал
Копирайт
Адреса, телефоны
Счетчики и баннеры
Меню навигации (по сайту, по разделам сайта)


Организация шапки web страницы
<в планах...>

Организация основной части web страницы
<в планах...>

Организация подвала web страницы
<в планах...>

Клюев М. 2003.


  Смотри также:
Web дизайн
Макет не вышел с 1-го раза? Ну и что...
Web дизайн. Первые шаги. Теория web дизайна
1. Феномен упрямого заказчика
2. Составляем ТЗ на web-дизайн







Электронные книги о дизайнеЧМ 2018Гламурные картинкиГраффити галереяЯпония фотографииО путешествиях и странах, дешевые авиабилеты и отелиДизайн форум



    Rambler's Top100     Яндекс.Метрика  


Web дизайн и создание сайтов


Карта сайта       Наверх