—»     —»   Гештальт-психология применительно к веб-дизайну: принцип симметрии
  Раздел: Web-дизайн   Комментариев: 1  

Гештальт-психология применительно к веб-дизайну: принцип симметрии



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

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

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

Что такое симметрия?

Симметрию создают равновесие и пропорциональность. По-гречески "симметрия" значит "соразмерность" неких взаимосвязанных элементов. В веб-дизайне симметрией называется "гармоничная разнородность целого".

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

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

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

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

Трансляционная симметрия в веб-дизайнеТрансляционная симметрия в веб-дизайне
Anzfisheries

Трансляционная симметрия в веб-дизайнеТрансляционная симметрия в веб-дизайне
Foodily

Трансляционная симметрия в веб-дизайнеТрансляционная симметрия в веб-дизайне
Struck Apparel


Осевая симметрия

За счёт осевой симметрии создаётся так называемый "зеркальный" эффект - отражение элемента по вертикали, по горизонтали или по диагонали. Иными словами, в данном случае мы наблюдаем естественную симметрию. Отражение по горизонтали - самый популярный в дизайне приём.

Осевая симметрия в веб-дизайнеОсевая симметрия в веб-дизайне
Naks Food

Осевая симметрия в веб-дизайнеОсевая симметрия в веб-дизайне
Timboelaars

Осевая симметрия в веб-дизайнеОсевая симметрия в веб-дизайне
Emily White Smith


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

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

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

Вращательная симметрия в веб-дизайнеВращательная симметрия в веб-дизайне
Polecat

Вращательная симметрия в веб-дизайнеВращательная симметрия в веб-дизайне
Intercity Studio

Вращательная симметрия в веб-дизайнеВращательная симметрия в веб-дизайне
Vanmoof


Симметрия и стройный порядок

Зримая симметрия создаёт ощущение определённого порядка. Симметричные элементы упорядочивают общую картину, кажется, что всё находится строго на своём месте. Асимметрия же должна применяться в веб-дизайне осторожно, поскольку порой она порождает искажение визуального восприятия. Замечали ли вы, что, рассматривая асимметричные объекты, вы уже через несколько секунд начинаете искать объяснение такому их расположению? Они отвлекают внимание от прочих компонентов дизайна страницы.

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

Примеры симметрично выстроенных веб-сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Симметрия в веб-дизайнеСимметрия в веб-дизайне
Cadillac ATS vs the World


Заключение

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

Постовой: Коллекция драйверов - здесь вы сможете скачать различные виды драйверов биосов и прошивок для вашего компьютерного устройства
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: веб-дизайн, дизайн сайтов
Опубликовал Design FactoRy   Прочитано (раз): 10722   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 марта 2013 @ 14:13
Написал: OleSee — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошая статья.

Было бы приятно увидеть под статьями анонсы видео-новостей, популярных публикации и т.д. с использованием этих экспериментов :)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Апрель 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30