Alignment, Direction &

Perspective

Group A’lya, Hidayat, Jena, Jon & Yaman

 Alignment
The placement of visual elements so they line up in a composition.

The purpose of alignment

> To organize elements
> To group elements
> To create connections between elements
> To create balance
 Alignment Principles of Alignment
1. Edge Alignment (left and right, top and bottom)

Top and bottom

Left and right

 Alignment Principles of Alignment
2. Center alignment

Horizontal

Vertical
 Alignment Principles of Alignment
3. Justified alignment (for text) Justifying text can often lead to what is known as ‘rivers’ of
space between words, which look unappealing and can distract
the reader. This can be fixed with careful tracking of the text, or
using hyphenation.
 Alignment Good, Bad & Mixed Alignment
Good alignment is invisible.

A composition with elements that are

aligned properly will flow together well and
be easy for the reader’s eyes to follow.
 Alignment Good, Bad & Mixed Alignment
Bad alignment sticks out.

When elements aren’t aligned

properly, it breaks the flow of
readability and causes elements to
stand out.
Alignment Good, Bad & Mixed Alignment
Mixed alignment is playful.

If mixed alignment is intended as part of a

design, it can appear more radical, dynamic
and visually stimulating.
 Alignment Grids
Good alignment is most commonly achieved with the use of grids.
 Alignment Grids
Some more examples of grid-based layouts:
 Direction
Leading the eye to the next location. Visual direction is the perceived direction of visual forces;
think of it as the direction you would expect an element to move if it were in motion.
 Direction Creating Direction
1. Shape of Element
An element’s shape might create an axis through it and this axis
can suggest a direction. The prime axis is typically seen as running
parallel to an element’s visual direction.
 Direction Creating Direction
2. Location of Elements
This force will move in a direction that connects both elements.
 Direction Creating Direction
3. Subject Matter of Element
An arrow, a pointing finger, or the gaze of the eye all suggest
looking in a certain direction.
 Direction Creating Direction
4. Movement
An element could literally move through your design, and its
movement will have a direction.
 Direction Creating Direction
5. Structural Skeleton
Every composition has a structural skeleton, with forces that
naturally run along and through different axes.

The center and the four corners of a rectangular canvas act like magnets
to the eye. The strongest magnet is in the center, though not the
geometric center of the canvas. Rather, the center that attracts the eye is
the optical center, and it sits just above the true geometric center.

The axes run from corner to corner, and the points along these axes that
are midway between center and corner also attract attention. These
midway points can then be connected with vertical and horizontal lines,
which create additional axes of visual force.

You can make use of the structural net by placing elements where they
would naturally attract the eye, thereby increasing their attractive force.
 Direction Visual Direction of Gestalt
You can think of direction as real or imaginary lines that point from one element to another or
that connect different elements. The lines don’t need to be visible.
 Direction Visual Direction of Gestalt
1. Uniform Connectedness
The lines connecting elements have direction. An eye gaze creates an imaginary line between the eye
and whatever the eye is gazing at.
 Direction Visual Direction of Gestalt
2. Continuation
This principle relates to elements arranged along a line or curve, as though they are moving in the
direction of the line or curve.
 Direction Visual Direction of Gestalt
3. Common Fate
Elements seen as having a common fate are those that move or appear to move in the same direction.
 Direction Visual Direction of Gestalt
4. Parallelism
In order for elements to be seen as parallel, their internal axes (the same ones that impart direction)
must be established.
 Direction Overall Direction of a Composition
One more concept of visual direction is that every composition will be seen to have a dominant
direction, whether horizontal, vertical or diagonal.
> A horizontal direction makes the composition appear calm and stable.
> A vertical direction adds a sense of formality, alertness and balance.
> A diagonal direction suggests movement and action.

The dominant direction of a composition will be established by the direction of the majority of
elements or perhaps a few key elements. The direction will help set a mood according to the
general meaning ascribed to different types of lines.
 Perspective
The means of expressing 3D objects in a 2D space in a way that depicts their width, height, depth
and position in relation to each other.
 Perspective Types of Perspective
1. Linear Perspective
2. Atmospheric Perspective
 Perspective Linear Perspective
Linear perspective is all about your point of view. It’s about understanding how your eyes would
see an object in real life, and following the same principles when applying it onto a 2D space.
 Perspective Linear Perspective: How it Works
There are 5 things to consider when constructing a linear perspective:
1. Horizon 4. Orthogonal lines
This is the line where the sky meets the land/water. The These are the distance lines that head towards vanishing points.
height of the horizon on the 2D surface affects eye-level of Any objects that have depth in a perspective drawing will follow
the image as well as the location of your vanishing points. these lines as they recede into the background.

2. Vanishing point 5. Vantage point

Vanishing points are where your distance lines meet at. The This is the point from which the scene is viewed, i.e. the
points help your eyes identify the distance between objects viewer’s field of vision. This point is affected by the location of
on a perspective image. the horizon line and vanishing points.

3. Ground plane
In a scenery or landscape image, the ground plane is the
horizontal surface below the horizon line. Any objects
depicted to be at ground level in an image will be placed on
this ground plane.
Perspective Linear Perspective: How it Works
 Perspective Types of Linear Perspective
1. One-point Perspective
Linear perspective with only one vanishing point on the horizon line. The point is usually positioned at
the center of the image, but can be placed anywhere on the horizon line.
 Perspective Types of Linear Perspective
2. Two-point Perspective
Linear perspective with two vanishing points on the horizon line. These points are most often
positioned at the far ends of the line.
 Perspective Types of Linear Perspective
3 Three-point Perspective
Linear perspective with three vanishing points; two on the horizon line and one more either above or
below the line. Here, the viewer is either looking down or up at the subject from the vantage point.
 Perspective Atmospheric Perspective
When it comes to atmospheric perspective (also known as aerial perspective), the depth and
distance between subjects are portrayed through variations in color and clarity. In other words, it
is conveyed by giving objects at the front of the scenery (the foreground) more prominence with
stronger colors and contrasts, while blending in objects behind it to the background by using less
detail and more neutral colors.
 Perspective Atmospheric Perspective: How it Works
There are 2 things to consider when creating atmospheric perspective:

1. Values
This refers to the light and dark areas of an image or
composition. Values work with contrast to portray the effect
of distance; objects with higher contrast between light and
dark are often seen to be closer to the viewer than objects
with lower contrast.

2. Lighting
How light and shadow are applied on an image also affect
how you perceive depth, by directly affecting the contrast
between objects in the foreground and background.
End Thank You