Imaging and Design

for
Online Environment
What is the most visited website in the world?
Think about it for a second.
No, it is not Facebook nor Twitter.
Here is a clue, the site's mission statement is "to
organize the world's information and make it
universally accessible and useful."
You have probably guessed it by now,
yes—it is Google.
 Basic Principles of Graphics and Layout
1. Balance. The visual weight of objects, texture,
colors, and space is evenly distributed on the screen.

2. Emphasis. An area in the design that may appear

different in size, texture, shape or color to attract the
viewer's attention.
3. Movement. Visual elements guide the viewer's
eyes around the screen.
 Basic Principles of Graphics and Layout
4. Pattern, Repetition, and Rhythm. These are the
repeating visual element on an image or layout to
create unity in the layout or image.
5. Proportion. Visual elements create a sense of unity
where they relate well with one another.

6. Variety. This uses several design elements to draw a

viewer's attention.
 Online Image File Formats
Common Image File Formats Used on the Web
1. Joint Photographies Experts
2. Graphics Interchange Format
3. Portable Network Graphics
There are plenty of other image file formats used in the web but
most of the time you will be using these three because of their
compatibility with all major web browsers.
 NAME FILE USE SUPPORT SUPPOR
EXTENSI TRANSPA T
ON RENCY ANIMAT
ION
JOINT JPEG OR REAL LIFE NO NO
PHOTOGRAPIES JPG PHOTOGRAPHS,
EXPERTS GROUP HIGH
COMPRESSION
GRAPHICS GIF COMPUTER YES YES
INTERCHANGE GENERATED
FORMAT GRPAHICS
PORTABLE PNG SCREENSHOTS, YES NO
NETWORK HIGH
GRAPHICS COMPATIBILITY
 Principles and Basic Techniques of
Image Manipulation

1. Choose the right file format. Try to make a real-life

photograph into GIF to see the difference between PNG,
GIF, and JPEG. Knowing the purpose is the key to
finding out the best file format.
2. Choose the right image size. A camera with 12 megapixels
constitutes to a bigger image size. Monitors have a resolution limit,
so even if you have a million megapixels, it will not display
everything. Thus, it is not always wise to make our image big, most
especially in a website. Know how much space you want the image
to consume. Or have a "preview" image where the audience has the
option to "see full size."

3. Caption it. Remember to put a caption on images

whenever possible. If it is not related to the web page, then
remove it.
 Online Platforms for ICT Content Development
Lesson Motivation
 Which platform is superior? Why?
The class will be divided into two groups. One group
represents "team social media" while the other represents
"team bloggers." The groups will have a ten-minute closed
group discussion about the advantages of each platform.
After ten minutes, the groups will choose five representatives
that will debate on which platform is superior and why.
Those who are not representing the group will be given a
chance to raise their point by raising their hand. After the
debate, write your thoughts on the space provided by
answering the question:
Online Platforms for ICT Content Development
We will focus on platforms that will allow us to share our own content to the rest
of the world. We will also create a few of them to experience what it is like to
use all of them.
1.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.
On the plus side, Facebook has billions of users.
Linkedln is another example of a social networking site
where its focus is on business and professional
networking.
2. Blogging Platforms. Websites like WordPress, 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 platform's popularity is still unrivaled.

The amount of customization in blogs is also unrivaled

depending on the content management
system implemented by the provider.
 Content Management System

A Content Management System (CMS) is a computer

application (sometimes online or browser-based) that allows
you to publish, edit and manipulate, organize and delete web
content. CMS is used in blogs, news websites, and shopping.