Все дизайны сводятся к базовым элементам: плоскостям, точкам и линиям. Комбинируя эти элементы и придавая им объем, можно создавать бесконечное количество геометрических и органических форм для работы в дизайне.
Освоение этих фундаментальных элементов открывает множество возможностей. Они могут использоваться для фона, интерактивных элементов, а также для акцентирования внимания на важных частях контента.
Что такое элемент?
Дизайнеры используют базовые строительные блоки — элементы — для создания визуальных решений. Самыми простыми из них являются точки, линии и плоскости, которые могут обладать свойством объема. С их помощью можно формировать изображения, иконки, текстуры, узоры, диаграммы, анимации и типографические системы.
Точки и маркеры
Точки являются основой всех остальных элементов дизайна. В математике точка — это координата, обозначающая позицию. Она не имеет высоты, ширины или глубины, поэтому является невидимой. В дизайне мы используем точки в виде графических элементов. Они помогают направлять внимание, создавать акценты и фокусировать взгляд.
Комбинируя точки, можно создавать элементы интерфейса, например иконки или меню «kebab» (три вертикально расположенные точки).
Технически все другие элементы формируются из точек. Линия, например, — это просто последовательность плотно расположенных точек, соединяющих две координаты.
Линии
Линия — один из самых базовых элементов дизайна, соединяющий две точки (в геометрии это называется отрезком, но в дизайне мы просто называем это линией). Линии могут существовать сами по себе или формировать другие фигуры, такие как круги, квадраты или треугольники.
В дизайне линии часто используются для разделения элементов или в качестве границ изображений. Они могут быть не только прямыми, но и изогнутыми или волнообразными. Иногда линии делают пунктирными или штриховыми, чтобы создать менее акцентированное разделение.
Плоскости
В дизайне плоскости представляют собой замкнутые области, созданные линиями, текстурами и цветами. Они могут быть любой формы.
Плоскости — мощный инструмент композиции. Они помогают группировать элементы или, наоборот, отделять несвязанный контент.
Все UI-компоненты состоят из простых геометрических плоскостей и линий. Их расположение определяет, как пользователи будут с ними взаимодействовать.
Объем элементов
Трехмерные объекты занимают пространство — они обладают объемом. Для прямоугольных объектов объем рассчитывается по формуле: длина × ширина × высота.
Добавление третьего измерения в дизайн помогает выделить элементы и делает их более выразительными. Чтобы создавать такие объекты, нужно понимать основы перспективы (или использовать 3D-редакторы), но результат стоит затраченных усилий.
Грамотно выполненный 3D-дизайн помогает привлечь внимание пользователей.
Точки в элементах
Точки — один из самых простых элементов дизайна, и зачастую простота делает продукт лучше. Именно поэтому иконка «kebab-меню» (три вертикально расположенные точки) стала стандартом в пользовательских интерфейсах.
Компании, такие как Google, Microsoft, Atlassian и многие другие, используют этот значок, потому что он интуитивно понятен и не перегружает интерфейс.
Линии в элементах
Линейные элементы состоят только из контуров и не имеют внутреннего заполнения. Примеры таких элементов — иконки «Лайк» и «Комментарий» в Instagram, иконка «Закладки» в браузерах и другие значки, состоящие из одного лишь контура.
Линейные элементы также используются для создания границ вокруг контента, помогая структурировать информацию.
Плоскости в элементах
Цельные фигуры (плоскости) воспринимаются быстрее, чем контурные, так как они больше напоминают физические объекты. Однако выбор между контурными и залитыми иконками зависит от контекста. Например, в кнопках-иконках контурные версии могут использоваться по умолчанию, а залитые — в активном состоянии.
Некоторые значки, например иконка «Закладки», меняют стиль в зависимости от состояния.
Как использовать объем
Объем помогает выстроить визуальную иерархию в дизайне. Он также подсказывает пользователям, какие элементы являются интерактивными.
Для кнопок объем создает эффект нажимаемого объекта. Используйте тени, углы и блики, чтобы добавить глубины и объемности элементам интерфейса.
Точки в композициях
Точечные элементы привлекают внимание, не перегружая интерфейс. Например, зеленая точка, указывающая на то, что пользователь в сети, мгновенно узнаваема и не требует дополнительного пояснения.
Точки в радиокнопках помогают пользователям легко определить, какой вариант выбран.
Линии в композициях
Линии выполняют множество функций в дизайне. Они помогают структурировать композицию, направлять внимание, разделять контентные блоки и обрамлять информацию.
Создание фигур с помощью линий выглядит легче и изящнее по сравнению с цельными формами. Это отличный прием для минималистичных дизайнерских решений. минималистичные проекты.
Плоскости в композициях
Использование плоскостей разного цвета, формы и ориентации добавляет выразительности даже самым простым дизайнам.
Плоскости помогают создавать визуальные акценты, отделять элементы интерфейса и направлять взгляд пользователя к ключевым частям дизайна.
Как использовать объем в композициях
Объем можно применять не только к интерактивным элементам. Добавление 3D-фона делает пользовательский опыт более интересным. Например, сфера привлекает больше внимания, чем плоский круг.
3D-эффекты могут придавать дизайну футуристичный вид. Однако важно не перегружать интерфейс объемными элементами, чтобы не усложнять восприятие.