Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Симметрия в веб-дизайне Категория: Веб-дизайн
Название: Симметрия в веб-дизайне
Дата добавления: 21-09-2012
Раз просмотрено: 1095
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

Симметрия в веб-дизайне

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

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

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

Естественная симметрия

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

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

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

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

Горизонтальная симметрия

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

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

Пример горизонтальной симметрии на сайте

Пример горизонтальной симметрии на сайте

Приближенная горизонтальная симметрия

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

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

Пример приближенной горизонтальной симметрии на сайте

Пример приближенной горизонтальной симметрии на сайте

Радиальная симметрия

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

Пример радиальной симметрии на сайте

Пример радиальной симметрии на сайте

Вертикальная симметрия

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

Пример вертикальной симметрии на сайте

Пример вертикальной симметрии на сайте

Цветовая симметрия

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

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

Пример цветовой симметрии на сайте

Заключение

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

Это интересно: «Рисуем диаграмму с помощью Google Charts».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.