EMPTECH
DESIGN ELEMENTS TO DRAW
BASIC PRINCIPLES OF GRAPHICS
AND LAYOUT
Balance. The visual weight of
objects, texture, colors, and space is
evenly distributed on the screen.
-It refers to the proper arrangement
of the elements, which gives a visual
weight for the design.
Emphasis. An area in the design
that may appear different in size,
texture, shape or color to attract the
viewer's attention.
-It refers to something that needs to
stand-out or emphasize.
Movement. Visual elements guide
the viewer's eyes around the screen.
Pattern, Repetition, and Rhythm.
These are the repeating visual
element on an image or layout to
create unity in the layout or image.
Rhythm is achieved when visual
elements create a sense of
organized movement.
- 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
Proportion. Visual elements create
a sense of unity where they relate
well with one another.
VARIETY - USES SEVERAL
VIEWER’S ATTENTION
Basic principles of graphics and
layout
Understanding Graphic Design and
Layout
●Graphic design is an artistic way of
communicating ideas and messages
through visual expressions using
texts, images, and symbols.
●Graphic designers work on the
quality of the output they serve for
the audience or clients like websites,
advertisements, posters, flyers,
logos, videos, and any other
multimedia form.
●A practical graphic layout and
design can easily catch the attention
of the viewers and allow them to
understand the message
conveniently.
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.
Hierarchy - It refers to the proper
arrangement of the details such as
text, characters, numbers, and
symbols.
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).
Unity and Harmony - refers to the
relationship of elements or the
contents when you place them
together.
Harmony pulls the pieces of a visual
image together.
Harmony can be achieved through
repetition and rhythm
Basic Image Manipulation
An image editor is a software
application that allows the photo to
be edited and enhanced. It can be an
online application (www.canva.com),
offline software (Adobe Creative
Suite) and open source (GIMP
software and SketchUp - formerly
Google SketchUp). The image file
format that can be used are JPEG or
JPG, GIF and PNG.
Gimp manipulation techniques
Opening of image file - Click the
file>open (ctrl+o) . choos in the
directory where you saved the image
you want to edit, then click open
button.
2. Select Tools - can be seen in the
toolbox. It allow you to select a
portion of image you want to edit like
crop tool, rectangular tool, ellipse tool
and free tool.
3. Paintbrush tool - select paintbrush
too then click and hold the left mouse
button while drawing. You can
choose different colors in the
foreground color in the select tool.
4. Text tool - select text tool. It allow
you to create, edit, and display the
text.
Online Tools For Content
Development
Platform - refers to a program
created by developers that can be
modified or reprogrammed ny
outside users
It is any hardware or software used
to host an application or services
Online Platforms are online web sites
created to aid users in creating their
Online Web content and cater to
different kinds of information such as
texts, images, and videos.
Online Platforms for ICT content
Development
Social Media Platforms - websites
like facebook allow you to create not
only personal accounts but also
pages and groups where you can
share content.the only downside of
this is that you are restricted to
Facebook’s “ one-size-fits-all” design
Blogging Platforms- Like Word press,
Tumblr, And Blogger focus on
content and design. It typically looks
like a newsletter where you are given
options to change the design to your
liking. Though you can manipulate
the design, social media platforms'
popularity is still unrivaled. The
amount of customization in blogs is
also unrivaled depending on the
content management system
implemented by the provider.
FORTRAN - 1st effort of human to
create development platforms &
online platforms can be traced back
to the start of programmable
computers.
- 1st successful commercial
programming language
compiler, helped humans give
instructions & interact with
computers without altering the
hardware component of the
computer.
- This offline feature was broken
when Tim-Berners-Lee
introduced the world wide web.
Platforms Categories- the
application interface (API) is a set of
governing protocol / rules on how
software elements should
communicate And interact with 1
another. Commonly, API is used in
developing GUI.
YOUTUBE - Is a web site dedicated
to hosting video clips
- Capitalized this web site, an
API tool is created to enable
developers to embed the
youtube video player and play
any youtube content on their
websites.
FLICKR- a web site that caters to the
hosting of image.
-an API is created to enable a Web
sites developer to embed or use
images in Flickr.
- The image slide player API of
Flickr can further organize the
presentation of images in a
slide show fashion.
TWITTER - a social networking
service that enables users to send &
read short messages from 140
characters to 280 characters.
In Using Twitter API, users can find a
facility to create messages and tweet
those messages.
FACEBOOK - a social networking
websites that requires the user to
register an account and create a user
profile.
Facebook APIs are used to connect
an individual’s wall or an
oraganization ‘s Facebook account
so that the audience & users can
easily access Facebook services
connected to a Facebook account.
GOOGLE MAPS- are 1 of the most
used APIs by website developers.
Are used to indicate a location of an
establishment described on a
Websites.
WEB DESIGN PRINCIPLES AND
ELEMENTS
1. PURPOSE - in creating a
webpage, the designer should
define 1st the purpose of the
Webpage to determine the
theme of the site.
- this will help the
developer create a more
organized and relevant
site.
2. COMMUNICATION - the
information / text on a web site
should be concise & direct to
the point.
- The arrangement of the text
should be organized in a
manner that would entice
readers.
- Use headings, subheadings /
bullets and outlining will also
avoid long fuzzy sentences.
3. TYPEFACES - deals with text
format, text style, & text.
- The appearance of text
can greatly contribute
4. COLORS- The appropriate
combination of the foreground
color and background color
can produce a better viewing
experience not only in the
images & pictures but also in
the texts.
- Colors can introduce a
mood or make the web
site lively & enticing for
viewers.
5. IMAGES - Choosing the
correct images can connect
the Websites to viewers of the
audience effectively.
 - Images with proper create sections / groups of related
balance, color,and information.
contrast accompanied
by texts can deliver F- PATTERN - means that humans
great impact & tend to look heavily at the left side of
information to the a visual material more than the right
audience. side.

6. NAVIGATION - refers to the MOBILE - the popularity of using

facility that the audience can
use to go through the Web
sites and its subpages.
- There are several ways on
how to create an effective and
good navigation system on a
websites.
7. LAYOUTS - refers to the
physical arrangement of the
content & elements on a Web
sites.
- There are various ways
on how to do an
effective layout on a
Website, & typically,
these ways are
determined by the
creator / developer.
POSSIBLE LAYOUTS THAT WILL
GUIDE THE USERS FOR THEIR
TARGET AUDIENCE.
GRID- grid layouts can be useful
because they will enable the user to
mobile devices in viewing Web
Content is Increasing. The developer
then should the layout for mobile &
work stations.
8. LOAD TIME - another basis for
the success of a website is the
time that the web site will load /
appear onto the viewer’s
display service.
If the web site takes some time
to load, most especially if there
are too much content, the user
will most likely search for
another source.
Principles of VISUAL
MESSAGE DESIGN USING
INFOGRAPHICS
Infographics
Introduction
The term “Infographics” is applied to
information, data or knowledge that
is presented in graphic visual form overwhelmed by everything going on
and presents a clear message in your infographic.
quickly and clearly.
Simplicity

For instance, using too many

1. Be Unique
different images and designs or filling
Uniqueness backgrounds with too much color or
One of the most important aspects of full photographs may actually make
designing an effective infographic is your data harder to understand.
to make it engaging and memorable
This happens as the audience
with a unique twist on something that
becomes distracted trying to
everyone can relate to.
comprehend all the visual information
Problem being thrown at them, hindering their

Don’t just generate a basic bar graph ability to focus on the main point.

or chart inside a software application,

3. Be Creative & Bold
throw in your data, and expect
Creativity & Boldness
anyone to be super excited about it.
You need to design something For a truly impactful design that gets
unique that will capture the attention your message across, it’s important
of the audience you are seeking to to make sure that your main
draw in. message is bold and obvious. It also
needs to be creative enough to just
2. Keep It Simple give it that special little twist.
Even though you want to shoot for
For instance, a statement written in a
interesting and unique, don’t throw in
neutral font such as arial can
so much detail and extraneous
highlight the most important points by
information that the audience is
presenting a few of the words in a
creative font that artfully describes infographic is a simple way for
the meaning of each important word. people to share it with their friends.
Be sure to include links reminding
You can perhaps use shapes or
people that they want their friends to
images in place of some of the letters
enjoy the information they have just
or words to emphasize meaning
found. With a simple row of “share
me” buttons, readers can quickly
4. Less Is More
forward the information to their
Less Is More Facebook friends, Pinterest

Keeping your text minimal will most followers, Email contact list, Google

likely produce more impact than a plus circles, and more.

page full of words. People are

bombarded with information all day
long, including blaring images, bright
colors and blinking lights. Your goal
is to entice them to stop scrolling and
look at your infographic.

An effective image will grab the

attention of the audience with
something as simple as an effectively
displayed word that makes them stop
and read the important information
below it.

5. The Fortune is in the Forwarding

The final and most important thing

you want from an effective