IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT

Basic Principles of Graphics and Layout

The elements and principles of design are the building blocks of a successful
beautiful design. The elements of design are the things or tools that make up a design
while the principles of design are what we do to those elements.

The Elements of Design

These are the materials or tools to make different designs or Arts.

LINE –Lines are defined by points moving in space. It
can create a sense of movement or direction in your
design. Line can be smooth, rough, straight, curve,
broken, thick or thin.
SHAPE –A shape is an enclosed space, the boundaries of
which are defined by other elements of art like lines,
colors, values or textures. Shapes can be used to create
patterns and draw the viewer’s attention.
DIRECTION –Applying motion to create the visual illusion of movement. Use
horizontal direction for calmness, stability and tranquility while vertical direction for
emotions of balance, formality and alertness.

SIZE (SCALE) –Size is basically the relationship of

The area is occupied by one shape to another. Large elements mean more significant
things than the small ones.
TEXTURE –Texture refers to surface appearance of an
object given by the dimensions, form, thickness,
arrangement, and amount of its basic parts.

COLOR –Color is light redirected off objects. It is used to create curiosity and emotions to
the viewer’s. It has three main characteristics: hue (these are red, green, blue, etc.), value
(lightness/ darkness), and intensity (saturation, or amount of pigment) and temperature
(warm and cool).

The Principles of Design

These are the rules that help you organize and place the materials to make arts or designs.

1. BALANCE –Balance in design is the state of equal relationship. It means equal

distribution of visual weight in a design. It can be achieved by adjusting the visual weight
of each element, in terms of size, color, textures, shapes or contrast. Balance in graphic
design provides stability and structure to a design.
There are different kinds of balance:
Symmetrical balance occurs when identical weights are on equal sides of a
composition.

Asymmetrical balance occurs when a design have unequal graphic weight on either side,
but those unequal graphics need to balance each other (un-evenly balanced).
 Radial balance occurs when the design elements
swirl out from a central axis (emanating from a
central point)

2. PROXIMITY –Proximity maintains a

relationship between items that go together. It
helps creates organization by grouping the same
elements together or in close proximity. The
elements should be connected visually.

3. ALIGNMENT –Alignment refers to lining up the elements of a design along the

top, bottom, center or sides of the elements. It allows us to create order and organization
in our design. The whole point of the alignment is that nothing in your design should look
as if it were placed there randomly.

4. REPETITION, PATTERN, AND RHYTHM –Repetition duplicates the

characteristics of similar elements to contribute to design consistency. It strengthens a
design by tying together individual elements; pattern is a regular arrangement of
alternated or repeated elements like shapes, lines or colors; rhythm--is a combination of
elements repeated, but with variations.

5. CONTRAST –Contrast refers to the use of conflicting elements or colors while

9
still remaining harmonious and unified when the artwork is viewed as a whole. It allows
you to give emphasis to key elements in your design.

6. SPACE –It refers to the area that an object occupies. Both positive and negative
space should be considered in graphic design. White space gives your design breathing
room.

WHAT IS INFOGRAPHIC?

The term Information graphic or Infographic is a photographic presentation of data and

information that use the different elements of design to make data easily understandable at a
glance. Infographics make complex messages more visually appealing to the viewers. Visual
Message Design can help with effectiveness of delivery of a message. It can help me to present
your ideas clearly

USE IMAGE MANIPULATION TECHNIQUES

Photo editing and designing software allow you to manipulate or edit images. In order to
perform image manipulation, you need to have basic knowledge of image editing operations
such as cutting, cropping, replacing and more.
For this, you need image editing software for image manipulation practices.

The following are some examples of image editing software:

o Adobe Photoshop
o Gimp
o Corel Draw
o Pixlr Editor
PAINT.NET
 o InPixio

Online File Formats for Images and Text

The image file format refers to how data associated to the image will be stored. It
can be compressed to decrease the file size of the image. There are two different
compression you can choose when enhancing your images: loss and lossless compression.
Lossy compression reduces file size by removing redundant information means that some
data from the image file is lost. While Lossless compression retains values and manages to
lower file size.
Image resolution refers to the number of pixels in an image or the detail an image
holds. It is identified by the height and the width of the image. A pixel is just one unit of the
whole digital image it is the smallest unit of an image. The higher the resolution means that
there more pixels per inch (PPI), resulting in more pixel information and creating a high-
quality, crisp image.

ONLINE ICT PLATFORMS AS TOOLS FOR ICT CONTENT

DEVELOPMENT
1. Social Media Platforms
This platform allows you to create your personal account or profile. After you register on this website, it
will allow you to create pages or even groups where you can share content and ideas. Social Media
platforms enable you to connect yourself to other users and get updates on their news feed. Facebook,
Instagram and Twitter are examples of Social Media platforms.
2. Blogging Platforms
A platform on where a writer or even a group of writers can share views on an individual subject. It is
comparable to a newsletter where you can add menus, designs or even multimedia of a subject. Blogger is
an example of a blogging site. If you love to write or you want to share ideas online, blogging platforms
are the perfect tool you can use.
3. Content Management System or CMS
One of the features of this platform is that you can publish your own website and manage its content
through an intranet or in a single computer. This is software where you can easily create, update,
organize, and publish the content of your website. A popular example of CMS is WordPress.

ELEMENTS OF WEB DESIGN

1. Text - this is a mandatory element of a web page. However, visitors got distracted about the
font family of the text on website. So, while you are designing your website, make sure that to
choose well the font family and type that you need to use on your design and make the text clear
and readable size.
2. Graphics/ Illustrations - make sure your images or illustrations are not pixelated or must be
of good quality. There is time that text gives description to an image, so you make that these two
elements are well arranged.
3.White space - having a crowded website, it is very hard to direct the attention of your
visitor’s eye. This white space gives your website a room to breathe and to improve
readability and focus on elements.
4. Links - links or hyperlinks allow users to jump to another site or page that is related to
your site.
5. Color - the colors you use in your design is a very important aspect. There are times that
colors become visually distracting to your viewers. As some web designers do, they use the
company logo of their client as their color reference on their website.
6. Background – It provides a feeling of a surface underneath.

PRINCIPLES OF WEB DESIGN

A. Portable Design - website design must be portable and accessible. You need to be compatible
with other operating systems and web browsers. You should also design your website on which it
can access different computer platforms or devices, especially for those visitors who uses mobile
device to access a website.
B. Design for Low Bandwidth - not all users who are online are connected to a high-speed internet
connection. In designing a website, you need to avoid large graphics or animations as the users may
leave the site if downloading is slow.

C. Direction - identify the order of importance of the various elements and place them in a
sequence where the eye moves and perceives the things it sees. There should be consistent
layout and structure.

D. Simplicity - the more option you place in your site, the more difficult it is for a visitor to
make a decision and more time is required to browse through them. as what they usually say,
"simplicity is beauty".
E. Regular testing –every device or project needs maintenance, same as your website. The
website should be regularly upgraded, updated and tested so that problems will be quickly
resolved. Visitors who have encountered any errors like problems in loading or viewing your
website will not hold on.

WYSIWYG is an acronym for "what you see is what you get". There are many tools for
creating or designing websites. However, there are tools that offer WYSIWYG process. These
are tools on which the content (text and graphics) can be edited in a form closely resembling its
appearance when printed or displayed as a finished product, such as a printed document, web
page, or slide presentation:
1. Wix-. Its interface is one of the most intuitive, slick, and powerful in the ever-
growing group of website-building services. Wix offers standout features, such as online
storage for your site assets, cool video backgrounds, animations for titles, and mobile. It
offers free, professional, and business web hosting services.
2.Weebly- This free website builder allows you to build beautiful websites in a very short
period – even if you do not have any programming background.
3. WordPress -is the world’s most popular tool for creating websites. WordPress can create any
style of website, from a simple blog to a full-featured business website. You can even use
WordPress to create an online store. (Retrieved from
4. Drupal - It is a well-known content management system intended to help advanced
designers create a powerful website capable of handling large volumes of visitors and hundreds
of pages of content. (Retrieved from https://www.business.com/reviews/drupal/)

WEB MAPPING APPLICATIONS

 Web mapping applications are Web sites developed from geographical information system
(GIS) data. Mapping applications use GIS to create a visualization maps. Today, a Web map
is used not only for directions and locations but also to track consumer activity and to locate
stores and establishments.
The examples of mapping applications are:
Google Maps – This is a Web mapping application developed by Google. It shows both
graphics and satellite maps. The maps include street names, building names,
establishment names, and bus and train stations, to name a few. Some extension
applications include three-dimensional views of the satellite images and traffic
conditions. To access Google Maps, http://www.google.com.ph/maps/

WEB PAGE DESIGNING

Web Page
A Web page is a document for the World Wide Web that can be accessed and displayed on a
monitor or smartphone using any web browser. Web pages are made up of Hypertext Markup
Language (HTML) and can be created and modified by using basic applications like Notepad
and professional HTML editors.
HTML is Easy to Learn and Use

HTML is easy to learn and understand. For someone who wants to learn web development,
HTML is the first and foremost computer language that you need to take note but do not worry,
it is not a sensitive case and as simple as it is. It already has some tags that serve a specific
purpose to make. One can easily understand others‟ code and make changes in it when required
without reading a whole book of a manual. Moreover, it does not throw any error or create any
problem like other programming languages do when the developer forgets to close the tags or
makes mistakes in coding.

HTML

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of a web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by TAGS
 HTML TAGS label pieces of content such as “heading” <h>, “paragraph” <p>,
“table” <table> and so on...
 Browsers do not display HTML tags, but use them to render the content of the page

Requirements in creating a web page using html.

1. EDITOR – using the Notepad (source code) in text and extension name - .html or .htm.
2. BROWSER – responsible for reading HTML instruction and displaying the web page
output. (ex. Internet Explorer, Mozilla Firefox, Google Chrome).

CREATING A WEBSITE USING NOTEPAD

 ◦Web pages can be created and modified using professional HTML editors. However, in
learning HTML, it is better to use a simple text editor like Notepad.

Step 1: Open Notepad

For Windows 8 or above computers: a. Open the Start Screen (the window symbol at the
bottom left on your screen). b. Search and open the Notepad

Step 2: Write the following HTML

HTML documents are divided into two main sections the head and the body. Each section
contains specific information. The head section contains information about the documents
like title, search engine or keywords but is not visible to the reader. The body section
contains the information or content that you want to appear on the web page.

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file “MyfirstWebsite.html. It should always have “.html”

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your browser (double click on the file, or right-click- and
choose “Open with”)
Another example:

COLLABORATIVE DEVELOPMENT OF ICT CONTENT

Five Phases of Project Management

• Initiating – An overview of the objectives of the project, needs, and the problem is
identified. (Project Manager)
• Planning – The team brainstorms the ICT theme to be published, together with the
collaborative tools and online platforms to be used. (Project Manager and Project
Team)
• Executing – Executing the project plan once the project plan has been constructed.
(Content writers and editors)
• Monitoring and Controlling – Project manager monitors and controls the work for time,
cost, scope, quality, risk, and other factors while the project is being executed.
• Closing – Ensure that all the work has been finished, completed, and approved.