Visual Communication

Composition is the art of arranging design elements to create balance and convey meaning. These elements serve as the fundamental building blocks of any visual work. They are individual, definable components that form the structure of a design, functioning as the objects arranged to produce a harmonious composition. Without restricting ourselves to a specific field—be it editorial, web, or another form—we can identify the general design elements as follows:

Point
A point is the smallest and most basic element of design and it can be used alone or as a unit in a group (forming a line or a shape). It has position, but no extension, it is a single mark in a space with a precise and limited location and it provides a powerful relation between positive and negative space.

Line
If we place many points one next to the other we obtain a line, which can have length and direction, but no depth. Lines, besides to be used to create a shape, can be used to create perspective and dominant directional lines (which create a sense of continuance in a composition). Also, they can be grouped to create a sense of value, density or texture.

Shape
Shape is an element defined by its perimeter, a closed contour. It is the area that is contained within implied line and it has have two dimensions: height and width. A shape can be geometric (triangle, square, circle, etc.), realistic (animal, human, etc.) or abstract (icons, stylizations, etc.).

Form
The Form is derived from the combination of point, line and shape. A form describe volume, the 3D aspect of an object that take up space and it can be viewed from any angle (a cube, a sphere, etc.), it has width, height and depth.

Color
The color is the response of the eye to differing wavelengths of radiation within the visible spectrum. Colors are used to generate emotions, define hierarchy, create interest, etc. There are many different kinds of color systems and theories but we will focus on the 3 properties: Hue, Value and Saturation.

Hue: is the color name. 

Value: it refers to the lightness or darkness, to how close to black or white the Hue is. 

Saturation: It refers to the intensity of a hue, the less gray a color has in it, the more Chroma it has.

Value
Is defined as the relative lightness or darkness, which suggests the depth or volume of a particular object or area, it is the degree of light and dark in a design, the contrast between black and white and all the tones in between.

Texture
Texture is the surface quality (simulated and/or actual) that can be seen and felt, can be rough or smooth, soft or hard, etc. It exists as a surface we can feel, but also as a surface we can see and imagine the sensation we might have if we touch it, is both a tactile and a visual phenomenon.

Space
Is the area between and around objects (negative space) but it also refers to variations in the perspective and proportions of objects, lines or shapes and it is used for the comparative relation between different objects or areas. The real space is three dimensional, but in Design when we create the feeling of depth we call it space.

Typography
The art of arranging text to make it readable, clear and visually appealing.

The design principles unify individual elements into a cohesive composition by providing guidelines for their arrangement. Each principle offers a framework for organizing the structural components of a design, influencing both individual elements and the overall composition. Without delving into a specific discipline, we can identify the basic design principles as follows:

Balance
Balance is the concept of visual equilibrium of similar, opposing, or contrasting elements that together create a unified whole. It refers to the appropriate arrangement of the objects in a design to create the impression of equality in weight or importance. It comes in 2 forms:

Symmetrical: When the weight of a composition is evenly distributed around a central vertical or horizontal axis.

Asymmetrical: When the weight of a composition is not evenly distributed around a central axis.

Emphasis
It marks the location in a composition which most strongly draw the viewer attention, it is also referred as the focal point. It is the most important area or object when compared to the other objects or areas in a composition. There are three stages of emphasis, related to the weight of a particular object within a composition:

Dominant: The object with the most visual weight.

Sub-dominant: The object or element of secondary emphasis.

Subordinate: The object with the least visual weight, which is usually the background.

Movement
Is the visual flow through the composition, where (depending on the elements placement) the designer can direct the viewer´s eye over the surface of the design. The movement can be directed along edges, shapes, lines, color, etc and the purpose of movement is to create unity with eye travel. By arranging the composition elements in a certain way, a designer can control and force the movement of the viewer's eyes in and around the composition.

Pattern
An object or symbol that repeats in the design is a pattern. It can be a pattern with a precise and regular repetition or an alternate pattern, which uses more than a single object or form of repetition. We can say that is simply keeping your design in a certain format.

Repetition
Repetition creates unity and consistency in the composition; it is the reuse of the same, similar or different objects throughout the design. The repetition can be irregular, regular, uneven or even and can be in the form of

Radiation: Where the repeated elements spread out from a central point.

Gradation: Where the repeated elements become smaller or larger.

It often works with a pattern to make it seem active and along with the Rhythm helps to create different types of it.

Proportion
Proportion is the comparative relationship in between two or more elements in a composition with respect to size, color, quantity, degree, etc, or between a whole object and one of its parts. The purpose of the proportion principle is to create a sense that has order between the elements used and to have a visual construction; and it can occur in two ways:

Harmonious: When the elements are in proportion.

Unbalanced: When the disproportion is forced.

Rhythm
Rhythm is the alternation or repetition of elements with defined intervals between them, it creates a sense of movement and it is used to establish a pattern and/or a texture. There can be 3 different types of rhythm: Regular, Flowing or Progressive.

Regular: When the intervals between elements are similar.

Flowing: A sense of movement.

Progressive: A sequence of forms through a progression of steps.

Variety
Variety is the principle that refers to the combination of elements in an intricate and complex relationship using different values, lines, textures, shapes, hues, etc. It is complementary to unity and often needed to create visual interest or to call the attention to a specific area in the composition.

Unity
Unity it is used to describe the relationship between the individual elements and the whole of a composition (which creates a sense of completeness, that all of the parts belong together) and it is a concept that comes from the Gestalt theory of visual perception and psychology. Three of the most well-known concepts of this theory are:

Closure: The idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces.

Continuance: The idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention.

Similarity, Proximity and Alignment: The idea that elements of similar size, shape and color tend to be grouped together by the brain.

Contrast
Contrast arises when two or more visual elements within a composition differ from one another. It is used to create impact or to emphasize importance. Context is essential to contrast; while one might assume that a selected visual element conveys its own meaning, it is often the surrounding elements that imbue it with significance.

Typographical Contrast
Refers to the dissimilarity between two elements or more that complement each other and roles as one of the fundamentals of typography.

Regarding typography, Carl Dair was one of the most renowned typography experts. His notable work, Design with Type, was published in 1952 and is still a relevant handbook for typographic designers today.

According to his work, there are seven elements for typographic contrast. These elements include size, weight, form, structure, texture, color, and direction, which are essential for creating contrast in typography design.

Color theory explores the interplay of colors and their impact on our emotions and perceptions. It serves as an essential toolkit for artists, designers, and creators, enabling them to choose harmonious color combinations that effectively communicate the desired mood or message in their work.

Research shows that it takes just 90 seconds for people to form a subconscious opinion about a product—with color influencing between 62% and 90% of that judgment. Choosing the right colors can, therefore, play a critical role in boosting conversion rates and enhancing overall product usability.

The Color Wheel
The color wheel illustrates how different hues interact and can be harmoniously combined. Typically, the wheel is divided into primary, secondary, and tertiary colors. Primary colors are the foundational pigments that cannot be created by mixing other colors. By combining primary colors, we obtain secondary colors. Further mixing a primary with a secondary color produces tertiary colors, which are often identified by two-word names such as red-violet.

The color wheel was created in 1666 by Isaac Newton in a schematic way, and since then, it has gone through many transformations but still remains the main tool for color combination. The main idea is that the color wheel must be made that way so colors would be mixed appropriately.

Color models
Color comes in two distinct forms: tangible colors, which are found on the surfaces of objects, and colors produced by light. These forms give rise to two color models—the additive and subtractive—which together form the basis of the color wheel.

Additive:
The additive color model, which designates red, blue, and green as its primary colors, is commonly known as the RGB color system. This model underpins all the colors displayed on screens. When primary colors are combined in equal proportions, they produce secondary colors: cyan, magenta, and yellow. In this system, increasing the amount of light results in a brighter, lighter color.

Subtractive:
The subtractive color model creates colors by subtracting light. It encompasses two systems. The first, known as RYB (red, yellow, blue), is commonly referred to as the artistic system and is widely used in art education, particularly in painting. RYB laid the groundwork for modern scientific color theory, which found that cyan, magenta, and yellow form the most effective trio for mixing. This discovery led to the development of the CMY color model, primarily used in printing. When photomechanical printing incorporated black ink—the key component—the system evolved into CMYK (cyan, magenta, yellow, and black). Without the addition of black, the darkest shade achievable would be a muddy brown rather than a true black.

Additive color is used for digital screens, while subtractive color is intended for print media. In design projects meant for printing, the colors displayed on your screen may not match the final printed outcome. This is because the additive color spectrum is broader than that of CMYK. For this reason, designers are advised to convert their projects to the subtractive color system before printing to better approximate the final appearance. Conversely, for digital products, the RGB color system is ideal, as its wide color spectrum enables the creation of vibrant and impressive visuals.