SENIOR HIGH SCHOOL
EMPOWERM
ENT
TECHNOLOG
Imaging and design for Online
IES
Environment
BALANCE
There are two basic types of balance: symmetrical and
asymmetrical. Symmetrical designs layout elements of
equal weight on either side of an imaginary center line.
Asymmetrical balance uses elements of differing weights,
often laid out in relation to a line that is not centered
within the overall design.
The visual weight of objects, texture, colors and space is
evenly distributed on the screen. The colors should have a
similar visual weight.
EMPHASIS
An area in the design
that may appear
different in size,
texture, shape or color
to attract the viewer’s
attention
REPETITION, RHYTHM, PATTERN
Repetition is a great way to reinforce an idea. It’s also a great way
to unify a design that brings together a lot of different elements.
Repetition can be done in a number of ways: via repeating the
same colors, typefaces, shapes, or other elements of a design.
The spaces between repeating elements can cause a sense of
rhythm to form, similar to the way the space between notes in a
musical composition create a rhythm. There are five basic types of
visual rhythm that designers can create: random, regular,
alternating, flowing, and progressive. Patterns are nothing more
than a repetition of multiple design elements working together.
Wallpaper patterns are the most ubiquitous example of patterns
that virtually everyone is familiar with.
Alignment
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.
Hierarchy
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. By applying this principle, it can help the
viewer to recognize and navigate the highlight of
the event smoothly.
Contrast
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). The contrast gives visual weight to an
object or design. You must consider and limit the use of different
elements, color, style, and typography to avoid cluttered design.
When creating contrast in color and text, it is advised to choose a
color from the background to create consistency of your design.
Always remember that the details must be readable by having a
dark-light value of either text and background or vice-versa.
Unity and Harmony
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.
Infographics
Using
Piktochart
1. Create a Piktochart account by going to
www.piktochart.com and click sign up.
2. Fill up the information on the Sign Up
page; alternatively, you can connect with
Google+ Facebook:
3. Once you have created an account and
logged in, select a template for your Infographic.
4. The Piktochart editor will open. The Presentation
Board theme consists of three blocks (parts). Select
the blocks and input the information as you fit.
Principles and
Basic
Techniques of
Image
Manipulation
1. Choose the right file
format
Try to make a real-life photograph into
gif to see the difference between gif,
png and jpeg. Knowing the purpose is
the key to finding out the best file
format
2. Choose the right image
size
A camera with 12 megapixels constitutes to a
bigger image size. Monitors have a resolution
limit, so even if you have million megapixels, it
will not display everything. Thus, it is not
always wise to make our image big, most
especially in a website. Know how much space
you want image to consume. Or have a preview
image where the audience has the option to
see in full size
3. Caption it
Remember to put a caption images whenever
possible. If it is not related to the web page,
then remove it.
ACTIVIT
Y
