The document discusses principles of layout, graphics, images and infographics for online environments. It defines key terms like images, graphics, layout and infographics. The main points covered include common image file formats for online use, basic principles of layout and graphics design like balance, emphasis and movement. Examples of different types of graphics are also provided. Principles for making effective infographics like keeping it simple and unique are highlighted. Sample infographic images and videos are included to illustrate the concepts.

1. IMAGING ANDDESIGN
FORTHEONLINE
ENVIRONMENT
EMPOWERMENTTECHNOLOGIES

2. I CAN
2
*Information & Images taken from various sites on the internet and is under OER Commons.
 I canevaluateexistingwebsitesandonlineresources basedon
theprinciplesoflayout,graphic,andvisual messagedesign.
 I canuseimagemanipulationtechniquesonexisting imagesto
changeorenhancetheircurrentstateto communicatea
messageforaspecific purpose.

3. WHATIS ANIMAGE?
AnImageis a
representationof the
externalformof a
personorthingin art.
3
*Information & Images taken from various sites on the internet and is under OER Commons.

4. WHATIS AN IMAGE?
Imagesmaybe2-dimensional,suchasa
photographorscreendisplay,or3- dimensional,
suchasastatueor hologram.Theymaybe
capturedbyopticaldevices– suchascameras,
mirrors,lenses,telescopes, microscopes,etc.
andnaturalobjects andphenomena,suchasthe
humaneyeorwater.
4
*Information & Images taken from various sites on the internet and is under OER Commons.

5. GRAPHICS:
Graphics– arevisual
imagesordesignson some
surface,suchasawall,
canvas,screen, paper,or
stonetoinform, illustrate,or
entertain
5
*Information & Images taken from various sites on the internet and is under OER Commons.

6. EXAMPLES OFGRAPHICS:
 Photographs  Drawings
6
*Information & Images taken from various sites on the internet and is under OER Commons.

7. EXAMPLES OFGRAPHICS:
 LineArt  Graphs
7
*Information & Images taken from various sites on the internet and is under OER Commons.

8. EXAMPLES OFGRAPHICS:
 Typography  Numbers
8
*Information & Images taken from various sites on the internet and is under OER Commons.

9. EXAMPLES OFGRAPHICS:
 Symbols  GeometricDesigns
9
*Information & Images taken from various sites on the internet and is under OER Commons.

10. EXAMPLES OFGRAPHICS:
 Maps  ComputerGraphics
10
*Information & Images taken from various sites on the internet and is under OER Commons.

11. EXAMPLES OFGRAPHICS:
 Engineeringdrawings,orotherimages
11
*Information & Images taken from various sites on the internet and is under OER Commons.

12. atonthe
12
IMAGE FORMAT
Differenttypesofimageform
computer.
1

13. ONLINE IMAGE FILEFORMAT
1.JointPhotographicExpertsGroup(JPEG) – doesnot
supporttransparencyandanimation(.jpegor jpg)
13
*Information & Images taken from various sites on the internet and is under OER Commons.

14. ONLINE IMAGE FILEFORMAT
2.GraphicsInterchangeFormat(GIF)–
supportstransparency andanimation(.gif)
14
*Information & Images taken from various sites on the internet and is under OER Commons.

15. ONLINE IMAGE FILEFORMAT
3.PortableNetworksGraphics(PNG)– supportstransparency but
notinanimation (.png)
15
*Information & Images taken from various sites on the internet and is under OER Commons.

16. yout&
16
LAYOUT
DefinitionandPrinciplesofLa
Graphics.
2

17. LAYOUT
17
*Information & Images taken from various sites on the internet and is under OER Commons.
Layout– is partof
graphicdesignthat
dealsinthearrangement
of visualelementsona
page.

18. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
1.Balance.Thevisual
weightofobjects, texture,
colors,andspaceis
evenlydistributedonthe
screen.
18
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

19. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
2.Emphasis.Anareain
thedesignthatmayappear
differentinsize, texture,
shapeorcolor toattractthe
viewer’s attention.
19
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

20. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
3.Movement.
Visualelements
guidetheviewer’s
eyesaroundthe
screen.
20
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

21. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
4.Pattern.Builds
course.Itbuilds
familiarityand
organizesdesign
fortrouble-free
viewing.
21
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

22. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
5.Repetition.makes
designaware.Itbrings
consistencyandflowto the
design.
22
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

23. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
6.Proportion.
Conveysstability.It
involvesscalingof
variouselementsto
createacoherent
design.
23
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

24. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
7.Harmony
.Brings
elementscloser.It
utilizesfamiliartraits of
designelements and
putstheminto focus.
24
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

25. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
8.Contrast.Addresses
conflict.Ithighlights the
differenceandputs an
emphasistowhatis
important
25
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

26. BASIC PRINCIPLES OFGRAPHICS AND LAYOUT:
9.Variety
.Reaps
attention.Itaddsflavor to
thedesign,makingit more
interestingandengaging.
26
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

27. INFOGRAPHICS
Let’sstartwiththefirstsetof
27
slides
3

28. INFOGRAPHICS
Infographics – Information
graphicsorinfographicsare used
torepresent information,
statisticaldata, orknowledgeina
graphical mannerusuallydonein
a creativewaytoattractthe
viewer’sattention.
28
*Information & Images taken from various sites on the internet and is under OER Commons.

29. 5PRINCIPLES IN MAKINGAN EFFECTIVE
INFOGRAPHICDESIGN:
1.BeUnique
2. MakeItSimple
3. BeCreativeandBold
4. LessisMore
5.TheImportanceof
GettingitAcross
29
*Information & Images taken from various sites on the internet and is under OER Commons.

30. INFOGRAPHICEXAMPLE
30
*Information & Images taken from various sites on the internet and is under OER Commons.

31. INFOGRAPHICEXAMPLE
31
*Information & Images taken from various sites on the internet and is under OER Commons.

32. INFOGRAPHICEXAMPLE
32
*Information & Images taken from various sites on the internet and is under OER Commons.

33. INFOGRAPHICVIDEO
InfographicVideo– is
avisualrepresentation of
dataandknowledge inthe
formofanonlinevideo.
33
*Information & Images taken from various sites on the internet and is under OER Commons.