При анализе визуального дизайна интерфейса сайта мы указываем на то, как он привлекает внимание. Но при этом немногие пользователи могут понять причину, по которой внешний вид интерфейса является привлекательным. Композиция, которая создается по принципам визуального дизайна, может оказать существенное вовлечение потенциальных пользователей и улучшить удобство использования интерфейса.
Разные элементы, которые заполняют пространство интерфейса, такие как формы, фигуры, цвета, сетки, графика, объединяются воедино для создания качественно продуманной композиции. И для того, чтобы все грамотно и лаконично смотрелось, нам помогут принципы визуального дизайна.
Выделим 5 основ визуального дизайна:
Масштабирование (Scale)
Принцип масштаба заключается в использовании относительного размера для обозначения важности элемента в композиции.
Принцип масштабирования применятся очень часто, почти каждое хорошее дизайн-решение выполнено в соответствии с ним. Ведь очевидным является тот факт, что на более крупные элементы чаще обращают внимание.
Этот принцип помогает добиться определенного разнообразия при использовании элементов разного размера, а также устанавливает визуальную иерархию на странице.
Если правильно применить принцип масштабирования, при этом сделав акцент на важных элементах, пользователи с легкостью смогут разобраться в визуальном оформлении интерфейса, и им не составит труда понять, как его использовать.
В качестве примера рассмотрим главный экран сайта Bloomberg, где популярная статья является первой, берет на себя определенный визуальный вес, тем самым акцентируя внимание пользователя.
Визуальная иерархия (Visual hierarchy)
Принцип визуальной иерархии заключается в том, чтобы направлять взгляд на страницу таким образом, чтобы элементы отображались в порядке их важности.
Интерфейс, в котором правильно подобрана визуальная иерархия, является более понятным и простым в использовании, так сохраняются основные принципы юзабилити.
Данный принцип реализуется с помощью масштаба, цвета, отступов и расположения элементов.
Визуальная иерархия имеет контроль над подачей контента пользователю. И если вы столкнулись с проблемой, что вам тяжело найти определенный элемент в интерфейсе, вероятно, в данном дизайне отсутствует четкая визуальная иерархия.
Несколько типичных решений, которые могут поспособствовать решению этой проблемы:
- Используйте 2-3 разных размера и начертания шрифта, тем самым указав пользователю на важные и второстепенные части контента
- Примените подбор разных цветовых решений, где важные элементы контента будут иметь яркий оттенок, а второстепенные — более приглушенный
- Существует правило о том, что дизайн может включать в себя малые, средние и большие элементы. Используйте разный масштаб для элементов дизайна
Это главная страница сайта Medium, где хорошо выделен первый блок с кнопкой призыва к действию. В данном случае визуальная иерархия соблюдается с помощью различных шрифтов, начертаний, размеров, а также фоном в желтом цвете, что существенно влияет на внимание пользователя.
Баланс (Balance)
Баланс возникает, когда по обеим сторонам воображаемой оси равномерно распределяется количество зрительного сигнала.
Чтобы лучше понять принцип баланса, попробуйте представить обычные весы, только вместо веса «сбалансируйте» элементы дизайна интерфейса.
В дизайне такой же смысл, если по одну сторону оси расположить большой элемент, а на другой — меньший, дизайн будет являться разбалансированным. Для того, чтобы достичь приемлемого баланса, нужно брать во внимание область, которую занимает элемент дизайна, а не только их количество.
При создании композиции в макете, вы можете провести воображаемую ось, которая визуально будет делить ваш экран пополам, она и даст понимание о текущем состоянии равновесия для визуальных элементов. Если дизайн сбалансирован, то ни одна область не будет привлекать внимание настолько существенно, что вы не сможете увидеть остальную часть макета.
Выделим несколько видов баланса:
- Симметричный: элементы симметрично распределены относительно центральной оси
- Асимметричный: элементы ассиметрично распределены относительно центральной оси
- Радиальный: элементы расположены радиально относительно центральной точки
Если вы хотите применить какой-то конкретный тип баланса, то необходимо ориентироваться на то, в каком формате вы хотите передать контент.
Асимметрия является более динамичной и интересной. Она придает макету определенное ощущение энергии и движения. Симметрия зачастую более спокойная и выглядит статично, а радиальный баланс в основном акцентирует взгляд на центр композиции.
Контраст (Contrast)
Принцип контраста заключается в сопоставлении визуально непохожих элементов с целью передать то, что эти элементы различны.
Этот принцип также является распространённым, так как выделяет определенные элементы интерфейса и увеличивает их значимость для восприятия.
Его можно применить в том случае, если вы хотите визуально показать разницу между двумя или несколькими элементами цветом (к примеру, разными оттенками).
Как пример, часто в дизайне интерфейсов красный цвет используют для удаления или отображения какой-то ошибки.
Другой пример — на следующем макете сделали выделение на слове «Ukrainian» в цветах соответствующего флага, тем самым акцентируя, о какой стране идет речь.
Гештальт (Gestalt)
Принципы гештальта отражают нашу склонность воспринимать целое, а не отдельные элементы.
Достижению хорошего результата при проектировании интерфейса способствуют несколько целей: а именно эффективная коммуникация, желаемый результат и удобство пользования.
Принцип Гештальта зачастую помогает нам в достижении определенных целей и создании приятного опыта взаимодействия с пользователем, что приводит к успеху бизнеса.
Принцип Гештальта так же можно поделить на несколько типов:
- Близость
- Сходство
- Непрерывность
- Завершенность
- Симметрия
- Порядок
Конкретно тип завершенности позволяет нам увидеть в картине Пикассо двух целующихся людей вместо разных фигур. Все потому, что наш мозг дорисовывает недостающие части, чтобы воссоздать целостность картины, в данном случае — поцелуя.
А на сайте Uber применено решение по размещению связанных элементов в непосредственной близости с использованием пробелов, а также отделением блока белой подложкой. Данное решение дает понять, что контент является одним целым. Здесь был использован тип близости.
Вывод: Принципы визуального дизайна это основы web дизайна, которые должен знать каждый специалист в этой области.
Они информируют нас о том, как элементы дизайна сочетаются друг с другом для создания всестороннего и продуманного визуального образа.
Графика, основанная на принципах хорошего визуального дизайна, может привлечь внимание и повысить удобство использования.
