BASIC WEB DESIGN ARIAN EDULLANTES, MMITM,

MMEPM
PRINCIPLES AND ELEMENTS Empowerment Technologies
LEARNING OBJECTIVES
 At the end of the 1-week period, you will independently apply
the principles and techniques of design using online creation
tools, platforms, and applications to create original or derivative
ICT content for use in your professional tracks.

 More particularly:
 Understanding the nature and purpose of online platforms
 Apply the basic web design principles and elements
 Design web page using templates and online WYSIWYG platforms
REVIEW
 What are the 6 classifications of online platform?
DESIGN ELEMENTS
 The elements are components or parts which can be isolated and
defined in any visual design or work of art.
 They are the structure of the work, and can carry a wide variety
of messages.
 Point or Mark
• the smallest and most basic element
• vary in size, value, regularity or irregularity, and can be used alone
or as a unit in a group which forms a line or shape in the image.
• used to form a value or pattern (placed close together forms a darker
value, further apart forms a lighter value), or to delineate space
(larger means closer, etc.)
 Line
• a form with width and length, but no depth. Artists use lines to
create edges, the outlines of objects.
• The direction of a line can convey mood.
o Horizontal lines are calm and quiet, vertical lines suggest more of a
potential for movement
o Diagonal lines strongly suggest movement and give more of a feeling of
vitality to a picture
 Shape
• an area that is contained within implied line, or is seen and identified
because of color or value changes.
• have two dimensions, length and width, and can be geometric or free-
form.
 Forms
• describes volume and mass, or the three dimensional aspects of objects
that take up space. (Shape is two-dimensional)
• can and should be viewed from any angles. When you hold a baseball,
shoe, or small sculpture, you are aware of their curves, angles,
indentations, extensions, and edges---their forms.
 Space
• three-dimensional volume that can be empty or filled with objects.
• has width, height, and depth.
• Space that appears three-dimensional in a two-dimensional painting
is an illusion that creates a feeling of actual depth.
 Color
• 3 Properties
o hue, which is the name of the colors.
 The primary hues are yellow, red, and blue.
 Secondary colors are made by mixing two primaries.
 Intermediate colors are mixtures of a primary and adjacent secondary color.
o value, which refers to the lightness or darkness of hue.
o intensity, which refers to the purity of the hue (also called "chroma").
 Texture
• the surface quality, both simulated and actual, of artwork.
• Techniques used in painting serve to show texture, i.e. the dry brush
technique produces a rough simulated quality and heavy application
of pigment with brush or other implement produces a rough actual
quality.
DESIGN PRINCIPLES
 Balance
• psychological sense of equilibrium.
• As a design principle, balance places the parts of a visual in an aesthetically
pleasing arrangement.
• In visual images, balance is formal when both sides are symmetrical in terms of
arrangement.
• Balance is informal when sides are not exactly symmetrical, but the resulting image
is still balanced.
• Informal balance is more dynamic than formal balance and normally keeps the
learner's attention focused on the visual message.
• There are three main types of balance,
o horizontal balance
o vertical balance
o radial balance.
 Proportion
• the relative size and scale of the various elements in a design.
• The issue is the relationship between objects, or parts, of a whole.
• This means that it is necessary to discuss proportion in terms of the
context or standard used to determine proportions.
 Perspective
• created through the arrangement of objects in two-dimensional
space to look like they appear in real life.
• is a learned meaning of the relationship between different objects
seen in space.
• can be used to draw the audience into a visual.
• Perception can be achieved through the use of relative sizes of
objects, overlapping objects, and blurring or sharpening objects.
 Emphasis
• used by artists to create dominance and focus in their work.
• Artists can emphasize color, value, shapes, or other art elements to
achieve dominance.
• Various kinds of contrast can be used to emphasize a center of
interest.
 Movement
• The way the artist leads the eye in, around, and through a
composition.
• The path the eye follows.
• Motion or movement in a visual image occurs when objects seem to
be moving in a visual image.
• Movement in a visual image comes from the kinds of shapes, forms,
lines, and curves that are used.
 Pattern
• uses the art elements in planned or random repetition to enhance
surfaces or paintings or sculptures
• often occur in nature, and artists use similar repeated motifs to
create pattern in their work.
• increases visual excitement by enriching surface interest.
 Repetition
• works with pattern to make the artwork seem active.
• The repetition of elements of design creates unity within the
artwork.
 Rhythm
• the repetition of visual movement of the elements-colors, shapes,
lines, values, forms, spaces, and textures.
• essential to keep rhythms exciting and active, and to avoid
monotony.
• Movement and rhythm work together to create the visual equivalent
of a musical beat.
 Variety
• provides contrast to harmony and unity.
• consists of the differences in objects that add interest to a visual
image.
• can be achieved by using opposites or strong contrasts.
• Changing the size, point of view, and angle of a single object can
add variety and interest to a visual image.
• Breaking a repeating pattern can enliven a visual image.
 Harmony
• in visual design means all parts of the visual image relate to and
complement each other
• pulls the pieces of a visual image together.
• can be achieved through repetition and rhythm.
o Repetition reemphasizes visual units, connecting parts and creating an area
of attention.
o Rhythm is the flow depicted in a visual. Rhythm helps direct eye movement.
 Patterns or shapes can help achieve harmony.
 By repeating patterns in an interesting arrangement, the overall
visual image comes together.
 Unity
• the harmony of the whole composition.
• parts of a composition made to work together as a total visual
theme.
• the relationship among the elements of a visual that helps all the
elements function together
• gives a sense of oneness to a visual image. In other words, the words
and the images work together to create meaning.
SUMMARY
Design Elements Design Principles
Point or Mark Balance Repetition
Line Proportion Rhythm
Shape Perspective Variety
Forms Emphasis Harmony
Space Movement Unity
Color Pattern
Texture