Конспект визуального дизайна. Фундаментальные элементы

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

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

Иллюстрация


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


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




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


  • основа;
  • примитивы;
  • объекты.

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


Основа


Холст


Как уже было сказано, холст – это основа визуального дизайна. Он представляет собой ограниченную плоскость, в рамках которой протекают все интенсивные процессы от начала до конца. Границы холста могут иметь любую форму, но с точки зрения практичности, распространенными являются прямоугольные формы с различными пропорциями:


  • квадратный;
  • горизонтальный;
  • вертикальный.

Пропорции холста
Соотношения сторон


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


Примитивы


Примитивы – это точка, линия и плоскость; простейшие элементы из которых формируется структура холста, сложные объекты и сама визуальная система в целом. Они могут быть мнимые – отсутствовать на холсте, но присутствовать в восприятии, и зримые. Примерами мнимых примитивов могут быть композиционный центр в качестве точки, нижняя граница строки в виде линии или область абзаца в границах плоскости.


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


Точка


Точка


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


Дисбаланс
Дисбаланс


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


Линия


Линия


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


Мнимая и зримая линии
Мнимая и зримая линии


Ограниченная и непрерывная линии
Ограниченные и непрерывная линии


Пересечение двух зримых линий образует мнимую точку.


Мнимая точка, при пересечении двух зримых линий
Мнимая точка, при пересечении двух зримых линий


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


Кривая
Кривая


Прерывистая линия
Прерывистая линия


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


Мнимая глубина
Линии перспективы


Линия описывает структуры и границы, а также может соединять, разделять и выделять.


Соединение линией
Соединение линией


Разделение линией
Разделение линией


Выделение линией
Выделение линией


Контуры фигуры и тела могут быть зримой или мнимой линией.


Контуры фигур
Контуры фигур


Иерархическая структура
Иерархическая структура


Плоскость


Плоскость


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


Мнимая и зримая плоскости
Мнимая и зримая плоскости


Пересечение двух зримых плоскостей образует мнимую линию.


Мнимая линия, при пересечении двух зримых плоскостей
Мнимая линия, при пересечении двух зримых плоскостей


Плоскость, как и линии, описывает структуры и границы, а также может соединять, разделять и выделять.


Плоскости фигур
Плоскости фигур


Соединение, разделение и выделение плоскостью
Соединение, разделение и выделение плоскостью


Объекты


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


Объекты могут быть охарактеризованы тремя категориями:


  • органические;
  • гармонические;
  • абстрактные.

Органические объекты – это образы элементов природы и реальной жизни, которые должны доходчиво выражать нужный элемент и подчеркивать в нем самое важное. Примеры: растения и животные, люди и предметы, горные ландшафты и так далее.


Гармонические объекты – это образы геометрических форм и тел, которые подчиняются определенным закономерностям и в самой природе обычно не встречаются. Примеры: круг, треугольник, квадрат, шар, куб и так далее.


Абстрактные объекты – это бесформенные образы, не имеющие явной ассоциативной опоры. В этом их отличие от органических и гармонических объектов, которые вызывают отчетливую ассоциацию в сознании зрителя.


Фигура


Фигура


Фигура — это простой зримый объект; плоскость, ограниченная контурами линии; имеет ширину и высоту.


Пример фигур
Фигуры


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


Пример букв
Буквы


Фигуры могут быть простые и составные. Простые фигуры – это однородные элементы, своеобразный силуэт образа. Составные фигуры – это несколько разнородных элементов, два и более, объединенных в одном общем образе.


Простые фигуры
Простые фигуры


Составные фигуры
Составные фигуры


Тело


Тело


Тело – это сложный зримый объект, который имеет ширину, высоту и глубину; обладает мнимым объемом, достигаемым за счет использования различных выразительных средств (свет, тень, перспектива и так далее).


Пример тела
Тела


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


Тело с разных ракурсов
Разные ракурсы одного и того же тела




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

Источник: https://habr.com/ru/post/500160/


Интересные статьи

Интересные статьи

SWAP (своп) — это механизм виртуальной памяти, при котором часть данных из оперативной памяти (ОЗУ) перемещается на хранение на HDD (жёсткий диск), SSD (твёрдотельный накоп...
Экзамены английского языка вызывают у большинства разработчиков негативную реакцию. В сети или в курилке часто можно услышать утверждения о том, что TOEFL/IELTS проверяют не урове...
Ранее в одном из наших КП добавление задач обрабатывалось бизнес-процессами, сейчас задач стало столько, что бизнес-процессы стали неуместны, и понадобился инструмент для массовой заливки задач на КП.
Но если для интернет-магазина, разработанного 3–4 года назад «современные» ошибки вполне простительны потому что перед разработчиками «в те далекие времена» не стояло таких задач, то в магазинах, сдел...
В прошлой статье — Разновидности координат используемые в GUI Unity3d я попытался кратко рассказать о разновидностях координат в Unity UI/RectTransform. Теперь хочется немножко осветить такую пол...