MODULE 2

Empowerment Technologies

Visual design focuses on the aesthetics of a site and its related

materials by strategically implementing images, colors, fonts,
and other elements. A successful visual design does not take
away from the content on the page or function. Instead, it
enhances it by engaging users and helping to build trust and
interest in the brand.
usability.gov
https://www.usability.gov/what-and-why/visual-design.html

Learning Objectives
At the end of the lesson, you should be able to:

1. Evaluate existing Web sites and online resources based on

the principles of layout, graphic, and visual message
design.
2. Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose.
3. Create an original or derivative ICT content to effectively
communicate visual message in an online environment
related to specific professional tracks.
4. Manipulate text, graphics, and images to create ICT
content intended for an online environment.

0
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
Infographics (a clipped compound of "information" and "graphics") are graphic visual
representations of information, data, or knowledge intended to present information quickly and
clearly.[1][2] They can improve cognition by utilizing graphics to enhance the human visual system's
ability to see patterns and trends.[3][4] Similar pursuits are information visualization, data
visualization, statistical graphics, information design, or information architecture.[2] Infographics
have evolved in recent years to be for mass communication, and thus are designed with fewer
assumptions about the readers' knowledge base than other types of visualizations.[5] Isotypes are
an early example of infographics conveying information quickly and easily to the masses.[6]
Line is one of the seven elements of art. It is considered by most to be the most basic element of
art.
The Uses of Line
In terms of art, line is considered to be a moving dot. It has an endless number of uses in the
creation of art.
LINE
Line can control an viewer's eye. It can describe edges. It can indicate form as well as
movement. It can also indicate value and a light source in drawing.
When line is used for value or shading, we most typically see it used in the form of hatching or
cross hatching. Although these are arguably the most common forms of using line for adding value,
there is an endless number of ways that it can be used.
A simple way of thinking of a line is to imagine a point that moves...

The most common use of line is showing where

an object ends. This type of line is called
a contour line. Contour lines are most commonly
called outlines.

Line can also create the illusion of

form in a drawing. Line quality is
the thickness or thinness of a
line. By varying the line quality an
artist can show form in a drawing
with just the use of line.

1
 Line can also indicate shadow and form through the
use of cross contour lines. Cross contour lines
follow the contours of the object. Much like
running your finger around the form of an object.

Line- element of art. In terms of art, line can be

described as a moving dot. Line is perhaps the most
basic element of drawing.

The Ultimate Lesson Plan

“The Ultimate Lesson Plan” is a complete classroom
solution for art teachers that includes lesson plans,
videos, handouts, quizzes and more.

Types of Lines

Vertical lines - lines that move up and down without any slant.

2
Horizontal lines - lines that are parallel to the
horizon

Diagonal lines - lines that slant

Zigzag lines - lines made from a combination of

diagonal lines

3
 Curved lines - Lines that change direction
gradually

Line Variation - adding interest to your lines is important in creating successful artwork

Length - lines can be long or short

Width - lines can be wide or skinny

Texture - lines can be rough or smooth

Direction - lines can move in any direction

Degree of curve - lines can curve gradually or not at all
Line quality or line weight - refers to the thickness or thinness of a line. By varying the line quality
artists can make objects appear more 3-Deminsional and more interesting
Hatching and crosshatching - using lines to create value
Hatching - lines going in the same direction
Crosshatching - lines that cross
COLOR
Color is the element of art that is produced when light, striking an object, is reflected back to the
eye: that's the objective definition. But in art design, color has a slew of attributes which are
primarily subjective. Those include characteristics such as harmony — when two or more colors
are brought together and produce a satisfying effective response; and temperature — a blue is
considered warm or cool depending on whether it leans towards purple or green and a red whether
it leans towards yellow or blue.

4
 Subjectively, then, color is a sensation, a human reaction to a hue arising in part from the optic
nerve, and in part from education and exposure to color, and perhaps in the largest part, simply
from the human senses.
Early History
The earliest documented theory of color is from the Greek philosopher Aristotle (384–322 BCE),
who suggested that all colors came from white and black. He also believed that four basic colors
represent elements of the world: red (fire), blue (air), green (water), and gray (earth). It was the
British physicist and mathematician Isaac Newton (1642–1727) who figured out that clear light
was made up of seven visible colors: what we call ROYGBIV of the rainbow (red, orange, yellow,
green, blue, indigo, and violet).
Colors today are defined by three measurable attributes: hue, value, and chroma or intensity. Those
attributes were scientifically operationalized by the Peter Mark Roget of color, Boston artist and
teacher Albert Henry Munson (1858–1918).
The Science of Color
Munson attended the Julien Academy in Paris and won a scholarship to Rome. He held exhibits in
Boston, New York, Pittsburgh, and Chicago, and taught drawing and painting at the Massachusetts
School of Art between 1881 to 1918. As early as 1879, he was having conversations in Venice
with the design theorist Denman Waldo Ross about developing a "systematic color scheme for
painters, so as to determine mentally on some sequence before laying the palette."
Munson eventually devised a scientific system for classifying all colors with standard terminology.
In 1905, he published "A Color Notation," in which he scientifically defined colors, precisely
defining hue, value, and chroma, something that scholars and painters from Aristotle to da Vinci
had longed for.
Munson's operationalized attributes are:
 Hue: the color itself, the distinctive quality by which one can distinguish one color from another,
e.g., red, blue, green, blue.
 Value: the brightness of the hue, the quality by which one distinguishes a light color from a dark
one, in the range from white to black.
 Chroma or intensity: the quality that distinguishes a strong color from a weak one, the departure
of a color sensation from that of white or gray, the intensity of a color hue.

What Makes It a Shape?

Shapes are everywhere and all objects have shape. When painting or drawing, you create a shape
in two dimensions: length and width. You can add value to give it highlights and shadows, making
it look more three-dimensional.
However, it is not until form and shape meet, such as in sculpture, that a shape becomes truly
three-dimensional. That is because form is defined by including a third dimension, depth, to the
two flat dimensions. Abstract art is the most obvious example of the use of shape, but the element
of shape, organic and geometric alike, is central to much if not most artwork.

5
What Creates a Shape?
At its most basic, a shape is created when a line is enclosed: a line forms the boundary, and the
shape is the form circumscribed by that boundary. Line and shape are two elements in art that are
nearly always used together. Three lines are used to create a triangle while four lines can make a
square.
Shapes can also be defined by the artist using value, color, or texture to differentiate them. Shapes
might include a line in order to achieve this, or it might not: for example, shapes created with
collages are defined by the edges of contrasting material.
Geometric Shapes
Geometric shapes are those that are defined in mathematics and have common names. They have
clear edges or boundaries and artists often use tools such as protractors and compasses to create
them, to make them mathematically precise. Shapes in this category include circles, squares,
rectangles, triangles, polygons, and so forth.
Canvases are typically rectangular in shape, implicitly defining the clear edges and boundaries of
a painting or photograph. Artists such as Reva Urban purposefully break out of the rectangular
mold by using non-rectangular canvases or by adding on pieces that protrude out of the frames or
by adding three-dimensional swells, dips, and protrusions. In this manner, Urban moves beyond
the two-dimensionality of a rectangular confinement but still references the shapes.
Geometric abstract art such as Piet Mondrian's Composition II in Red, Blue, and Yellow (1930)
and Theo van Doesburg's Composition XI (1918) established the De Stijl movement in the
Netherlands. American Sarah Morris's Apple (2001) and street artist Maya Hayuk's work are more
recent examples of paintings including geometric shapes.
Organic Shapes
While geometric shapes are well-defined, biomorphic or organic shapes are just the opposite. Draw
a curving, semi-circular line and connect it where you began and you have an amoeba-like organic,
or freeform, shape.
Organic shapes are individual creations of the artists: they have no names, no defined angles, no
standards, and no tools that support their creation. They can often be found in nature, where organic
shapes can be as amorphous as a cloud or as precise as a leaf.
Organic shapes are often used by photographers, such as Edward Weston in his remarkably sensual
image Pepper No. 30 (1930); and by artists such Georgia O'Keeffe in her Cow's Skull: Red, White,
and Blue (1931). Organic abstract artists include Wassily Kandinsky, Jean Arp, and Joan Miro.
Positive and Negative Space
Shape can also work with the element space to create positive and negative spaces. Space is another
of the seven elements, and in some abstract art, it defines shapes. For instance, if you draw a solid
black coffee cup on white paper, the black is your positive space. The white negative space around
it and between the handle and the cup helps define the basic shape of that cup.
Negative and positive spaces were used with great imagination by M.C. Escher, in examples such
as Sky and Water 1 (1938), in which dark images of a flying goose evolve through progressively
lighter and then darker steps into dark swimming fish. Malaysian artist and illustrator Tang Yau
Hoong uses negative space to make political commentary on cityscapes, and modern and
ancient tattoo artists use positive and negative spaces combining ink and un-tattooed flesh.

6
Seeing Shape within Objects
In the first stages of drawing, artists will often break their subjects down into geometric shapes.
This is intended to give them a basis on which to create the larger object with more details and in
correct proportion.
For example, when drawing a portrait of a wolf, an artist might begin with basic geometric shapes
to define the animal's ears, snout, eyes, and head. This forms the basic structure from which he
will create the final work of art. Leonardo da Vinci's Vitruvian Man (1490) used geometric shapes
of circles and squares to define and comment on the anatomy of a human male.
Cubism and Shapes
As an acute observer, you can break any object down to its basic shape: Everything is made up of
a series of base shapes. Exploring the work of the Cubist painters is a great way to see how artists
play with this elementary concept in art.
Cubist paintings such as Pablo Picasso's Les Desmoiselles d'Avignon (1907) and Marcel
Duchamp's Nude Descending a Staircase No. 3 (1912) use geometric shapes as playful and
haunting references to the organic shapes of the human body.
PRINCIPLES OF DESIGN
The principles of design are the rules a designer must follow to create an effective and attractive
composition. The fundamental principles of design are Emphasis, Balance and Alignment,
Contrast, Repetition, Proportion, Movement and White Space.
Design differs from art in that it has to have a purpose. Visually, this functionality is interpreted
by making sure an image has a center of attention, a point of focus. Maybe you’re thinking, ‘But
wait! I thought design was all about creativity?’ If you’re an entrepreneur or designer who’s just
starting out, you might be tempted to go wild and combine the first five typefaces and colors that
catch your eye, believing you’re creating something fresh and new. You will probably find
yourself with a design that is muddled, unfinished, or well, just plain ugly.
Graphic design, like any discipline, adheres to strict rules that work beneath the surface to make
the work stable and balanced. If the work is missing that balance, it will be weak and ineffective.
This article will take you through 7 basic principles of design that will make your next project
stand out.
1. Emphasis
Say you’re creating a poster for a concert. You should ask yourself: what is the first piece of
information my audience needs to know? Is it the band? Or the concert venue? What about the day
and the cost of attending?
Make a mental outline. Let your brain organize the information and then lay out your design in a
way that communicates that order. If the band’s name is the most essential information, place it in
the center or make it the biggest element on the poster. Or you could put it in the strongest, boldest
type. Learn about color theory and use strong color combinations to make the band name pop.
2. Balance and alignment
Never forget that every element you place on a page has a weight. The weight can come from
color, size, or texture. Just like you wouldn’t put all your furniture in one corner of a room, you

7
can’t crowd all your heavy elements in one area of your composition. Without balance, your
audience will feel as if their eye is sliding off the page.
Symmetrical design creates balance through equally weighted elements aligned on either side of a
center line. On the other hand, asymmetrical design uses opposite weights (like contrasting one
large element with several smaller elements) to create a composition that is not even, but still has
equilibrium.
3. Contrast
Contrast is what people mean when they say a design “pops.” It comes away from the page and
sticks in your memory. Contrast creates space and difference between elements in your design.
Your background needs to be significantly different from the color of your elements so they work
harmoniously together and are readable.
If you plan to work with type, understanding contrast is incredibly essential because it means the
weight and size of your type are balanced. How will your audience know what is most important
if everything is in bold?
4. Repetition
If you limit yourself to two strong typefaces or three strong colors, you’ll soon find you’ll have to
repeat some things. That’s ok! It’s often said that repetition unifies and strengthens a design. If
only one thing on your band poster is in blue italic sans-serif, it can read like an error. If three
things are in blue italic sans-serif, you’ve created a motif and are back in control of your design.
Repetition can be important beyond one printed product. Current packaging design is heavily
embracing beautiful illustrated patterns. Anyone thinking about a startup knows one of the first
things you need is a strong logo to feature on your website, business cards, social media and more.
Brand identity? Another term for repetition.
5. Proportion
Proportion is the visual size and weight of elements in a composition and how they relate to each
other. It often helps to approach your design in sections, instead of as a whole.
Grouping related items can give them importance at a smaller size—think of a box at the bottom
of your poster for ticket information or a sidebar on a website for a search bar. Proportion can be
achieved only if all elements of your design are well-sized and thoughtfully placed. Once you
master alignment, balance, and contrast, proportion should emerge organically.
6. Movement
Going back to our concert poster. If you decided the band was the most important piece of
information on the page and the venue was the second, how would you communicate that with
your audience?
Movement is controlling the elements in a composition so that the eye is led to move from one to
the next and the information is properly communicated to your audience. Movement creates the
story or the narrative of your work: a band is playing, it’s at this location, it’s at this time, here’s
how you get tickets. The elements above—especially balance, alignment, and contrast—will work
towards that goal, but without proper movement, your design will be DOA.
If you look at your design and feel your eye get “stuck” anywhere on it—an element is too big,
too bold, slightly off-center, not a complimentary color—go back and adjust until everything is in
harmony.

8
 7. White space
All of the other elements deal with what you add to your design. White space (or negative space)
is the only one that specifically deals with what you don’t add. White space is exactly that—the
empty page around the elements in your composition. For beginning designers it can be a perilous
zone. Often simply giving a composition more room to breathe can upgrade it from mediocre to
successful.
White space isn’t sitting there doing nothing—it’s creating hierarchy and organization. Our brains
naturally associate ample white space around an element with importance and luxury. It’s telling
our eyes that objects in one region are grouped separately from objects elsewhere.
IMAGE FILE FORMAT
The most common image file formats, the most important for cameras, printing, scanning, and
internet use, are JPG, TIF, PNG, and GIF.
 JPG is the most used image file format. JPG is the file extension for JPEG files (Joint Photographic
Experts Group, a committee of ISO and ITU). Digital cameras and web pages use JPG files,
because JPG heroically compresses the data to be very much smaller in the file. JPG uses loss
compression to accomplish this feat, which has a strong downside. A smaller file, yes, there is
nothing like JPG for small, but this is at the cost of image quality. However, this compression
degree is optionally selectable (with an option setting named JPG Quality in your editor), to
be lower quality smaller files, or to be higher quality larger files. Small file size and high image
quality are opposites.
 TIF is lossless (including LZW compression option), which is considered the highest quality
format for commercial work. The TIF format is not necessarily any "higher quality" per se (the
same RGB image pixels, they are what they are), and most formats other than JPG are lossless too.
TIF simply has no JPG artifacts, no additional losses or JPG artifacts to degrade and detract from
the original. And TIF is the most versatile, except that web pages don't show TIF files. For other
purposes however, TIF does most of anything you might want, from 1-bit to 48-bit color, RGB,
CMYK, LAB, or Indexed color.
 GIF was designed by CompuServe in the early days of computer 8-bit video, before 24 bits or JPG
was used, for video display at dial up modem speeds. GIF discards all Exif data, which because
GIF was designed for video screen purposes, GIF does Not retain printing resolution values. GIF
always uses lossless LZW compression, but it is always an indexed color file (1 to 8-bits per pixel).
GIF can have a palette of 24-bit colors, but only a maximum of 256 of them (which colors depend
on your image colors). GIF is rather limited colors for color photos, but is generally great for
graphics. Repeating, don't use GIF with indexed color for color photos today, the color is too
limited. GIF does offer transparency and animation. PNG and TIF files can also optionally handle
the same indexed color mode that GIF uses, but they are more versatile with other choices too (can
be RGB or 16 bits, etc.). But GIF is still very good for web graphics (i.e., with a limited number
of colors). For graphics of only a few colors, GIF can be much smaller than JPG, with more clear
pure colors than JPG).

9
 PNG can replace GIF today (web browsers show both), and PNG also offers many options of TIF
too (indexed or RGB, 1 to 48-bits, etc.). PNG offers an 8-bit mode to replace indexed 256 color
GIF files, or a 24-bit mode for a possible 16.7 million colors for photos. PNG was invented more
recently than the others, designed to bypass possible LZW compression patent issues with GIF
(which never actually became an issue). And since PNG was more modern, it offers other options
too (RGB color modes, 16 bits, etc.). One additional feature of PNG is transparency for 24 bit
RGB images. Normally PNG files are a little smaller than LZW compression in TIF or GIF (all of
these use lossless compression, of different types), but PNG is a bit slower to read or write. That
patent situation has gone away now, but PNG remains excellent lossless compression.
 Camera RAW files are very important of course, but RAW files must be processed into regular
formats (JPG, TIF, etc.) to be viewable and usable in any way. Make no mistake, Shooting Raw is
a philosophy, not just a setting. RAW involves a little easy extra work, but offers substantial
benefits, one of which is we can choose our settings AFTER we can actually see the image, and
see what it needs, and see what helps it, and can still change our minds and try something else.

INTERNET RESOURCES

Infographic
https://en.wikipedia.org/wiki/Infographic
The Elements of Art - "Line"
https://thevirtualinstructor.com/line.html
How Is Color Defined in Art?
Esaak
https://www.thoughtco.com/definition-of-color-in-art-182429
How Would You Define "Shape"?
Esaak
https://www.thoughtco.com/definition-of-shape-in-art-182463
The 7 principles of design
Reid
https://99designs.com/blog/tips/principles-of-design/
A few scanning tips
https://www.scantips.com/basics09.html

10
 EXPLORATION

LESSON 2: Graphics and Layout

Name: Score:
Section: Date:

Create an INFOGRAPHICS using the different lines and shapes, explain the meaning of your
drawing in 1-2 sentences. (10 pts)

11
 EXPLANATION

LESSON 2: Graphics and Layout

Name: Score:
Section: Date:

Differentiate graphics and layout in tagalog. (10 pts. each)

___________________________________________________________________________ Formatted: Centered

___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
Formatted: Centered

12
13