1. Что делает сайт успешным?
2. Создание веб-сайта — довольно долгая задача
3. Контраст, пустое пространство и цвет
4. Правило 60-30-10
5. Симметричное или асимметричное расположение элементов дизайна
6. Выявление и расстановка приоритетов
Вы заходите на неизвестный сайт и за считанные секунды судите, «хороший» он или «плохой». Особенно с вашими собственными творениями бесконечно сложно провести объективный анализ. К счастью, есть проверенные временем принципы проектирования, которые можно использовать в качестве руководства.
Веб-дизайн довольно сложен: он требует большего, чем просто глаз для хорошей типографики и талант привлекательного визуального оформления. Это правда, что веб-дизайн предлагает чрезвычайно разнообразные возможности для творческого самовыражения. Но он также предлагает как минимум столько же возможностей застрять в процессе проектирования. Если вы глубоко погрузились в процесс проектирования, легко упустить из виду лес и деревья. В результате может получиться проект, который мы сочтем «плохим».
Наши суждения часто интуитивны, поэтому трудно объяснить, почему один и тот же элемент дизайна идеально подходит для одной страницы и выглядит запутанным и неуместным на другой.
Что делает сайт успешным?
Хорошие веб-сайты представляют информацию прозрачным и эффективным образом, чтобы пользователь мог интуитивно ориентироваться на сайте. В большинстве случаев ориентированный на пользователя веб-сайт является успешным благодаря хорошо сбалансированному сочетанию типографики, интерактивных элементов и большого количества визуальных изысков.
И поскольку это недостаточно сложно, мы также ограничены тем, что могут отображать браузеры наших потенциальных пользователей. При необходимости, также из-за технических навыков разработчика или инструментов, которые мы используем для создания веб-сайта.
Создание веб-сайта — довольно долгая задача
Неудивительно, что за этим обычно стоит вся команда. Часто отдельные лица (и, к сожалению, команды) склонны уделять больше внимания тем областям, в которых они особенно сильны. С другой стороны, другим областям уделяется меньше внимания или, в крайнем случае, вообще не уделяется внимания. Это создает дисбаланс, из-за которого пользователь может воспринимать сайт как некачественный и расстроенный.
«Хороший» дизайн веб-сайта — это результат баланса между разными областями дизайна и техническими реалиями.
Контраст, пустое пространство и цвет
Контраст часто идет рука об руку с выбором основных цветов в дизайне, а также с белыми пространствами в композиции. Однако пробел не обязательно должен означать оставшееся белое пространство. Скорее это относится к пространству между элементами. Это пространство также называют «негативным пространством», и его все еще можно раскрасить.
Большое количество белого пространства обычно делает страницу аккуратнее и чище. Такой подход часто идет рука об руку с минимализмом . Это означает последовательное удаление из макета всего лишнего и не вносит заметной добавленной стоимости в проект.
При планировании контраста и цвета вы также должны помнить следующее: контент, который трудно читать, может при определенных обстоятельствах привести к тому, что люди с нарушениями зрения (например, распознавание цвета) не смогут его воспринимать.
В связи с тенденцией заполнения заголовков веб-сайтов большими панорамными фотографиями мы часто сталкиваемся с наложениями текста, которые трудно расшифровать.
Иногда дизайнерам бывает непросто выбрать подходящие цвета для проекта. К счастью, есть инструменты, которые позволяют нам быстро тестировать различные комбинации, прежде чем мы потратим много времени на создание дорогостоящего макета.
При выборе правильных цветов стоит внимательно присмотреться к брендингу клиента: какие цветовые палитры уже используются? Насколько я могу отказаться от них?
Неизбежны и основы теории цвета: в зависимости от отрасли клиента можно выбрать цвет с соответствующим психологическим эффектом. Неслучайно синий цвет часто используется в более серьезных отраслях, таких как страхование, консалтинг и сайты сравнения в Интернете. Синий цвет действует успокаивающе и уверенно. Однако важно не быть слишком общим, поскольку даже оттенки одного цвета могут вызвать самые разные эмоции.
Правило 60-30-10
Это рекомендуется как золотое правило для использования цветовых палитр. Применяется следующее: основной цвет составляет около 60 процентов изображения, дополнительный цвет — 30 процентов, а третий цвет выделяет еще 10 процентов. Такое расположение оказывает особенно сбалансированное воздействие на пользователя.
Симметричное или асимметричное расположение элементов дизайна
Следовательно, еще одна проблема — организовать контент таким образом, чтобы он давал ощущение баланса. Здесь может помочь дизайнерское решение «расположить симметрично или асимметрично».
Как работают оба подхода?
При симметричном подходе предметы одинаковой важности размещаются вместе. С другой стороны, асимметричный подход заключается в объединении более и менее значимого контента.
Например, систему можно содержать в чистоте. Элементы четко отделены друг от друга. Часто такой контент размещается немного не по центру, чтобы дать более слабому элементу немного больше места и создать баланс.
C другой стороны, использует тот же принцип, но в более непринужденной обстановке. Большое использование белого пространства делает его элегантным и современным.
Такой подход очень хорошо работает на экранах большего размера (от размера планшета). С другой стороны, в небольших устройствах, таких как смартфоны, используются четко разделенные модули, расположенные один над другим.
Выявление и расстановка приоритетов
Прежде чем мы начнем создавать веб-сайт, вы должны четко определить, какое сообщение будет на нем содержаться. Часто ясность маркетинговой концепции также вносит ясность в макет проекта.
После, того как ключевые сообщения определены, следующим шагом будет их подчеркивание с помощью цвета или типографики.
Как эти два элемента могут появиться в комбинации, можно увидеть в этом примере:
Поэтому в большинстве случаев меню навигации находится вверху страницы. Помимо того, что это шаблон пользовательского интерфейса, это просто один из наиболее важных аспектов веб-сайта. В конце концов, меню — это не более чем обзор основного контента, который вы там предлагаете. Заявление о содержании вашего сайта, так сказать.
Визуальная иерархия: что действительно важно
Иерархия также может быть создана с помощью так называемых движение. Здесь мы располагаем содержание страницы таким образом, чтобы на него направлялся взгляд. Этого можно достичь, например, с помощью форм и компоновки.
Глаз ведется по экрану слева направо. У точки 01 явно самая большая иерархия, хотя все элементы имеют одинаковый размер и изначально кажутся одинаковыми по значению.
Итак, пропорции тоже играют роль: элементы одного размера, цвета и формы дают нам ощущение, что они подходят друг другу и выполняют одну и ту же функцию. Это особенно важно для интерактивных элементов.
Последовательный дизайн может внести значительный вклад в достижение визуальной гармонии:
одинаковые формы используются для всех изображений,
все картинки гармонируют друг с другом по цвету,
Обычно используются только два разных типа и размера шрифтов,
для опечаток и разделителей используется только один цвет,
разделители являются повторяющимся элементом дизайна и визуально связывают изображение с двумя заголовками.
Кроме того, знание различных подходов к проектированию поможет вам оценить свои собственные проекты. Думайте об этом как о контрольном списке, к которому вы можете обратиться, когда поймете, что что-то визуально еще не работает. Часто вы не можете найти правильное расстояние до собственного проекта, чтобы объективно его оценить.
Главные принципы веб-интерфейса для человеческого глаза (цвета, пространство, контраст)
