IT1905

Introduction to the Design Principles and Vector Graphics

Overview of Design Principles
Graphic design is a form of visual communication to deliver a message for an audience. It is the practice of combining visual
material, such as text, image, shapes, color, and other elements, to create a visual representation of an idea relying on the
creation, selection, and organization of visual elements.
What Graphic Designers Produce
The outputs produced by graphic designers can include two-dimensional spaces and three-dimensional objects. Graphic
designers are tasked with giving form to content that is intended to be viewed on devices including computers, smartphones,
and other consoles. A digital graphic designer outputs include the following:
• Social media content • Application design • Kiosk interfaces • Print and online marketing
• Website design • Virtual reality platforms • User interfaces materials
• 2D and 3D animation • Game design • Motion graphics • Logos
When designing applications or websites, the designer has to focus on function and creating an optimal user experience as well
as visual appearance.
Design Principles
A graphic designer must utilize the design principles to compose a design. Design principles are fundamental guidelines for
combining individual elements to make consistent and satisfying designs. This involves taking various elements and providing
proper balance, adding selective emphasis to create a focal point, using rhythm to set the mood, and establishing unity. The
following design principles are aspects to consider in design to create the best user experience:
• Balance – The principle of balance is to arrange elements within an area so that these elements promote a harmonious
response. The elements of design, such as text, colors, images, shapes, and patterns, carry a visual weight. Visual balance is
determined by the weight, position, and arrangement of elements. Balance can be formal, informal, or radial. Figure 1
illustrates the three (3) types of balance.
o Formal balance – Also referred to as symmetrical balance, this type of balance places elements with equal distribution
to convey trustworthiness and integrity. This balance stimulates feelings of formality and elegance.
o Informal balance – Also referred to as asymmetrical balance, this uses elements that counterbalance one another to
create a harmonious composition. One (1) side of composition might contain a dominant element, which could be
balanced by a couple of or lesser elements on the other side. This type of balance also gives the appearance of being
casual, energetic, or popular.
o Radial balance – This arranges elements around a central point and is used to promote unity or teamwork.

Figure 1. Sample layouts of formal, informal, and radial balance

Source: The Graphic Designer’s Digital Toolkit. A Project-Based Introduction
to Adobe Photoshop Creative Cloud, Illustrator Creative Cloud, and InDesign
Creative Cloud, 2014. p. 93

• Emphasis – This design principle provides direction to various elements in a given design to make an element to stand out
or draw attention. This means the most important information the design is meant to convey. It is also used to reduce the
impact of certain information. Emphasis in a design can be achieved by contrasting the elements of design, such as color
and shape, by changing the size of the focal point or subject and/or by isolating the subject to focus the attention on it. See

01 Handout 1 *Property of STI

 [email protected] Page 1 of 3
 IT1905

Figure 2 for the example layouts that emphasize subjects using color, shape, size, and isolation.

Figure 2. Sample emphasize design layouts using color, shape, size, and isolation
Source: https://artclasscurator.com/principles-of-design-examples

• Rhythm – This design principle is a visual pattern of repeating elements that creates a sense of movement. Rhythmic
patterns are built from elements and the intervals between them; then, it will cause the viewer’s eyes to move around the
page. Variation in rhythm can be adjusted by changing the shape, size, color, spacing, and position of elements in a design.
This change in arrangement helps promote the mood of the design.
The three (3) primary types of rhythm are the following: (See Figure 3 shows the example layouts of these types of rhythm.)
o Regular rhythm – This occurs when the intervals between elements are predictable or the elements themselves are
similar in size, length, and/or color.
o Progressive rhythm – This occurs when the sequence of forms or shapes is shown through progressive stepped changes
in size, length, and/or color. Some characteristics of elements might have stepped changes, or the interval might have
stepped changes.
o Flowing rhythm – This occurs when the elements or intervals are organic. This creates natural patterns that evoke a
feeling of the organic movement.

Figure 3. Sample layouts of regular, progressive, and flowing rhythms

Source: https://tympanus.net/codrops/2011/08/19/developing-visual-rhythm-in-web-design/

• Unity – This is the organization of elements in a design as though they belong together. It allows the designer to view
individual components as one (1) cohesive design. Unity establishes continuity with a variety of elements and promotes
consistency within the piece. It also combines balance, rhythm, type, imagery, and tone to evoke a particular emotion from
the viewer. Unity in design can be achieved by using repetition, proximity, alignment, or contrast. Figure 4 shows the
example layouts for these techniques to achieved unity.
o Repetition – Through repetition of color, size, orientation, texture, font, shape, etc., the elements on the design will
appear more related to create unity.
o Proximity – The elements in a design that are close to each other are perceived to be more related than elements that
are spaced farther apart.
o Alignment – This refers to aligning design elements on a common axis.
o Contrast – This is implemented whether using color, typography, alignment, or other variation.

01 Handout 1 *Property of STI

 [email protected] Page 2 of 3
 IT1905

Figure 4. Sample unity design layout using repetition, proximity, alignment, and contrast
Source. https://www.invisionapp.com/design-defined/unity-principle-design/

Vector and Raster Graphics

When designing with digital images, graphics can be categorized as either vector graphics or bitmap graphics.
Raster graphics, or bitmap graphics, are generated based on an array of pixels of various colors, which together form an image.
When a raster-based image is scaled, the size of the pixels reduces or enlarges. Enlarging a raster-based image will result in
blurry and loss of clarity. Various formats for storing images such as bitmap (BMP), Joint Photographic Experts Group (JPEG/JPG),
and Portable Network Graphics (PNG) are based on raster graphics. The common software for creating and editing raster
graphics are the following:
• Adobe Photoshop – This software is widely used in the industry for raster image editing and graphic design. Photoshop is
specifically designed to allow users to create and edit raster images in multiple layers.
• GIMP – GNU Image Manipulation Program (GIMP) is a cross-platform image editor available for Linux, Mac OS, and
Windows platforms. It is an open-source software and is an alternative to Photoshop.
Vector graphics are based on mathematical equations of basic geometric shapes such as lines, points, circles, and polygons.
Since these type of graphics are mathematically derived, they are scalable and their print quality depends on the output device.
This means that when the images based on vector graphics are enlarged or reduced, the image is redrawn using the
mathematical equations. Thus, the resulting image will not lose its quality and smoothness as the original. Vector files are
appropriate for logos, typefaces, and other graphics that need to retain their quality and smoothness when enlarged. The
common vector file formats are Scalable Vector Graphics (.svg), Computer Graphics Metafile (.cgm), OpenDocument Graphic
(.odg), Encapsulated PostScript (.eps), and Extensive Markup Language (.xml). Here are some software used for creating and
editing vector graphics:
• Adobe Illustrator – This is a paid software, is widely recognized as the industry standard tool for vector design, and is used
by the majority of professional designers. This is available in Windows or Mac OS platforms.
• CorelDRAW - This is also a paid software and designed by Corel Corporation. This is only available on Windows and Mac
OS platforms.
• InkScape – This is a cross-platform open-source vector graphics program and is used by many professional designers. This
runs on Linux, Windows, and Mac OS platforms.

REFERENCES:
Adobe Photoshop (n.d.). In Techopedia. Retrieved from https://www.techopedia.com/definition/32364/adobe-photoshop
Bradley, S. (2015, June 29). Design principles. Compositional, symmetrical, and asymmetrical balance. Smashing Magazine. Retrieved from https://www.smashingmagazine.com/2015/06/design-
principles-compositional-balance-symmetry-asymmetry/
Cox, P. (2011, August 19). Developing visual rhythm in Web design [Web log post]. Retrieved from https://tympanus.net/codrops/2011/08/19/developing-visual-rhythm-in-web-design/
Saporito, N. (2018, December 19). Inkscape VS Illustrator VS CorelDraw | 2019 comparison [Web log post]. Retrieved from https://logosbynick.com/inkscape-vs-illustrator-vs-coreldraw/
Sherin, A. (2017). Introduction to graphic design. A guide to thinking, processes and style. Retrieved from
https://books.google.com.ph/books?id=VcpBDwAAQBAJ&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
The ultimate collection of principles of design examples and definition. (2018, November 17). In Art Class Curator. Retrieved from https://artclasscurator.com/principles-of-design-examples
Unity principle of design (n.d.). In InVision. Retrieved from https://www.invisionapp.com/design-defined/unity-principle-design/
What are vector graphics? (n.d.). In Vectr. Retrieved from https://vectr.com/tutorials/what-are-vector-graphics/
What’s the difference between raster and vector? (n.d.). In PsPrint. Retrieved from https://www.psprint.com/resources/difference-between-raster-vector/
Wood, A. (2014). The graphic designer’s digital toolkit. A project-based introduction to Adobe Photoshop Creative Cloud, Illustrator Creative Cloud and InDesign Creative Cloud. Retrieved from
https://books.google.com.ph/books?id=djQEBAAAQBAJ&printsec=frontcover#v=onepage&q&f=false

01 Handout 1 *Property of STI

 [email protected] Page 3 of 3