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

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

Оглавление:
  1. Симметрии в дизайне
  2. Примеры симметрии в реальном дизайне
  3. Чуть нарушение симметрии
  4. Асимметрия
  5. Асимметрия в дизайне сайта
  6. Заключение

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

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

На рисунке фигуры симметрично разделены на две одинаковые части
На рисунке фигуры симметрично разделены

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

Разделить макет веб-страницы по центру на одинаковые элементы
Разделить макет веб-страницы на половину

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

Радиальная симметрия круговая схема
Круговая схема, которая является симметричной

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

Трансляционноя симметрия в дизайне
Трансляционная симметрия дублировать его под углом 45 ° без поворота

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

Трансляционняй симметрия для квадратов разных размеров
Квадраты с каждым разом становятся больше потому что они как бы ближе
к меню ↑

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

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

Симметрия в дизайне сайта пример размещения
Примеры симметрии в реальном дизайне веб-сайта

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

Блоки симметрии в дизайне веб-сайта
Блоки без содержания которые составляют генеральный план макета
к меню ↑

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

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

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

Не пропорциональные блоки симметрии в дизайне сайта
Нарушение симметрии с изображениями создает более интересную планировку
к меню ↑

Асимметрия

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

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

Золотая модель соотношения
Получена золотая средина от общей ширины

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

к меню ↑

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

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

Асимметрия в дизайне сайта иерархия содержания
Иерархия содержания и порядок в дизайне страницы веб-сайта

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

Пример асимметрии в дизайне сайта
Реальный пример сайта с асимметрией в дизайне
к меню ↑

Заключение

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