Найти тему

Визуальный язык в дизайне сайтов

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

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

https://www.behance.net/gallery/70047207/Volganka
https://www.behance.net/gallery/70047207/Volganka

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

https://www.behance.net/gallery/73328631/SG
https://www.behance.net/gallery/73328631/SG

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

https://pikabu.ru/story/ispolzovanie_smartfona_v_kachestve_navigatora__moy_setap_5690422 https://trashbox.ru/files/1265559_386202/photo_2020-06-17_06-38-22vv.jpg
https://pikabu.ru/story/ispolzovanie_smartfona_v_kachestve_navigatora__moy_setap_5690422 https://trashbox.ru/files/1265559_386202/photo_2020-06-17_06-38-22vv.jpg

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

https://beardycast.com/wp-content/uploads/2018/04/voice-dream-reader-1.jpg
https://beardycast.com/wp-content/uploads/2018/04/voice-dream-reader-1.jpg

Если человек читает ночью, то в темноте актуальна темная версия интерфейса. Это позволит беречь глаза от яркого ослепляющего света и не мешать окружающим.

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

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

https://www.behance.net/karzakov
https://www.behance.net/karzakov

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

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

https://www.behance.net/karzakov
https://www.behance.net/karzakov

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

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