Симметрии в дизайне сайта

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

Симметрии в дизайне сайта

Симметрия

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

Симметрия в объектах
Симметрия в объектах

[yandex_direct]
Симметрия может относиться к расположению элементов. Если вы разделите дизайн страницы на половину, и на ней есть одинаковые элементы с обеих сторон, этот макета является симметричным. На изображении ниже, 2 колоны, и заголовок по центру. Этот проект является симметричным.

Дизайн Симметрия в дизайне страницы
Симметрия в дизайне страницы

А также, есть и другие типы симметрии. Вы можете наблюдать симметрии в разных местах. Вы можете даже найти симметрию в круговой конструкции.  Радиальная симметрия , когда объект вращается по кругу с эквидистантным шагом. Другими словами, когда что-то вращается по кругу, чтобы сформировать симметричный дизайн. На приведенном ниже рисунке квадрат, который был повернут по кругу с шагом в 20 °. В результате круговая схема, которая является симметричной.

Симметричная круговая схема
Симметричная круговая схема

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

Трансляционноя симметрия
Трансляционноя симметрия

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

Трансляционной симметрии 2
Трансляционноя симметрия разных размеров

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

Симметрия встречается во всех типах дизайна. Встречается и в Интернете. Вот некоторые примеры симметрии в дизайне сайта.

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

Базовая схема Apple Store онлайн устанавливается на симметричную сетку. Если сложить макет Apple Store вниз по середине, он будет отлично совпадать. Уберите дополнительные элементы с сайта, и вы можете увидеть блоки, которые составляют генеральный план, смотрите ниже.

Блоки симметрии в дизайне сайта
Блоки симметрии в дизайне сайта

Чуть нарушение симметрии

Пример симметрии в дизайне сайта
Пример симметрии в дизайне сайта

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

Блоки симметрии в дизайне сайта
Блоки симметрии в дизайне сайта

Асимметрия

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

Одним из популярных способов использования асимметрии является включение  золотой пропорции  в вашем дизайне. Если вы создаете 2 — колонки, вы должны использовать золотую пропорцию, чтобы определить оптимальный размер и колонки для того, чтобы сделать их наиболее приятным для глаз. Соотношение выходит 1,6. Чтобы упростить эту концепцию, чтобы найти золотое сечение объекта, разделите его ширину или высоту на 1,6 и вы получите золотую пропорцию от общей ширины. Взгляните на золотую модель соотношения ниже.

Золотая модель соотношения
Золотая модель соотношения

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

Асимметрия в дизайне сайта

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

Асимметрия в дизайне сайта
Асимметрия в дизайне сайта

Ниже приведен скриншот из Twitter. Много раз, основным содержанием или самый большой раздел находится слева. Тем не менее, Twitter разместил основное содержание «твиты» с правой стороны.

Пример асимметрии в дизайне сайта
Пример асимметрии в дизайне сайта

В заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>