Elements and Principles of Visual Design in Digital Publishing

Visual design describes the building blocks of a product's aesthetics. The University of San Agustin identifies six primary elements of visual design:
- $1$ . Line
- $2$ . Shape
- $3$ . Texture
- $4$ . Value
- $5$ . Color
- $6$ . Space
Line:
- Lines represent strokes connecting two distinct points.
- They are categorized as the most basic element of visual design.
- Lines serve to create shapes.
- When repeated, lines can form patterns, which in turn create textures (Teo, $2025$ ).
Shape:
- Shapes are self-contained areas.
- They are typically formed by lines but can also be defined using differences in color, value, or texture.
- A shape is defined by $2$ dimensions: length and width (Teo, $2025$ ).

Definition: Negative space, also referred to as white space, is the empty area surrounding a positive shape.
Components of Composition:
- Ground: The empty part of the composition that does not contain text or image.
- Figure: The text and images within a composition.
- Figure/Ground Relation: This refers to the relationship between the shape (figure) and the space (ground).
Purpose and Importance:
- Space is vital to good design.
- It is used to isolate various page elements.
- It can be utilized to either emphasize or minimize specific components.

Value:
- Value describes the light and dark aspects of a design (Teo, $2025$ ).
- Contrast in Value:
  - High contrast (utilizing very light and very dark values) creates clarity.
  - Low contrast (utilizing similar values) creates subtlety.
Colour:
- Colour is defined as an element of light (Teo, $2025$ ).
- Colour Theory: This branch of design focuses on the mixing and usage of various colours.
- Subtractive Color Mixing:
  - Occurs in paint because pigments absorb light.
  - Mixing different pigments results in a wider range of light absorption, leading to a darker colour.
- Additive Color Mixing:
  - Occurs in digital design on screens because the screen emits light.
  - Mixing different colours on a screen emits a wider range of light, resulting in a lighter colour.
  - Mixing red, green, and blue results in white light.
  - The RGB (Red, Green, Blue) colour system is based on this additive mix.

Texture refers to the surface quality of an object.
There are two distinct types of textures (Teo, $2025$ ):
- Tactile Textures: Textures that can be physically felt.
- Implied Textures: Textures that are only seen visually and cannot be felt by touch.

Definition: Gestalt translates to "unified whole."
Function: It refers to how the human brain perceives, orders, and arranges objects in the thought process (Golombisky and Hagen, $2010$ ).
Human Perception: When viewing a group of objects, the brain perceives the whole before identifying individual parts.
Six Gestalt Principles:
- $1$ . Similarity
- $2$ . Continuation
- $3$ . Closure
- $4$ . Proximity
- $5$ . Figure/Ground
- $6$ . Symmetry and Order

Similarity:
- Shared visual characteristics automatically form relationships.
- The more alike objects appear, the more likely they are to be perceived as a group.
- Similarity can be established through shape, color, size, texture, or value.
- Increased commonality between elements creates a greater sense of coherence.
Continuity (Continuation):
- This principle dictates that once the human eye follows a path or direction, it will continue to travel that way until it encounters another object.
Closure:
- Utilizes the human eye's tendency to see closed shapes.
- Viewers perceive a complete shape by filling in missing information when an object is incomplete or the interior is not fully closed.
- It is related to continuity because it asks the eye to complete a visual path.
Proximity:
- Uses a close arrangement of elements to create a group association.
- If separate elements are close and similar, they are perceived as a single whole.
Figure/Ground:
- Describes the tendency of the eye to separate objects from the background that surrounds them.
Symmetry and Order:
- This principle asserts that a composition must provide a sense of balance or order.

Hierarchy:
- Demonstrates the difference in importance between design elements.
- Common methods to create hierarchy include color and size (e.g., using larger fonts for headings or highlighting primary buttons).
Balance:
- Governs how design elements are distributed evenly.
- Balanced designs appear natural, stable, and calm.
Contrast:
- Used to make an element stand out through manipulation of value, size, colour, and other factors (Teo, $2025$ ).
Scale:
- Describes the relative size of elements.
- Larger elements are emphasized relative to smaller ones.
- Scale is used to create a sense of depth, as the human eye perceives nearer objects as larger.
Dominance:
- Creates a single focal point on one element through the use of shape, contrast, positioning, scale, or colour (Teo, $2025$ ).
Alignment:
- Involves lining up objects with proportionate distribution.
- Standard alignments include left, right, or center justified.
- Left Alignment: The most frequently used and rarely fails.
- Center Alignment: Should be used with caution.
- Right Alignment: Used to create a clean visual line on one side or for specific balance needs.

F-Pattern:
- Utilized for web pages that are text-heavy.
- The viewer scans in the shape of the letter "F": first across the headline at the top, then down the left side, and finally across to the right.
Z-Pattern:
- Utilized for layouts featuring more visuals.
- The viewer scans horizontally across the top, then diagonally down to the opposite corner, and finally horizontally across the bottom.

WWF (World Wildlife Fund): Utilizes scale and contrast in campaigns (e.g., "Don't buy exotic animal souvenirs").
Google Search Page: Utilizes negative space, balance, dominance, shape, and contrast/colour.
Quartz (Samsung Galaxy Note $7$ Story): Employs hierarchy, scale, value, colour, and dominance in its layout.
DocuSign:
- Trust metrics displayed: $99.99\%$ uptime for eSignature with zero maintenance downtime.
- Global reach: Used in $180$ countries.
- Language support: available in $44$ languages for signers and $14$ for senders.
Atlassian: Highlights collaboration and uses video elements and site banners (e.g., Team ' $23$ ' sessions available on demand).
monday.com: Uses buttons and icons to allow users to select what they would like to manage with the "Work OS."
Intercom: Professional layout for Al customer service solutions with clear "Get started" and "View demo" calls to action.
Adobe (Photoshop and Creative Cloud):
- Promotes "Generation AI" and "Generative Fill."
- Offers a $50\%$ discount on the All Apps plan for the first three months, ending June $11$ .
- Targeting students for savings of over $60\%$ .