UNIT - I

INTRODUCTION TO
VISUAL DESIGN
WHAT IS IMAGE?
• An image can also be An image is a visual
representation of something, while a digital
image is a binary representation of visual data.
These images can take the form of
photographs, graphics and individual video
frames.
• described in terms of vector graphics or raster
graphics. An image stored in raster form is
sometimes called a bitmap. An image map is a
file containing information that associates
different locations on a specified image with
hypertext links.
When working with digital photos, graphic design, logos, and other digital images,
raster and vector are the two most common file types you’ll encounter.
What is a raster file?
Raster files are images built from pixels — tiny color squares that, in great
quantity, can form highly detailed images such as photographs. The more pixels
an image has, the higher quality it will be, and vice versa. The number of pixels in
an image depends on the file type (for example, JPEG, GIF, or PNG).

What is a vector file?

Vector files use mathematical equations, lines, and curves with fixed points on a
grid to produce an image. There are no pixels in a vector file. A vector file’s
mathematical formulas capture shape, border, and fill color to build an image.
Because the mathematical formula recalibrates to any size, you can scale a
vector image up or down without impacting its quality.
 WHAT IS THE
DIFFERENCE BETWEEN
RASTER AND VECTOR
FILES?
Resolution
The resolution of a raster file is referred to in DPI (dots
per inch) or PPI (pixels per inch). If you zoom in or
expand the size of a raster image, you start to see the
individual pixels.
Raster files display a wider array of colors, permit
greater color editing, and show finer light and shading
than vectors — but they lose image quality when
resized.
With vector image files, resolution is not an issue. You
can resize, rescale, and reshape vectors infinitely
without losing any image quality. Vector files are
popular for images that need to appear in a wide
variety of sizes, like a logo that needs to fit on both a
business card and a billboard.
Uses
Digital photographs are usually raster files. Many digital cameras
automatically shoot and save photos as raster files — and the images you see
online are often rasters, too. Raster files are also commonly used for editing
images, photos, and graphics.
Vector files work better for digital illustrations, complex graphics, and logos.
That’s because the resolution of vectors remains the same when resized,
making them suitable for a wide variety of printed formats.
File Sizes
Raster files are generally larger than vector
files. They can contain millions of pixels and
incredibly high levels of detail. Their large size
can impact device storage space and slow
down page loading speeds on the web.
However, you can compress raster files for
storage and web optimization to make sharing
faster and easier.
Vector files are much more lightweight than
raster files, containing only the mathematical
formulas that determine the design.
Compatibility and Conversion
You can open raster files in many different apps
and web browsers, making them easy to view,
edit, and share.

Vector files aren’t as accessible many vector file

types require specialized software to open and
edit the files. Though it can present some
challenges, it’s possible to convert vector files to
raster or raster files to vector when needed.
File Types and Extensions
Your software will usually determine your file type, whether it’s raster or vector.
There are multiple types and extensions of both raster and vector files, each with its
own features.
JPG: Joint Photo Experts Group GIF: Graphic Interchange Format
PNG: Portable Network Graphics TIFF:Tagged Interface File Format
BMP: Bitmap Image PSD: Photoshop Document
SVG: Support Vector Graphics AI: Adobe Illustrator

PDF: Portable Document Format EPS: Encapsulated Post Script

WMF: Windows Meta File DXF: Drawing Exchange Format

CDR: Corel Draw Format CMF: Collaborative Design Activity

 Binary Images
It takes only two values Black and White or 0 and 1.

The binary image consists of a 1-bit image and it takes only 1 binary digit to
represent a pixel. Binary images are mostly used for general shape or outline.
 Gray-scale images
Grayscale images are monochrome images, Means they have only one color.
Grayscale images do not contain any information about color. Each pixel
determines available different grey levels. A normal grayscale image contains 8
bits/pixel data, which has 256 different grey levels.
 Color Image
An RGB image, sometimes referred to as a true color image, is stored as an m-
by-n-by-3 data array that defines red, green, and blue color components for
each individual pixel. RGB images do not use a palette.

The color of each pixel is determined by the combination of the red, green,
and blue intensities stored in each color plane at the pixel's location.
Visual design aims to improve a
design’s/product’s aesthetic appeal and
usability with suitable images, typography,
space, layout and color. Visual design is
about more than aesthetics. Designers
What is
place elements carefully to create
interfaces that optimize user experience
Visual Design

?
and drive conversion.
Visual designers are the problem solvers
of the design world. Rather than just
bringing brands to life, they play a key
role in defining what goes into a brand’s
unique style and voice.
 What is
Aesthetics is a core design principle that
defines a design’s pleasing qualities. In visual
terms, aesthetics includes factors such as
balance, color, movement, pattern, scale, Aesthetics
shape and visual weight. Designers use

?
aesthetics to complement their designs’
usability, and so enhance functionality with
attractive layouts.
 VISUAL DESIGN LANGUAGE
Visual design is not just about aesthetics; it is used to communicate with a
brand’s target audience. Shapes, patterns, colors, and typography, all these
elements of the design have a powerful impact on how users perceive your
design. To communicate your message effectively through design, it is important
to have a set of key principles and guidelines in place.

We use language as a tool for communication with other people. Writers use
words to communicate with their readers, while designers use visual language to
communicate with their users. Fonts, colors, shapes, visual elements such as icons
— those are elements of design language. Effective design language streamlines
communication.
 IMPORTANCE OF VISUAL
LANGUAGE
Consistency
• When you create a visual language, your marketing campaigns become consistent. This allows your
audience to identify and associate each piece to your company.
• It does not mean you have to insert the brand’s logo or name in all content pieces. It is enough to use
the same style colors, typography, type of image and bring elements strongly associated with the brand.
Effective connection with the audience
• In the process to develop a visual language, the audience’s profile, preferences and perception of the
brand are considered. Therefore, your visual content will be more effective to establish a connection
with targeted people.
• Having effective client communication helps you to build a solid relationship with the audience,
improve your brand image — because it will increase transparency — and get information that is useful
to enhance your products or services.
Strong brand identity
• Because a visual language is consistent, it makes it easier for your
audience to identify your company’s content and products when they see
[Link], it will help you to strengthen your brand identity.
• That means all content will bring the same style, express the same
values and associate them with your brand. So it is a great tool you can
use to communicate what is important to your brand.
Dots
• Dots are the building blocks of everything else. Any other mark we make can be
seen as one or more dots in combination. Every shape, form, mass, or blob with a
recognizable center is essentially a dot regardless of its size.
• Dots anchor themselves in space and provide a reference point relative to the other
forms and space around it. While we often think of dots as circular in nature, they
don’t have to be. What they are is points of focused attention. Dots are the focal
points in our compositions.
• As dots increase in size we start to see them as shapes, but they still retain their
fundamental dot-like qualities and characteristics. A square placed in the whitespace of a
page is still a dot. It still attracts visual attention to it, which again is the dot’s defining
characteristic.
• Dots centrally placed within a composition create symmetry and are neutral and static,
through they tend to dominate the space around them. Dots placed off center create
asymmetry. They are dynamic and actively influence the space around them.
• 2 dots near each other shift the emphasis of the relationships of the dot with its
surrounding space to the relationship and interaction between dot and dot. 2 dots imply a
structure.
• Dots working together can form an endless variety of arrangement and complexity. The
can become lines and curves. They can form complex shapes, patterns, textures, and any
other structure imaginable. Dots in combination can even imply direction and movement,
bringing us to lines.
LINES
A line is a series of points adjacent to each other. Where a point
has no dimension, a line has one dimension. They have a length,
but nothing else. In reality a line would need a second dimension
to actually see it.
• The fundamental characteristic of a line is to connect or unite.
This connection can be visible or invisible. Two dots on a page
have a connection even if that connection, that line between
them, can not be seen.
• lines are about movement and direction. A line leads
somewhere, your eye moves along it seeking one or both of its
endpoints. This movement and direction makes lines inherently
dynamic. A line is not attracting you to a point in space. It’s
directing you toward and away from points in space.
• As the interval between a series of lines and the width of those lines varies, a rhythm is
created. Changing the color or value of the lines can add more complexity to that
rhythm.
• Changing the thickness or weight of lines and the intervals between lines creates a sense
of depth. Lines that appear closer together have more tension between them and
advance to the foreground. Lines further apart have less tension between them and
recede into the background.
• If a line or lines is to added a series of lines at an angle and allowed to cross several lines,
this sense of depth is increased. It creates perspective.
• Lines working together and in rhythm can form patterns and textures.
SHAPE
Shapes are another basic visual design element that typically form the core of any design piece.
Shapes are two-dimensional, self-contained areas. We typically think of shapes as geometric circles
and rectangles, but they come in all forms imaginable.
All objects are composed of shapes, and all elements of design are shapes in some way. Shapes can
live in a form. An example would be a button on a website: It’s a shape that’s living inside the
computer (which is the form).
A shape is a two- or three-dimensional object that stands out from the space next to it because of
a defined or implied boundary. A shape can live in different areas in space, and have other
elements like line, color, texture, or movement. Like forms, shapes come in two different types:
geometric and organic.
Geometric shapes can be drawn using a ruler, compass, or digital instrument. organic shapes are
found in nature or drawn by hand. They’re the opposite of geometric, and often feel natural or
smooth. That’s not to say that because they’re natural, they’re less complex. Think of the grain on a
stump of wood: It’s complex, but not geometrically precise.
FORM
Forms are three dimensional, and there are two types: geometric (man-made)
and natural (organic).

A digital or physical form can be measured by height, width, and depth.

A form can be created by combining shapes, and it can be enhanced by color

or texture.

Depending on their usage, they can also be ornate or utilitarian.

For digital design, think of form as the object you’re designing for; so if you’re
designing for a mobile device, the phone is your form.
SPACE
• Every shape or form has a place in space. As an element of design, space refers to the
area around, above, below, or behind an object.
• Objects in space can occur in both two and three dimensions. In a two-dimensional
setting, space is about creating the illusion of a third dimension on a flat surface.
Shadows, shading, overlap, and sizing can help define an object’s place in space. For
example, a button could have a shadow that makes it feel like it’s closer to the user.
PATTERN
Patterns are simply a repetition of more than one design element working in concert
with each other. A seamless pattern is one where every element within a design (no
matter how often it’s repeated) combines to form a whole.
This is most common in backgrounds on web and app pages. It’s also popular in carpet
and wallpaper design. Look around you: your bed cover, wall, notebook cover. If you see a
seamless pattern, look at it closely.
Do you see how the elements (circles, spirals, cones, pineapples, etc.) appear again and
again in the same way? Sometimes, they touch; sometimes, they have space between
them.
• When you repeat elements, the intervals between those repetitions can create a
sense of rhythm in the viewer and a sense of movement. Musicians create rhythm
in the spacing between notes, effectively making these “silent” gaps play off the
notes. Designers insert spacing between elements to make rhythm.
Texture
• Texture is the way a surface feels, or the way it’s
perceived to feel. It has the power to attract or
detract a viewer’s eyes, and can be applied to
lines, shapes, and forms. There are two types of
texture: tactile and visual. Tactile textures are
three-dimensional and can be touched.
• The easiest example is tree bark. When you
touch bark, you can feel all the bumps and
ridges, the roughness and smoothness. A photo
of the same. In digital design, there are currently
no touch screens that emulate tactile
textures—yet. So we stick to visual textures.
COLOR
• Color can help the organization of a design, and give emphasis to specific areas
or actions.
• Like other elements, it has a few different properties: hue, saturation, and
lightness.
• Unlike other elements, it does not always have to be used. A design can have the
absence of color.
• Color can be used sparingly or in a rainbow of hues, but tends to work best when
there’s both a dominant color and a supporting color.
• Colors create moods and can say something
different depending on the connotations of
your chosen color scheme. Color can create
an emphasis on specific areas of your design
layout.
• Hue is the name of a color in its purest
form. For instance, cyan, magenta, and green
are pure colors.
• Shade is the addition of black to a hue in
order to make a darker version.
• Tint is the addition of white to a color to
make a lighter version.
• Tone is the addition of grey to make a color
muted.
• Saturation refers to the purity of a color. A
specific color is most intense when it is not
mixed with white or black.
• In design, there are two color systems, RGB and CMYK. RGB is a system
dedicated to digital design.
• This additive system stands for red, green, and blue. The colors are
produced by adding primary colors together to create various
combinations. This mode should be used for designs that will only be used
on a screen.
• If you want to output your design as a printed piece, you need to use the
CMYK system.
• This subtractive system stands for cyan, magenta, yellow, and black (key).
CMYK reduces the light that would be reflected on a white background
to create color.
• It is extremely important to start a file using the right color system.
Converting colors between the systems can result in muted and
inaccurate colors.
 COLOR SCHEMES
• A color scheme, part of the larger field of color theory, is a grouping of complementary
colors used in design. The “scheme” part of the phrase refers to the intent behind the
arrangement. It’s not just about colors that look nice next to each other—it’s about
colors that highlight and amplify each other for the most optimized effect.
• Color scheme is different than a color palette, though the two terms are often used
interchangeably. If we go down the line, it looks like this: color theory > color scheme >
color palette. The scheme is the logic behind the arrangement, while the palette is the
colors themselves.
MONOCHROMATIC COLOR
In a monochromatic color scheme, the
entire space is dictated by one color, with
variations in tints, shades, saturation, and
textures to add depth and variance (and to
prevent the space from being too over the
top).

The benefit of a monochromatic color

scheme is that it instantly gives off
professional vibes, since working within this
scheme adds an element of cohesion to a
space regardless of what else is going on.
ANALOGOUS COLOR
The analogous color scheme puts that wheel to
work in your home by using colors that are next to
each other on the wheel.

This sort of color scheme is often found in nature,

with a dominant color complemented by various
other colors that envelop it on the wheel.

Generally, this color scheme is relegated to just

three colors—meaning you pick a color on the wheel
(say, dark green) and then use the colors on either
side of it (in this case, light green and light blue).
 COMPLEMENTARY COLOR
Complementary colors sit opposite to each other on a color wheel.

One color is usually a primary color and the other a secondary color.

The main complementary color pairings are typically blue and orange, red and
green, and yellow and purple.
 TRIADIC COLOR
A triadic color scheme consists of
three colors that are placed
equidistant from each other on the
color wheel, forming a triangle.

Triadic color schemes can include

three primary, secondary, or tertiary
colors.

Common triadic palettes consist of

blue, red, and yellow or violet, green,
and orange.
SPLIT COMPLEMENTARY COLOR
A Split Complementary color scheme is
created by selecting a base hue, then
combining the two hues on either side of its
complementary color.

This type of scheme pairs a base color with

two contrasting, yet harmonious colors on
either side.
To create a split complementary scheme, an
artist should start by selecting one primary
or secondary hue from the color wheel.

Next, select the two hues adjacent to its

complementary hue for maximum contrast
and maximum impact.
NEUTRAL COLOR
A neutral color scheme is one that
consists of mostly white, black, and
shades of gray.

This type of color palette is often best

suited for creating a calming and
subtle atmosphere in a room or space
since the colors do not create too
much visual stimulation.