This document discusses principles of graphic and layout design for online environments. It covers topics like infographics, images, graphics, basic design principles including balance, emphasis, hierarchy. It provides examples and discusses how to create effective infographics and apply principles of alignment, repetition to design graphics and layouts for online use. The document also includes sample questions to test understanding of key graphic and layout concepts.

1. IMAGING AND
DESIGN FOR THE
ONLINE
ENVIRONMENT
LESSON 7:

2. L E S S O N
O B J E C T I V E S :
• Identify and explain the basic
principles of graphics and layout;
• Explain the vital use of the basic
principles of graphics and layout
in communication and industry.

3. L E S S O N
O B J E C T I V E S :
• Assess the effectiveness of the
graphic design in a given layout
example.
• Evaluate existing websites and
online resources based on the
principles of layout, graphic and
visual message design.

4. I N F O G R A P H I C S
- 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.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
4

5. I N F O G R A P H I C S
Information graphics or infographics
are used to represent information,
statistical data, or knowledge in a
graphical manner usually done in a
creative way to attract the viewer’s
attention. Infographics make complex
data become more visually appealing to
an average user.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
5

9. A N I N F O G R A P H I C S H O U L D H A V E T H E
F O L L O W I N G C H A R A C T E R I S T I C S :
1. Thesis/Story. The subject and the main idea of your infographic must
be clear.
2. Data. Data must be well-organized and supports the main idea.
3. Simplicity. (color, style, and illustrations). Style must be able to attract
readers so as not to make your infographic full of text. Do not use stock
photos.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
9

10. A N I N F O G R A P H I C S H O U L D H A V E T H E
F O L L O W I N G C H A R A C T E R I S T I C S :
4. Sources. You must cite your sources so as to give credibility to your
data.
5. Branding/Shareability. Your infographic must be creative and
innovative.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
10

11. The following websites will help you create infographic:
1. http://piktochart.com/
2. https://www.canva.com/create/infographics
3. https://venggage.com
4. https://infogr.am/
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
11

12. W H AT I S A N I M AG E ?
• An image is a representation of the external form of a person or thing in
art. It represents something whether a drawing, painting, graphic or
photograph.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
12

13. Images may be 2-dimensional and 3-dimensional.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
13

14. G R A P H I C S
• Are visual images or designs on some
surface, such as a wall, canvas, screen,
paper or stone to inform, illustrate or
entertain.
• Are visual representations of data
made on a computer and is displayed
on a computer screen or monitor.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
14

15. E X A M P L E O F G R A P H I C S
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
15
PHOTOGRAPHY

16. E X A M P L E O F G R A P H I C S
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
16
DRAWING

17. E X A M P L E O F G R A P H I C S
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
17
LINE ART

18. E X A M P L E O F G R A P H I C S
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
18
GRAPHS

19. E X A M P L E O F G R A P H I C S
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
19
TYPOGRAPHY

20. BA S I C P R I N C I P L E S
O F D E S I G N
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
20

21. BA L A N C E
It refers to the proper arrangement of the elements, which gives a
visual weight for the design.
There are two types of Balance
1. Symmetrical balance - is where the elements are equally
distributed on both sides of your design, technically a mirror-based
design.
2. Asymmetrical balance - is a free layout where the elements can be
placed in any order or the opposite of symmetrical.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
21

22. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
22
Asymmetrical balance

23. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
23
Symmetrical balance

24. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
24
Symmetrical balance

25. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
25
Asymmetrical balance

26. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
26
Symmetrical balance

27. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
27
Asymmetrical balance

28. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
28
Symmetrical balance

29. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
29
Asymmetrical balance

30. Q U E S T I O N
Which of the principles of graphics and layout refers to the proper
arrangement of elements, which gives a visual weight for the design?
A. Balance
B. Pattern, Repetition and Rhythm
C. Emphasis
D. D. Unity and Harmony
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
30

31. Q U E S T I O N
Which of the principles of graphics and layout refers to the proper
arrangement of elements, which gives a visual weight for the design?
A. Balance
B. Pattern, Repetition and Rhythm
C. Emphasis
D.Unity and Harmony
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
31

32. E M P H A S I S
-It refers to something that needs to stand-out or emphasize. When
working on emphasis, you can change the color, size, or even the element
itself to lead the eye to the focal interest.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
32

33. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
33

34. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
34

35. Q U E S T I O N
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
35
The picture shows an example of
________.
A. Balance
B. Emphasis
C. Hierarchy
D. Repetition

36. Q U E S T I O N
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
36
The picture shows an example of
________.
A. Balance
B. Emphasis
C. Hierarchy
D. Repetition

37. PAT T E R N , R E P E T I T I O N A N D
R H Y T H M
• The use of repetitive elements such as lines, shapes, forms, textures,
space, colors, font, style, and the like to create texture, movement,
continuity, and consistency of the design.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
37

38. A L I G N M E N T
• It refers to the proper placement of an element to your design, just
like invisibly placing or aligning your texts or images diagonally,
vertically, and horizontally. The standard texts or paragraph alignment
we apply are center, right, left, and justified.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
38

39. J U S T I F I E D A L I G N M E N T
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
39

40. I N C O R R E C T A L I G N M E N T
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
40

41. C O R R E C T A L I G N M E N T
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
41

42. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
42

43. Q U E S T I O N
Every element of your design must show the correct placement of texts,
paragraphs, or images to make it formal and readable. Which of the
following alignment is not recommended in designing?
A. Center
B. Left
C. Diagonal
D. D. Right
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
43

44. Q U E S T I O N
Every element of your design must show the correct placement of texts,
paragraphs, or images to make it formal and readable. Which of the
following alignment is not recommended in designing?
A. Center
B. Left
C. Diagonal
D. D. Right
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
44

45. H I E R A RC H Y
• It refers to the proper
arrangement of the details
such as text, characters,
numbers, and symbols.
Changing its character size,
thickness, spaces, or even
font type to stand out is its
most critical features.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
45

46. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
46
• Hierarchy is the most important aspect of your design or your
message and is given the most weight.

47. W H AT I S T H E P U R P O S E O F
C R E AT I N G A H I E R A RC H Y I N
YO U R D E S I G N ?
• By using principles like contrast, scale, balance and more you can help
establish each element in its rightful place and help the most important
elements to stand out.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
47

48. As a layout artist, we must know the details in arranging and accentuating
the most important terms by changing its size, thickness, and spaces so
the reader can navigate the highlight of the event easily. Which of the
following principles best describe the statement above?
A. Alignment C. Hierarchy
B. Contrast D. Pattern, Repetition and Rhythm
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
48
Question:

49. As a layout artist, we must know the details in arranging and accentuating
the most important terms by changing its size, thickness, and spaces so
the reader can navigate the highlight of the event easily. Which of the
following principles best describe the statement above?
A. Alignment C. Hierarchy
B. Contrast D. Pattern, Repetition and Rhythm
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
49
Question:

50. Q U E S T I O N
The following are the ways where you can emphasize the text if you are
working on a magazine except:
A. By changing the font color
B. By making the text bold or italic
C. By adding illustrations or images
D. By changing the font size, either bigger or smaller
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
50

51. Q U E S T I O N
The following are the ways where you can emphasize the text if you are
working on a magazine except:
A. By changing the font color
B. By making the text bold or italic
C. By adding illustrations or images
D. By changing the font size, either bigger or smaller
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
51

52. Q U E S T I O N
Which principle of design is when a designer arranges the elements or
text according to its context?
A. Balance
B. Harmony
C. Emphasis
D. Hierarchy
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
52

53. Q U E S T I O N
Which principle of design is when a designer arranges the elements or
text according to its context?
A. Balance
B. Harmony
C. Emphasis
D. Hierarchy
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
53

54. Q U E S T I O N
What other elements of design can be repeated aside from color, header
style, and fonts?
A. Paper
B. Statement
C. Size
D. Word
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
54

55. Q U E S T I O N
What other elements of design can be repeated aside from color, header
style, and fonts?
A. Paper
B. Statement
C. Size
D. Word
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
55

56. C O N T R A S T
• It refers to the use of different or opposite elements such as sizes (large
or small), shapes (geometric or organic), spaces (negative or positive),
form (real or abstract), colors (monochromatic, complementary, triadic,
tetradic), texture (smooth or rough), and values (light or dark).
• Enough contrast assists with keeping the text readable.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
56

57. When creating contrast in color and text, it is advised to choose a color
from the background to create consistency of your design.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
57

58. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
58

59. Q U E S T I O N
Monochromatic uses one color in a design. Its advantage is to create
balance and to match the color in an artwork. However, this may lack
energy and may look monotonous. How will you use the monochromatic
scheme to create variations?
A. Use complementary colors
B. Adjust the saturation and value
C. Change the hue of the artwork or every element
D. Choose a design that is more suitable for the color scheme used
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
59

60. Q U E S T I O N
Monochromatic uses one color in a design. Its advantage is to create
balance and to match the color in an artwork. However, this may lack
energy and may look monotonous. How will you use the monochromatic
scheme to create variations?
A. Use complementary colors
B. Adjust the saturation and value
C. Change the hue of the artwork or every element
D. Choose a design that is more suitable for the color scheme used
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
60

61. Q U E S T I O N
Which font color is best to use if the background on your valentine card is
red?
A. Blue
B. Violet
C. Green
D. White
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
61

62. Q U E S T I O N
Which font color is best to use if the background on your valentine card is
red?
A. Blue
B. Violet
C. Green
D. White
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
62

63. U N I T Y A N D H A R M O N Y
• It refers to the relationship of the elements or the contents when you
place them together. The elements of the design must work together
and agree to its meaning, theme, feeling, or mood.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
63

64. L AYO U T
• is the arrangement of graphic elements on a page. An effective graphics
and layout contribute to the efficiency of website.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
64

65. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
65

66. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
66
Layout vs. Template

67. 67
LAYOUT TEMPLATE
• refers to the arrangement of
visual elements, such as text,
images, and graphics, on a page
or screen. It determines the overall
look and feel of a document,
including its visual hierarchy,
balance, and white space.
 use “layout” when referring to the
overall design of a document or
web page.
 Use “layout” when referring to the
arrangement of elements on a
page, and not as a general term for
a design or template.
• A template is a pre-designed
document or file that serves as a
starting point for a new document.
It contains a set of formatting
elements, such as fonts, colors,
and styles, that can be
customized to fit the specific
needs of the new document.
• Always use “template” when
referring to a pre-designed
document or file.
• Use “template” when referring to a
specific document or file, and not
as a general term for a design or
layout.

68. T E M P L AT E
68

69. 69

70. I M AG E F I L E F O R M AT S
• A standard process that data is encoded for storage in a computer file.
• Defines how bits are used to encode information in a digital storage
device.
70
FILE TYPE FILE FORMAT
Text .docx,.pdf
Image and graphics Jpeg, .Gif, .PNG
Audio .Wav, mp3
Video Mp4, mpeg, avi

71. F I L E C O M P R E S S I O N
• LOSSY – this compression type removes some information from the
image and lowers the overall quality in order to reduce the file size.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
71

72. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
72

73. F I L E C O M P R E S S I O N
• LOSSLESS- this compression type does not remove any information
from the image, but it usually cannot reduce the file size as much as
lossy compression.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
73

74. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
74

75. FILE FORMAT LOSSY LOSSLESS
JPEG
mp3
mp4
.zip
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
75
The Table contains 4 different file formats that use compression. Identify
whether each format uses lossy or lossless compression.
/
/
/
/

76. Q U E S T I O N
Jack takes a picture with his phone and sends it all to Jill. She opens the
picture and it looks a bit grainy and blurry. This is an example of what kind
of compression?
a. Bossy
b. Glossy
c. Lossy
d. Mossy
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
76

77. Q U E S T I O N
Jack takes a picture with his phone and sends it all to Jill. She opens the
picture and it looks a bit grainy and blurry. This is an example of what kind
of compression?
a. Bossy
b. Glossy
c. Lossy
d. Mossy
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
77

78. U S E S O F F I L E C O M P R E S S I O N
TO O L
• We can compress and store files that are not used frequently.
• Compressing files helps to free up space on the hard disk.
• Efficient memory management.
• Large media files can be easily stored.
• Transferring files becomes easy. Since there is a size limit of sending
attachments. File compression can help to send big files easily.
• Large files can be easily shared online with less size.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
78

79. A r r a n g e d a t a s t o r a g e f r o m s m a l l e s t
t o l a r g e s t
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
79
__________Yottabyte __________Kilobyte
__________Petabyte __________Megabyte
__________Terabyte __________Exabyte
__________Bit __________Zettabyte
__________gigabyte __________Byte
1
2
3
4
5
6
7
8
9
10

80. J P E G
• Joint Photographic Experts Group
• It is the most popular image format used on the web.
• JPEG are very ‘lossy’ files where much of the information about the
image is lost from original state to keep the image file size small.
• JPEG files are used mostly by photographers, artists, graphic designers,
medical imaging specialists, art historians, and other groups because
image quality and color fidelity is important in the field.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
80

81. J P E G
• Most common format when saving pictures on the internet.
• SIZE over QUALITY
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
81

82. G I F
• Graphics Interchange Format
• It is limited to the 8-bit palette with only 256 colors.
• GIF is best used for diagrams, cartoons, and logos which use few
colors and is the chosen format for animation effects.
• not recommended for large images with many colors.
• File size are very small and load very fast.
• Good choice for simple animation.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
82

83. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
83

84. P N G
• Portable Network Graphic
• This file format is best with line art,
text, and logo. It is capable to display
transparencies.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
84

85. J P E G V S . P N G
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
85

86. P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
86

87. T I F F
• Tagged Image File Format
• It is considered as a high-quality image format, where all color and data
information are stored. However, it produces a very large file size and
take huge disk consumption.
• A TIFF file is a type of raster image format (or bitmap format) that
typically uses lossless compression to store images.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
87

88. T I F F
• This format is popular among photographers and graphic designers
because it can store high-quality images while preserving detail and
colour.
• TIFF files can be very large, which can make them difficult to share or
transfer.
P
R
E
S
E
N
T
A
T
I
O
N
T
I
T
L
E
88