BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
Basic Principles of Graphics and Layout
✩Creating a web page is like creating a work of art. There are certain things that you
need to consider in order to get your message across.
✩ is a short term for information graphic, which refers to an image that combines
information, storytelling, and perceptions that help the cause of an individual or an
institution to communicate a message to viewers.
Infographic
✩ are graphic visual representations of information, data or knowledge intended to
present information quickly and clearly. They can improve cognition by utilizing
graphics to enhance the human visual system's ability to see patterns and trends.
Infographics
✩ 1.      Be unique 
✩ 2.      Keep it simple 
✩ 3.      Be creative and bold
✩ 4.      Less is more 
✩ 5.      The fortune is in the forwarding
Principles of Infographics
✩ - The principle of design that places elements on the printed page or website so that 
text and graphic elements are evenly distributed. In layouts with an even balance, 
the graphics don't overpower the text, and the page doesn't seem to tilt to one side or 
the other. 
✩ The visual weight of objects, texture, colors, and space is evenly distributed on the 
screen.
1. Balance
✩ The principle of proximity is about moving things closer or farther apart to achieve 
a more organized look. The principle says that related items should be closer to 
each other while non-related will be farther from each other. 
2. Proximity
✩ -The whole point of the alignment principle is that nothing in your slide design 
should look as if it were placed there randomly. Every element is connected visually 
via an invisible line. Where repetition is more concerned with elements across a deck 
of slides, alignment is about obtaining unity among elements of a single slide.
✩ Alignment means to arrange similar or other elements of design in the dimension of 
top, bottom, center, left or right to make design visually appealing. See above example 
image to understand it.
✩ Distribution means to giving or maintaining same distance between to similar or 
different elements of any design to make graphic layout clean and decent. See above 
example image to understand it.
3. Alignment
✩ -The principle of repetition simply means the reusing of the same or similar
elements throughout your design. Repetition of certain design elements in a slide or
among a deck of slides will bring a clear sense of unity, consistency, and
cohesiveness. Where contrast is about showing differences, repetition is about subtly
using elements to make sure the design is viewed as being part of a larger whole.
✩ Line has been used to add repetition in this example. It is then repeated across all
the design pieces to tie them together.
4. Repetition
✩ -The simple concept behind contrast is to ensure that every element within a design
does not look the same. In essence you should have a number of elements that look
vastly different to the others within a design.
5. Contrast
✩ Just as a deck of cards has a hierarchy from the Ace down to the Joker, so should
every design. A designer’s job is to communicate a message in a clear and concise manner.
Creating an order of importance amongst the elements will go a long way in achieving
this. Therefore, it is essential that time is taken to ensure a clear hierarchy is
developed.
✩ A good hierarchy is clearly evident in this recipe spread. A large photo of the dish is
used as the focal point and the secondary message is the second largest shape on the
page which is the recipe name. Colour and size has then been used to organize the
remaining content in a clear, concise and well-structured manner.
✩ Emphasis - An area in the design that may appear different in size, texture, shape or
color to attract the viewer's attention.
6. Hierarchy and Emphasis
✩ Visual elements guide the viewer's eyes around the screen.
7. Movement.
✩ is achieved when visual elements create a sense of organized movement.
8. Rhythm
✩ Visual elements create a sense of unity where they relate well with one another.
9. Proportion.
✩ This uses several design elements to draw viewer's attention.
10. Variety.

Untitled presentation