EMPOWERMENT TECHNOLOGIES

QUARTER 1 - MODULE 5:
IMAGINING AND DESIGN FOR
THE ONLINE ENVIRONMENT
 Lesson Basic Principles of Graphics
1 and Layout

WHAT I KNOW
1. D
2. B
3. D
4. B
5. B
6. D
7. C
8. B
9. A
10. A
11. B
12. A
13. C
14. C
15. A

WHAT’S NEW
1. Pattern and Repetition

2. Balance
 3. Contrast

4. Emphasis

5. Alignment

WHAT’S MORE
Let’s Assess!
Principles Yes No Comments
1. Balance
Is the page shows the proper ✓ It refers to the proper
distribution of elements in page arrangement of the elements,
composition, whether Symmetrical or which gives a visual
Asymmetrical? weight for the design. It feels
stable and aesthetically
pleasing.
Do you feel that the elements are ✓ Symmetrical balance work of art
compressed only on one side of the is the same on one side as the
page? other, a mirror image of itself,
on both sides of a center line.
2. Emphasis
Is there an element of focal point to ✓ Emphasis is a strategy that
the design that leads in getting your aims to draw the viewer's
attention on that page? attention to a specific design
element.
Does the page have emphasized any ✓ well-designed layout makes the
of the texts, graphics, illustrations, or information it contains easy to
animations in a design? consume.
Is the element emphasized by a ✓ Whenever an element is placed
different color, texture, size, or within a format, contrast is
space? created in the various elements.
3. Pattern, Repetition, and Rhythm
Are there any repeated elements in ✓ You can repeat design
the web design? elements, for example, to
provide a consistent visual
experience.
Are all pages have the same ✓ Different Effects
transition effects?
Are the font type and color used ✓ Different Font Types Help
consistently on every page? Differentiate Between Types of
Messages.
4. Alignment
Are the graphics and texts visibly ✓ It helps to create order,
aligned which makes it readable? organize your elements, create
visual connections, and improve
the readability of your design.
Is the placement of individual or ✓ It often helps to approach your
grouped images have the same design in sections, instead of as
scale or size and is evenly distributed a whole.
in space?
5. Hierarchy
Are the important elements stand out ✓ elements of design all put
and are arranged properly depending together in one picture, making
on its organization? the picture look better.
Are the headings, titles, and subtitles ✓ It takes more than eye-catching
emphasized than the body? graphics to make a document
visually effective.
6. Contrast
Does the background and font color ✓ Readability.
contrast each other? (light to dark
value or vice versa)
Are there any applications of contrast ✓ These primitive features are
in font sizes with the same type? responsible for the makeup of
an element
Are the header and footer of the ✓ headers can keep pages
page darker than the content area? organized. In Word
footers can do the same.
7. Unity and Harmony
Does the page look disorganize? ✓ It’s organized.
Are all the principles applied properly ✓ Consistency is one of
with consistency in the design as a the design principles that we
whole? like to violate frequently.
Does the use of combined elements ✓ Yes, it is about creating
relate to the purpose of the website harmony among the elements
and creates harmony in the design?
Does the website meet its purpose of ✓ Having a simple clear intention
providing a clear message in all the on all pages will help the user
pages of web design? interact with what you have to
offer.

WHAT I HAVE LEARNED

2. https://eduaction.mincraft.net
➢ Minecraft is one of the most popular games of all time, beloved by
players of all ages around the world. Most learners easily engage with
Minecraft: Education Edition because of their familiarity with the basic
game mechanics of
Minecraft. (source: ) Minecraft: Education Edition is a game-based
learning platform that develops creativity, collaboration,
communication, and problem-solving in an immersive learning
environment.

3. https://teachforthephilippines.org
➢ Teach for the Philippines is a for-purpose, non-stock, non-profit
organization that works to ensure all Filipino children benefit from an
excellent, inclusive, and relevant education.

4. https://arvr.google.com/ar
➢ Augmented reality overlays digital content and information onto the
physical world — as if they’re actually there with you, in your own
space. AR opens up new ways for your devices to be helpful
throughout your day by letting you experience digital content in the
same way you experience the world. It lets you search things visually,
simply by pointing your camera at them. It can put answers right where
your questions are by overlaying visual, immersive content on top of
your real world.
 5. https://www.com.canva
➢ Move faster and create designs together in real-time. From
presentations to Instagram posts and more, you can create a team with
Canva and collaborate on any device, anywhere in the world. Forget
complicated registrations or approval processes. Simply invite your
team, choose their access permissions, and start creating in seconds.
Find, join, and create multiple teams for different projects all in one
place.

WHAT I CAN DO

Web design refers to the design of websites that are displayed on the
internet. It usually refers to the user experience aspects of website
development rather than software development. Web design used to be
focused on designing websites for desktop browsers; however, since the
mid-2010s, design for mobile and tablet browsers has become ever-
increasingly important."

How will you feel when you visit a good and a bad web page design?
"In today’s world, which is synonymous with technology, a robust web
design is far more than a status symbol. Usability, experiences, and
content – or the lack thereof – can seriously affect a business’ bottom line.
There are real-world consequences for neglecting your website – but
companies may not fully realize the extent of the damage."
Of course, You will feel bad when you visited a website with bad web page
design, why? Because, First, it will take your time and money. If it has bad
web design then it isn't worth it. Second, It might damage your credibility
especially if you are depending on the website and you have suffered
because of its poor performance. Third, the information you might get
might be cluttered, outdated and fake. Bad web page design nowadays
may suggest unworthy content.

How about when you visited a website with good and smooth web page
design?
Of course, You'll be happy and contented. You will be satisfied, you can
use your time well, and you can trust the content as well.
ASSESSMENT
1. B
2. D
3. A
4. D
5. B
6. C
7. A
8. C
9. C
10. B
11. D
12. B
13. D
14. B
15. B