Сегодня:
Блог: "Основы сайтостроения и веб дизайна"
сайтостроение

Переход на: Главная / Веб дизайн /

Композиция в веб дизайне. Принципы и правила построения.

АвторАвтор: aklychin

Дата добавленияДата добавления: 19.02.2017

Число просмотровЧисло просмотров: 5839


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

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

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

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

Что такое композиция в веб дизайне?

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

Композиция в веб дизайне. Принципы и правила построения

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

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

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

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

Принципы композиции в веб дизайне.

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

1. Пропорции.

Здесь стоит остановиться на размерах модулей составляющих композицию в веб дизайне. Определяя высоту и ширину модуля, стоит придерживаться правила золотого сечения. Соотношение размеров модуля должно составлять 1,68. Это может быть соотношение высоты к ширине, так и наоборот, но в любом случае при делении двух этих параметров блока, результат должен быть приближенный к 1,68. Блоки (модули) с такими размерами являются наиболее гармоничными и определяющими в общем балансе веб дизайна.

Принципы композиции в веб дизайне.

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

2. Баланс.

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

3. Контраст.

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

4. Направление внимания.

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

5. Масштаб.

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

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

Правила композиции в веб дизайне.

Правила композиции в веб дизайне.

Построение композиции в веб дизайне требует выполнения определенных правил, которые основываются на опыте многих поколений. И так, основные правила:

  • 1. Правильный подбор цветовой гаммы для композиции страницы сайта;
  • 2. Правильное расположение элементов. Помните о зонах внимания;
  • 3. Наполнение странички. Не загромождайте ее множеством элементов;
  • 4. Визуальная иерархия. Направляйте взгляд пользователя на основные части веб дизайна;
  • 5. Целостность композиции. Помните о соподчинении всех элементов;
  • 6. Равновесие элементов. Помните о балансе и пропорциях в веб дизайне;
  • 7. Правило симметричности, которое основывается на:
  • • Симметрии (строгость, спокойствие, классицизм);
  • • Асимметрии (движение, выразительность);
  • • Диссимметрии (порядок, покой).

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

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

Поделиться

Добавьте Ваш комментарий и оцените статью:

+ Добавлять комментарии и оценивать статью могут только зарегистрированные пользователи. Если Вы регистрировались, то просто авторизируйте свой аккаунт.


Комментарии к данной статье:


Подписаться на обновления блога

монетизация сайтаРеклама
заработок на сайтеПомощь

Понравился проект?

Внесите вклад в его развитие, пожертвовав любую сумму на один из кошельков:

Z255632435111

R174106546724

Деньги пойдут на оплату серверов, зарплату авторам уроков и развитие ресурса.

В примечании к платежу укажите Ваш email или логин на нашем проекте.

Администрация.

Статистика блога:

Статей: 107

Комментариев: 8

Зарегистрировано: 15

Все права защищены сopyright © Блог - "Основы сайтостроения и веб дизайна" 2012 - 2017