All India

Novice Guide to Visual Design

A dot is the simplest element of design; it marks a position in space. It is the meeting place of two coordinates in 2-dimension or three coordinates in 3-dimension.

A line is formed if you connect two dots. It is formed by a collection of dots.

A line can be fat, thin, wavy or jagged.

“A line is a dot that went for a walk”

-Paul Klee

If you put four dots and connect them with four lines, you get a shape. A shape is basically a 2-dimensional area with a known boundary.

They are the building blocks of graphic design. These are figures and forms that are used to create logos, illustrations and other innumerable elements that appear in the design.

There are 3 types of shapes:

Geometric:Shapes like Circles, squares, rectangles, and triangle.

Organic: Shapes that resemble natural shapes or objects found in nature- leaf, flower etc.

Abstract: Abstract shapes are those, which cannot be related to reality. These are free-form shapes like bubble-shapes, spirals etc.

Color is an important element in design and these are used to differentiate items and add emphasis to elements.

Colour is light reflected from objects and it has three main characteristics:

hue (like red, green, blue, etc.)

value (how light or dark )

saturation (how bright or dull)

In the physical world, the quality of the surface of an object is called as texture. It can be of two types.

Tactile Textures: Textures that you can feel and see.

Eg: Texture on a cloth.

Implied Textures: Textures that you can only see.

Eg: Texture on your phone wallpaper.

Typography, an important aspect of visual design, is an art/ technique of arranging letters to make written language easy to read, understand and appealing when displayed.

Typography sets a mood or an emotion and when done well, helps in recognizing a brand.

Form applies to objects that are 3 dimensional in nature and has height, width, and depth. It can be used to define space, create contrast and add volume to a composition visually.

There are mainly two types of form

Geometric

Organic

Grids are the foundation on which a design is made that allows a designer to organize various design elements on a page.

A Layout is the arrangement of visual elements in a design that looks like the final appearance of it. It is typically constructed within a grid. The layout has active and passive areas depending on the way that the eye scans it.

There should be a sense of unity or harmony between all the elements used in a screen or page. It should be arranged in a balanced way that it creates a sense of unity. The design should strike a balance between unity and variety, it shouldn’t be too boring or too chaotic

A shape used in the design is often referred as positive space (figure) and the area around it is called negative space (ground). Both are equally important design elements and brings balance to a composition.

Visual hierarchy is the presentation or arrangement of elements in a way that implies significance/importance.

By setting different visual characteristics to chunks of information, a designer can influence the user’s perception of what appears in the hierarchy.

Visual Hierarchy – Characteristics
Some of the characteristics are:

Size: larger elements will attract more attention.

Color: bright colors are more likely to gain attention over dull ones.

Alignment: an element that stays apart from the alignment of others will catch the eye.

Character: an element that possesses a different shape other than the group will catch the eye

Balance helps us to distribute the elements of a design uniformly. Balanced designs appear stable. There are mainly two types of balance.

Symmetric Balance

Asymmetric Balance

Symmetric balance: The elements are oriented along a common axis either top to bottom or left to right.

Asymmetric balance: The elements are placed organically creating both tension and balance.

Contrast is used when you want to make an element to stand out. It refers to the arrangement of visually distinct elements to create an interest.

Scale defines the relative size of the design elements thereby creates an interest and depth by showing how the elements are related based on size.

Dominance is creating a focus on a single element. This can be achieved varying the following parameters.

size

shape

color

value

depth

texture

density

saturation

orientation

local white space

intrinsic interest

perceived physical weight

Similarity is all about showing multiple design elements are related which brings a consistency to design. It mainly complements our abilities to process information.

Proximity helps in organizing elements. Upon grouping similar elements together or in close proximity, it creates a relationship between those elements in the viewer’s mind.

Proximity gives the user, clarity, and idea of where they should start and finish reading. This can be materialized by use of point size, font, color etc.

Alignment helps in creating a sharper, organized and more ordered design.

It is one of the most basic and important principles of design as it helps in providing an invisible connection between the elements even if they are not in close proximity to each other. It helps to reduce cognitive load and thus brings out a cleaner look.

Gestalt Psychology
Gestalt psychology deals with the study of how we perceive objects in our environment. It mainly discusses the difference between positive and negative spaces and examines how various laws help us to differentiate figure and ground.

The law of similarity states that all elements with similar superficial characters are perceived as a group.

In the above example, we immediately see two sets of dots.

The law of proximity states that the objects that are close to each other are perceived together as a group. In the above example, the second arrangement of dots is perceived as a group and has a better order and structure

The law of familiarity states that the human brain perceives the lines, shapes, and curves and relate it into meaningful objects from the real world. In the above example, we see a man walking towards a house and not a set of lines and shapes.

The law of symmetry states that the human brain perceives visual elements as grouped when they are arranged symmetrically.

The law of continuity states that the human brain prefers to see a continuous flow of design elements and not as separate objects.

The law of common fate states the humans have a tendency to group elements moving in the same direction.

The Law of Synchrony
The law of synchrony is similar to the law of common fate. It states that there is a tendency to group the visual elements that appear at the same time even if they are not in motion.

The principle of closure states that the human mind combines the visual information available to form a meaningful object rather than seeing it as individual elements

The law of common region states the elements in an enclosed region are perceived as a group

The law of element connectedness states that the humans have a tendency to group connected elements. In this example, we feel the connected squares stand out when compared to rest of squares.

A page will have active and passive areas. Eye tracking studies reveal that when users read a page their eye scans the content from the upper left corner.

Note: Arabs and Chinese people read pages differently to Europeans.

In text-heavy websites like blogs, the reader first scans vertically down the left side of the text looking for keywords or points of interest in the initial sentences of the paragraph.

The moment the reader finds something they like, they start reading normally, forming the horizontal lines. The end result is that the pattern looks like the letters F or E and called as F-Pattern.

Z-Pattern scanning occurs on websites that are not text-heavy.

When the eye reaches the end of the line, it moves diagonally down to left (again based on the reading habit) and repeats a horizontal scan on the lower part of the page.

Z-pattern is perfect for interfaces which are simple, minimalistic and Call to Action button-centric.

Gutenberg Diagram shows the user behavior of reading-gravity. It divides the visual design area into four.

Primary optical area

Strong fallow area

Weak fallow area

Terminal area

According to Fitts’ law, the amount of time required for a person in moving a pointer (e.g., mouse cursor) to a target area is a function of the ratio of distance to the target divided by the target’s size.

Hence, longer the distance and smaller the target’s size, the longer it takes for the user to reach.

Visual Design for Color Blind
These are some considerations to be kept in mind while designing an interface that also caters to the color-blind:

Use symbols along with colors

Use minimalistic approach while designing by limiting the color palette.

Use textures and patterns to show contrast.

Use a wide range of contrasting colors and not just black and white

Testing a Visual Design


The visual design of a product can be evaluated using eye-tracking.

It analyzes how the user’s eyes move around the screen.

A good visual design should draw the user’s attention towards something important to the strategic product objectives.

Leave a Reply