EMPTECH VARIETY - USES SEVERAL

DESIGN ELEMENTS TO DRAW

BASIC PRINCIPLES OF GRAPHICS VIEWER’S ATTENTION
AND LAYOUT
Basic principles of graphics and
Balance. The visual weight of layout
objects, texture, colors, and space is
evenly distributed on the screen. Understanding Graphic Design and
-It refers to the proper arrangement Layout
of the elements, which gives a visual ●Graphic design is an artistic way of
weight for the design. communicating ideas and messages
through visual expressions using
Emphasis. An area in the design texts, images, and symbols.
that may appear different in size,
texture, shape or color to attract the ●Graphic designers work on the
viewer's attention. quality of the output they serve for
-It refers to something that needs to the audience or clients like websites,
stand-out or emphasize. advertisements, posters, flyers,
Movement. Visual elements guide logos, videos, and any other
the viewer's eyes around the screen. multimedia form.

●A practical graphic layout and

Pattern, Repetition, and Rhythm. design can easily catch the attention
These are the repeating visual
of the viewers and allow them to
element on an image or layout to
create unity in the layout or image. understand the message
Rhythm is achieved when visual conveniently.
elements create a sense of
organized movement. Alignment - It refers to the proper
- The use of repetitive elements placement of an element to your
such as lines, shapes, forms, design, just like invisibly placing or
textures, space, colors, font, aligning your texts or images
style, and the like to create diagonally, vertically, and
texture, movement, continuity,
horizontally.
and consistency of the design

Hierarchy - It refers to the proper

Proportion. Visual elements create arrangement of the details such as
a sense of unity where they relate
well with one another.
text, characters, numbers, and Opening of image file - Click the
symbols. file>open (ctrl+o) . choos in the
directory where you saved the image
Contrast - It refers to the use of you want to edit, then click open
different or opposite elements such button.
as sizes (large or small), shapes
(geometric or organic), spaces 2. Select Tools - can be seen in the
(negative or positive), form (real or toolbox. It allow you to select a
abstract), colors (monochromatic, portion of image you want to edit like
complementary, triadic, tetradic), crop tool, rectangular tool, ellipse tool
texture (smooth or rough), and and free tool.
values (light or dark).
3. Paintbrush tool - select paintbrush
too then click and hold the left mouse
Unity and Harmony - refers to the button while drawing. You can
relationship of elements or the choose different colors in the
contents when you place them foreground color in the select tool.
together.
4. Text tool - select text tool. It allow
Harmony pulls the pieces of a visual you to create, edit, and display the
image together. text.

Harmony can be achieved through Online Tools For Content

repetition and rhythm Development

Basic Image Manipulation Platform - refers to a program

An image editor is a software created by developers that can be
application that allows the photo to modified or reprogrammed ny
be edited and enhanced. It can be an outside users
online application (www.canva.com),
offline software (Adobe Creative
Suite) and open source (GIMP It is any hardware or software used
software and SketchUp - formerly to host an application or services
Google SketchUp). The image file
format that can be used are JPEG or Online Platforms are online web sites
JPG, GIF and PNG. created to aid users in creating their
Online Web content and cater to
Gimp manipulation techniques
different kinds of information such as computers without altering the
texts, images, and videos. hardware component of the
computer.
Online Platforms for ICT content - This offline feature was broken
Development when Tim-Berners-Lee
introduced the world wide web.
Social Media Platforms - websites
like facebook allow you to create not Platforms Categories- the
only personal accounts but also application interface (API) is a set of
pages and groups where you can governing protocol / rules on how
share content.the only downside of software elements should
this is that you are restricted to communicate And interact with 1
Facebook’s “ one-size-fits-all” design another. Commonly, API is used in
developing GUI.
Blogging Platforms- Like Word press,
Tumblr, And Blogger focus on YOUTUBE - Is a web site dedicated
content and design. It typically looks to hosting video clips
like a newsletter where you are given - Capitalized this web site, an
options to change the design to your API tool is created to enable
liking. Though you can manipulate developers to embed the
the design, social media platforms' youtube video player and play
popularity is still unrivaled. The any youtube content on their
amount of customization in blogs is websites.
also unrivaled depending on the
content management system FLICKR- a web site that caters to the
implemented by the provider. hosting of image.
-an API is created to enable a Web
FORTRAN - 1st effort of human to sites developer to embed or use
create development platforms & images in Flickr.
online platforms can be traced back
to the start of programmable - The image slide player API of
computers. Flickr can further organize the
presentation of images in a
- 1st successful commercial slide show fashion.
programming language
compiler, helped humans give
instructions & interact with
TWITTER - a social networking organized and relevant
service that enables users to send & site.
read short messages from 140
characters to 280 characters. 2. COMMUNICATION - the
information / text on a web site
In Using Twitter API, users can find a should be concise & direct to
facility to create messages and tweet the point.
those messages.
- The arrangement of the text
FACEBOOK - a social networking should be organized in a
websites that requires the user to manner that would entice
register an account and create a user readers.
profile. - Use headings, subheadings /
bullets and outlining will also
Facebook APIs are used to connect avoid long fuzzy sentences.
an individual’s wall or an
oraganization ‘s Facebook account 3. TYPEFACES - deals with text
so that the audience & users can format, text style, & text.
easily access Facebook services - The appearance of text
connected to a Facebook account. can greatly contribute

GOOGLE MAPS- are 1 of the most 4. COLORS- The appropriate

used APIs by website developers. combination of the foreground
Are used to indicate a location of an color and background color
establishment described on a can produce a better viewing
Websites. experience not only in the
images & pictures but also in
WEB DESIGN PRINCIPLES AND the texts.
ELEMENTS - Colors can introduce a
mood or make the web
1. PURPOSE - in creating a site lively & enticing for
webpage, the designer should viewers.
define 1st the purpose of the
Webpage to determine the 5. IMAGES - Choosing the
theme of the site. correct images can connect
- this will help the the Websites to viewers of the
developer create a more 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 mobile devices in viewing Web
use to go through the Web Content is Increasing. The developer
sites and its subpages. then should the layout for mobile &
work stations.
- There are several ways on
how to create an effective and
good navigation system on a 8. LOAD TIME - another basis for
websites. the success of a website is the
time that the web site will load /
7. LAYOUTS - refers to the appear onto the viewer’s
physical arrangement of the display service.
content & elements on a Web
sites. If the web site takes some time
- There are various ways to load, most especially if there
on how to do an are too much content, the user
effective layout on a will most likely search for
Website, & typically, another source.
these ways are
determined by the Principles of VISUAL
creator / developer. MESSAGE DESIGN USING
INFOGRAPHICS
POSSIBLE LAYOUTS THAT WILL
GUIDE THE USERS FOR THEIR Infographics
TARGET AUDIENCE.
Introduction
GRID- grid layouts can be useful The term “Infographics” is applied to
because they will enable the user 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