Understanding Graphic Design and Layout

Module 5: Imaging and Design for the Online Environment

A good website must know its target audience, determine its needs, and communicate effectively using the basic
principles of graphics 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.

Graphic Design vs. Layout

Design is a plan of creating an idea through a combination of texts, images, and other elements that are placed
together artistically, whereas, the layout is a term used as the process of organizing and arranging these elements in
a design as you plot it in a paper.

Basic Principles of Design and Layout

1. Balance - It refers to the proper arrangement of the elements, which gives a visual weight for the design.
Types of Balance: Symmetrical balance (mirror-based) - elements are equally distributed on both
sides
Asymmetrical balance - free layout where the elements can be placed in any order
2. Emphasis - It refers to something that needs to stand-out or emphasize.
3. Pattern, Repetition and Rhythm - 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.
4. 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.
5. Hierarchy - It refers to the proper arrangement of the details such as text, characters, numbers, and
symbols. Changing its character size, thickness, spaces, or even font type to stand out is its most critical
features.
6. 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).
7. Unity and Harmony - It refers to the relationship of the elements or the contents when you place them
together. The elements of the design must work together and agree to its meaning, theme, feeling, or mood.

Principles of Visual Message Design Using Infographics

Module 6: Imaging and Design for Visual Message Using Infographics

Infographics is the portmanteau or combination of the words ‘information’ and ‘Graphics’, meaning, information
from graphics. The main purpose of an infographic is to engage and to make understanding easier. Remember that
infographics are not used to make documents more appealing, but the use of graphical elements that will improve
how quickly and easily an idea or information is presented.

Graphs and Charts as Infographics

 Bar graphs – These are primarily used in comparing sets of data. They visualize the difference between
values in a table and show rate of change over time.
 Line graphs – These are more suitable in showing trends.
 Pie charts – These are circular statistical graphical representation of proportion or percentage.
 Forest graphs – These graphs are used to visually represent values within a group and compare them to
other groups.
 Radial graphs – These are similar to a forest graph in many aspects but are presented using a circle.
Basic Image Manipulation
Module 7: Imaging and Design for 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, TIFF, GIF and PNG.

Components of GIMP
It is a basic part of GIMP that contains the window that has tool box, work area and layers window.

Online Creation Tools, Platforms, and Applications for ICT

Content Development
Module 8: Online Creation Tools, Platforms, and Applications for ICT Content Development

Online platforms have transformed the access of information and communication into greater heights. They provide
opportunities for any person to tell, share, and even sell his or her ideas and stories to the world in just one click.

ONLINE CREATION TOOLS AND APPLICATIONS

Online creation tools and applications have a blurry distinction in the definition. An application is usually understood
to be a larger, more complex piece of software, whereas a tool typically is designed for a specific use case.

EXISTING ONLINE CREATION TOOLS AND APPLICATIONS FOR SPECIFIC PURPOSES

Audio and Visual Content Creation Tools and Applications
A. Audio: These tools and applications allow users to create, edit, trim, remix, and publish kinds of music and
sounds.
Examples: Hobnox Audiotool, Twisted Wave Audio Editor, Audi Trimmer
B. Infographics: These tools and applications give users the chance to create a creative and stunning
infographic.
 Examples: Creately, Piktochart, Canva
C. Video: These tools and applications allow users to edit and create videos online.
Examples: Powtoon, WeVideo, YouTube Video Editor
D. Presentations: These tools and applications let the users utilize images, videos, and graphics on their
presentations to get into the minds of their target audience.
Examples: Prezi, Haiku Deck, Emaze
E. Memes: The Internet is full of colorful images and videos because audiences love them and sharing them.
Examples: Imgur, Rage Comic Generator, QuickMeme

Online Offices
These applications and tools are word processors, spreadsheets, slides, and survey forms that work in cyberspace.
Examples: Google (doc, sheets, slides, forms), Microsoft Office 365, Microsoft Forms

Content Management System (CMS) is an application that allows the user to publish, edit, manipulate, organize, and
delete web content.

ONLINE PLATFORMS
Online platforms can also be defined as digital services that enable collaboration between two or more different but
interdependent groups of users who interact through the internet. Online platforms allow users to develop ICT
content to connect, communicate, and collaborate with other users in the online world.

EXISTING ONLINE PLATFORMS

Online platforms are categorized according to the services they provide.
A. Presentation/ Visualization: These are online platforms that let you showcase and share presentations,
infographics, and videos with other people.
Examples: Prezi, Zoho, Slide Shares
B. Cloud Computing: This type of platform allows you to upload, download, organize, and store files on the
online storage which is called cloud instead of using offline storage like a computer desktop. Here, users can
share and even collaborate files with other users.
Examples: Google Drive, Dropbox, OneDrive
C. Social Media: These are interactive online technologies that enable the creation or sharing of information,
ideas, career interests, and other forms of expression through virtual communities and networks.
Examples: Facebook, Twitter, Instagram
D. Mapping: This online platform provides detailed information about geographical regions and sites around
the world. It allows the embedding of maps into proprietary sites.
Examples: Google Maps, Bing Maps, Wikimapia
E. File Management: This online platform allows you to convert and manage files like images, videos,
documents, audio, and more to other formats without downloading a software tool.
Examples: Zamzar, Word2pdf, CloudConvert
F. Web Page Creation: It is an online platform that lets you build a web page that includes colors, texts, images,
and often contains links to media such as video and audio.
Examples: WordPress, Wix, Weebly

WHICH ONLINE PLATFORMS AND APPLICATIONS WILL YOU CHOOSE?

To help you decide which online platforms and applications are suited for you, you should consider the following:
a. Address Specific Purpose: Make sure that they have features that are fitted to your needs. They should help
you create content that you wanted to develop.
b. Easy to Use: Good platforms and applications must have a friendly interface.
c. Collaborative Features: As much as possible, choose platforms and applications that promote collaboration.
d. Browser Support: You need to ensure that a variety of browsers supports your chosen online platforms and
applications.
e. Content Security: Any platforms or applications must guarantee the security of users’ data—for instance,
features of content privacy or the ability to delete content.

Basic Web Page Creation

Module 9: Web Page Designing

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 application like Notepad and professional HTML editors.

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”, “paragraph”, “table” and so on...
 Browsers do not display the HTML tags, but use them to render the content of the page

Requirements in creating a web page using the HTML

1. Editor – using the Notepad (source code) in text and file extension (.html or .htm)
2. Browser – display the web page output. (ex. Internet Explorer, Mozilla Firefox, Google Chrome)

HTML Sections
1. Head section contains information about the documents like title, search engine or keywords but is not visible to
the reader.
2. Body section contains the information or content that you want to appear on the web page.

Creating a Website Using Notepad

1. Open notepad
2. Write HTML document
Example: <html>
<head>
<title> My First Website </title>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
3. Save the file in HTML format (.html or htm)
4. View the HTML page in Browser

WYSIWYG is the acronym for What You See Is What You Get. This means that whatever you will type, insert, draw,
place, rearrange, or whatever you do on a web page is what the audience will see.

Creating a Website Using an Online Website Builder

1. In the browser, access any Online Website Builder (Wix, WordPress, Weebly)
2. Create an account
3. Choose a template and customize your website
4. Update texts and images
5. Personalize the background (Use HD images)
6. Add Pages
7. Publish your website

Web Page Design Using Templates and online WYSIWYG

Platforms
Module 10: Web Page Design Using Templates and online WYSIWYG Platforms
Web Page Design
A website is a collection of publicly accessible, interlinked web pages that share a single domain name. Websites can
be created and maintained by an individual, group, business or organization to serve a variety of purposes. Web
design is a similar process of creation, with the intention of presenting the content on electronic web pages, which
the end-users can access through the internet with the help of a web browser.

Basic Elements of Web Design

1. Layout – It should be simple, familiar, intuitive, clean, and accessible.
2. Colour - As for choosing a color scheme, paying attention to your topic, brand or industry perspectives, along
with your target audience demographics will make this a somewhat a painless process.
3. Navigation - Navigational elements which can exist in a site’s header, body, and footer simply serve to direct
your visitors to the information they desire as quickly as possible.
4. Fonts - Your text should be easily readable, which generally means body copy should be at least 16 pixels.
5. Content - Information should be easy to read and digest

Collaborative Development of ICT Content

Module 11: Collaborative Development of ICT Content

Team Structure and Dynamics for ICT Content

Group involves people who work independently to achieve its goal, while a Team works interdependently where
each
member has a specific role or function. Thus, the team interacts dynamically and adoptively to reach its common
goal.

Team Structure refers to the creation of an individual team or the creation of a multi-system. It is an essential
component of the teamwork process. A well-structured team is an enabler for and the result of effective
communication, leadership, situation monitoring, and support. An effective team structure works collaboratively. It
is the key to the success of the ICT project. Collaboration means individuals work together to produce/ create a well-
defined content to achieve a common business purpose.

Online collaboration is a work process where people are interacting in real-time over the internet. It provides a
smooth process in the development of ICT content even without working together physically. A team must consider
these Four (4) Parts of Collaboration in a Flow Process while interacting with team members:
• Sharing: documenting explicit knowledge
• Understanding: adopting the process knowledge
• Reflection: analyzing or interpreting shared information
• Expression: the process of making known ones thought or feelings

Team Members
An effective team structure is composed of efficient team members who have specific roles and responsibilities.
These team members include:
1. Project Manager: An individual who has general accountability for the successful initiation, planning, design,
execution, monitoring, controlling, and closure of a project.
2. Data Analyst: Someone who gathers, processes, and performs statistical analyses of Data. A person who is
accountable in collecting the data for ICT content.
3. Content Writer and Editor: A person responsible for reviewing the data and finalizes a complete of
information.
4. Web Designer – A person responsible for creating the appearance, layout, and elements of a website. The
job involves understanding both graphic design and computer programming.
5. Web Developer – The person technically develops the overall functionalities of a web page.

Characteristics of Good Collaborative Tools and Platforms

Always remember that there are no superior tools. The productivity of a tool is dependent on the intended purpose
of the team. Hence, in choosing an appropriate tool, the team must consider the following:
 • The tool must be user friendly.
• The tool has elements that are appropriate for the team's goal.
• The tool prioritizes security and privacy.

Project Management for ICT Content

Project Management is done by applying and integrating project management processes which are organized in five
distinct phases:
• Initiating - An overview of the objectives of the project, needs, and the problem is identified.
• Planning - This is where a successful project conclusion is worked out by the project manager and the
project team. The team brainstorms the ICT theme to be published, together with the collaborative tools
and online platforms to be used.
• Executing - This is where the project team goes about executing the project plan once the project plan has
been constructed. The curation of ICT content may occur in this phase for quality assurance. Content writers
and editors are essential in this phase. After all the preparation has been done, publishing the ICT content
online may now take place.
• Monitoring and Controlling - This is where the project manager monitors and controls the work for a time,
cost, scope, quality, risk, and other factors while the project is being executed. It is also an ongoing process
that ensures that the project meets its focus for each project objective. Other members, primarily the web
developer, may work in this phase collaboratively with the project manager.
• Closing- This happens when each phase is ended and when each entire project is concluded. It happens to
ensure that all the work has been finished, completed, and approved.

Content curation is the process of publicly gathering, organizing, adding value, and openly sharing digital
information
artifacts on a specific topic or area of audience interest.

Creating and Choosing Valuable ICT Content

In developing ICT content, the team must consider the following steps in creating and choosing valuable ICT content.
1. Define your objectives: specify the main goal that needs to be promoted in your content.
2. Research and analyze: extract information from different resources regarding the topic you want to write.
3. Organize the structure of your article: give an overview of your topic to help readers understand what your
topic is.
4. Summarize and proofread: create a summary of the information you have gathered and analyzed to make
sure your article is free of graphical errors.

Three (3) Rules in Creating Quality Content

• Informative – it should provide valuable and useful information to the reader.
• Interesting - it should catch the readers' attention from the title to the last part of your content.
• Relevant – it should reflect how much you know the subject of your content enough and who it is being
written to make it relevant to both.

ICT as Platform for Change

Module 13: ICT as Platform for Change

Advocacy – is a way of expressing views, opinions, concerns information access and on establishing to all one’s rights
and responsibilities through any possible means or ways.
Social Media – (according to TechTarget network, as posted by Margaret Rouse) is a collective term for website
applications which focus on community-based input, communication, interaction, content-sharing and collaboration.

ICT in the recent history of Philippines?

(From-JUST NERD THOUGHTS)
1. EDSA (People Power Revolution 1983-1986) During a radio broadcast of Radyo Veritas, Cardinal Sin
encouraged the Filipinos to help end the regime of then President Ferdinand Marcos.
 2. EDSA II (2001 EDSA Revolution January 17 to 21, 2001) Text brigades that cause more crowd in EDSA to
impeach of the President Joseph Estrada.
3. Million People March (Luneta Park from August 22 to 26, 2013) This was a series of protest that
condemned the misuse of the Priority Development Assistance Fund (PDAF). The organizers and promoters
of the Million People March used Facebook and Change.org as their media.
4. Yolanda People Finder

Change.org is dubbed as the “world’s platform for change” where anyone from the online community can create a
petition and ask others to sign it. Change.org gives access to more people by allowing the online community to affix
their digital signatures on a petition. Its mission is to help people from around the world create the change they
want to see.
.

Planning and Conceptualizing Social Advocacy

Module 14: Planning and Conceptualizing Social Advocacy for Developing an ICT Project

Planning and Conceptualizing the Content

Always start with the ends in mind. Generate your own ideas about content and identify various opportunities based
on your target audience. Have a clear plan of actions, responsibilities, work requirements, timeframe and budget if
needed. Set a SMART goal to target.
• Specific – (What do you want to do or want to achieve?) Make sure that your goals are focused and can
identify a concrete outcome.
• Measurable – Make sure that you goal is trackable and quantifiable.
• Attainable – Work towards a goal that is challenging but possible and doable. Check if you have the tools or
resources that will help you to achieve and attain your goals.
• Realistic – (Are your current skills enough to reach your goal?)
• Time-Bound- (When exactly do you plan to accomplish it?) Give yourself a deadline.

Concept papers are summaries of projects or issues that contemplate interests, experience and expertise that
commonly serves as a purpose of delivering an in-depth discussion of a certain topic that a person has a strong
position on. Moreover, concept paper provides guidance for the implementation of a project, concept paper carries
and gives good practices, viewpoint, advocacy, belief and values or other correlated issues that needs and promotes
action to be taken in the future.

Key Points on making your Concept Paper

1. Rise with a concept topic or idea that you are genuinely interested.
2. Write down the questions associated the topic or idea you have chosen.
3. Create a possible solution from each of the questions that you have developed.
4. Classify what kind of data you need that will answer your questions and identity how will gather the
information needed.
5. Identify how you will analyze, interpret, and present the overall data you gathered.

Elements of a Concept Paper for Social Advocacy

1. Title Page – In creating your title make sure stick to the main point of the chosen topic and use relevant,
easy-to understand word and avoid being wordy. Title page usually in the form of question.
2. Introduction - This part of your concept paper should detail your mission or goal and the vision or dream you
have in taking up this concept paper. Your introduction should also contain the following: a) the clear
problem you wanted to solve; b) why did you like to investigate under this study. c) how your research or
concept paper would be helpful for others; and d) what are the clear evidence that your study is beneficial
and necessary to be discussed.
3. Purpose – Your purpose should not only be to prove your right, but it is more about on how you can help
other people in the purpose of your chosen concept paper.
4. Description - This element of concept paper includes all the necessary information, data and details about
your project. This element talks about the steps and procedure on how you will do things properly.
5. Support – This element of concept paper contains your budget needed for the project.
6. Contact Information – The element of concept paper that includes information on how the you can be
contacted.
ADDITIONAL
 Blogging platforms are broadcast-style communications systems that enable authors to publish articles,
opinions or product reviews (known as posts), which can be delivered through stand-alone websites, email,
feed syndications systems and social networks.
 Microblogging is a short blog post designed for quick and typically direct audience interactions. These
concise blogs are shared using social media platforms like Twitter or Instagram, and can include different
content formats such as audio, text, images or video.
 Bloggers write, edit, post, and promote the content on their web pages or websites . They generate and pitch
ideas, compose and edit posts, market posts to readers, and conduct research.
 Social media platforms allow users to have conversations, share information and create web content.
 Courseware is a term that combines the words “course” with “software.” It is software containing
educational content, instruction, and instructional strategies.
 Multimedia is the use of a computer to present and combine text, graphics, audio, and video with links and
tools that let the user navigate, interact, create, and communicate.
 Podcast is a brief blurb of text that describes your show
 Vodcast are a step beyond podcasting. The purpose of a vodcast is to create exciting and/or entertaining video
content for audiences to enjoy

Mandatory tags are the ff:

 <head>
 <html>
 <body>
 <title>
HTML element contains the ff:
 tag
 content
 attribute
HTML contains the ff:
 open tag
 content
 end tag

HTML STRUCTURE
<html>
<head>
<title> 2nd quarter exam </title>
</head>
<body>
<h1> Heading </>
<font color=”red> Text </font>
</body>
</html>