MAMA

MO
EMPOWERMENT TECHNOLOGIES
Rojan Zenth A. Ortiz – 1st semester Pray for brains

screen display, or 3dimensional, such as a

IMAGING AND DESIGN
statue or hologram.
FOR ONLINE - 2d image
TheENVIRONMENT
graphic design uses visual compositions - 3d image
to solve problems and communicate ideas
Graphics
through typography, imagery, color and
form (Cann, 2018). Graphics are visual images or designs on some
surface, such as a wall, canvas, screen, paper, or
It can be used by companies to promote and
stone to inform, illustrate, or entertain. It can be a
sell products through advertising, by
photograph, a drawing, a line art, graphical
websites to convey complicated information
representations, and typography.
in a digestible way through infographics, or
by businesses to develop an identity through Elements of design
branding, among other things (Malvik,
Line
2020).
Lines are defined by points moving in space. It can
INFOGRAPHICS create a sense of movement or direction in your
- Information graphics or infographics are design. Lines can be smooth, rough, straight, curved,
used to represent information, statistical broken, thick, or thin.
data, or knowledge in a graphical manner
Shape
usually done in a creative way to attract
viewer's attention. Infographics make A shape is an enclosed space, the boundaries of
complex data become more visually which are defined by other elements of art like lines,
appealing to an average user. colors, values, or textures. Shapes can be used to
create patterns and draw the viewer’s attention
Some platforms you can use to create infographics:
Direction
- Piktoart
- Canva Applying motion to create the visual illusion of
- Venngage movement. Use horizontal direction for calmness,
- [Link] stability, and tranquility, while vertical direction for
- Visme emotions of balance, formality, and alertness.
- And more…
Size (Scale)
Types of Infographics
Size is the relationship of the area occupied by shape
1. List to that of another. Large elements means significant
2. Comparison than small ones.
3. Flowchart
Texture
4. Visual Article
5. Map Texture refers to the surface appearance of art object
6. Timeline given by the dimensions, form, thickness,
7. Data Visualization arrangement, and amount of its basic parts.

Images

- An Image is a representation of the external

form of a person or thing in art. Images may
be 2- dimensional, such as a photograph or
MAMA
MO
EMPOWERMENT TECHNOLOGIES
Rojan Zenth A. Ortiz – 1st semester Pray for brains

Contrast

Basic Principles of Design It is the divergence of opposing elements (opposite

colors on the color wheel, value of light or dark, or
Color
the horizontal or vertical direction). Contrast allows
This is used for emphasis or may elicit emotions from us to emphasize or highlight key elements in your
viewers. Determined by its hue (name of color), design.
intensity (purity of color), and value (lightness or
darkness of hue). IMAGING AND DESIGN
Balance FOR ONLINE
It ENVIRONMENT
is the process of editing and modifying various
It is the equal distribution of weight. In layout, visual
methods, techniques, and software to achieve the
weight is determined by the darkness or lightness,
desired result.
thickness of lines, and size. Balance is crucial to the
success of design. There are two kinds of balance:
Basic Techniques of Image
Symmetrical and Asymmetrical Balance. Manipulation

Proximity
Changing Background and Colors
It is simply the process of ensuring related design
Changing colors is done to improve the blending of
elements are placed together. Any unrelated items
colors within the image. Background colors can also
should be spaced apart. Close proximity indicates
be changed to blend or match with the image.
that items are connected or have a relationship to
each other and become one visual unit which helps to Cropping Image
organize or give structure to a layout.
Cropping is cutting an unimportant part of an image.
White Space is the art of holding. It is also known as
Resizing Image
the negative space. It is the portion of the page left
unmarked; margins, gutters, and space between Resizing is changing the original size of the image. It
column, lines of type, graphics, figures, or objects can enlarge or shrink the image. This is done to
drawn or depicted. ensure proportion or to make the image fit on where
it will be placed.
Alignment
Inserting Image
Edge Alignment – Determines the
placement of elements in relation to the edge Inserting images is adding another image to an
of the page or canvas. existing image. This is used to integrate objects that
are necessary in the image but are not originally in it.
Center Alignment – Aligns all the elements
so that an invisible, central line on the page Changing Contrast
will always be in the center of the elements.
Contrast is modified to improve the color difference
Repetition and even brightness between different objects within
an image. This is performed to improve the visibility
The process of repeating elements through a design
of objects in the image.
to give a united look. Repetition goes with
consistency of your design on font, font size, Changing Brightness
patterns, and colors.
Brightness is modified to improve the visibility of the
entire image. This can be done for different reasons
MAMA
MO
EMPOWERMENT TECHNOLOGIES
Rojan Zenth A. Ortiz – 1st semester Pray for brains

such as to emphasize the message of the image or to

improve the quality of light in the image.

Calculating Pixels

The number of pixels is calculated by multiplying the

Understanding Online
horizontal and vertical pixel measurements. Platforms
- Online Platforms refer to base systems that
Example: HD has 1,920 horizontal pixels and 1,080
facilitate the functions of applications or
vertical pixels, which totals 2,073,600.
technologies on the Internet.
Photo Editing Software. - These platforms are created by developers
and can be customized by users by adding
Is used to manipulate or enhance digital images. This
the functions or features of their choice.
category of software ranges from basic apps, which
These are what we know as websites.
are able to apply simple effects, to industry-standard
- A wide range of online platforms offer
programs.
extensive assistance on education and career
Example of Photo Editing Software: advancement, which we refer to as
e-learning.
- GIMP
- PhotoScape Connectivity
- PicsArt, Inc Educators are able to deliver their lessons to reach
- Luminar learners across distant places.
- Pixir, Flexibility
- Adobe Photoshop Learners are able to manage their tasks and resources
- Google Snapseed. on their own terms and environment.
- PhotoScape Cooperation
Sharing, collaboration, and mutual benefit are
PhotoScape possible for learners and educators.
It is an all-in-one graphics Personalization
editing solution engineered Learners can learn lessons at their own pace and
by a Korean-based company determine the most effective method to understand
called MOII Tech. The concepts and practice skills.
program is expertly crafted
to enable users to easily edit
their photos taken from Digital learning platform
smartphones and digital cameras.
is one of the effective tools to deliver lessonsto 21st
century learners.

Social Media Platforms

This platform allow you to create your 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 feeds. Facebook, Instagram,
and Twitter are examples of Social Media Platforms.
MAMA
MO
EMPOWERMENT TECHNOLOGIES
Rojan Zenth A. Ortiz – 1st semester Pray for brains

Google Drive

A cloud storage service created by Google. It allows

users to backup files in the cloud, share files with
Blogging Platforms
collaborators, and access them anywhere. These files
- A platform on where a writer or even a can either be documents, spreadsheets, and
group of writers can share views on an presentations.
individual subject. It is comparable to a
Evernote
newsletter where you can add menus,
designs, or even multimedia of a subject. A multi-platform application which is designed for
- Blogger is an example of an Blogging Site. systemizing, storing, and taking notes. It can digitize
If you love to write or you want to share your handwritten notes and backs them up in the
ideas online, blogging platforms are the cloud, with its built-in audio apprehension support
perfect tool you can use online. and tools like the LiveScribe digital pen as note-
taking tool.
Content Management System (CMS)
Dropbox
- One of the features of this platform is that
you can publish your website and manage its A private cloud storage amenity which renders
content through the intranet or on a single features like cloud storage, and file exchange and
computer. This is a software where you can synchronization. It is the center for all of your files,
easily create, update, organize, and publish photographs, documents, videos, and more.
the content of your website.
- A popular example of CMS is WordPress.
Mapping tools
The Nature And Purposes Of
Online Platforms And - Is the creation of maps, a graphic symbolic
representation of the significant features of
Applications
Online Platform part of the surface of the Earth.

- Is a base of technologies designed to run Wikimapia

within an online environment and provides
Is an open-content collaborative mapping site with
interactive online services. Online platforms
the use of interactive web map.
nowadays offer varied services which you
can use to develop you own ICT content. Google Maps
Online Platforms and Applications Is an online mapping platform and a Web-based
Presentation/Visualization Tools service that provides detailed information about
Graphic program that allow you to create slide show geographical regions and sites around the world. In
presenting the topic, lecture, demonstrate to
File management
addition to conventional road maps, Google Maps
enlighten, educate, communicate, or persuade the Platforms
offers aerial and satellite views of many places.
audience.

Cloud Computing
- It is a computer program that provide a user
- It means storing and accessing data program interface to manage file and folder.
over the internet instead of your computer’s
Zamzar
hard drive.
MAMA
MO
EMPOWERMENT TECHNOLOGIES
Rojan Zenth A. Ortiz – 1st semester Pray for brains

An online platform that allows registered uusers to A free weblog publishing tool from Google that
store and manage converted files. As a user of allows you to share text, photos and videos.
Zamzar, you can convert big files up to 1GB. It
WordPress
supports over 1200 different conversions such as
PDF to Word, PDF to Excel, DOC to PDF, MP4 to A free open-source blog tool that you can also use to
MP3, PNG to JPG and others. It also provides up to create a website or app; it is also a content
100 GB of online file storage. management system (CMS) based on PHP and
MySQL.
Word2pdf
Livejournal
A free online tool that converts Word Documents to
PDF. A service for journals and blogs, that also offers
privacy controls, photo storage, publishing tools,
Social Media style templates, and online communities.

Issuu
- A website and application that enable user to
create and share content or participate in A free electronic publishing platform for magazines,
social networking. catalogs, newspapers, and more.

Facebook Websites
One of the most popular social networking sites that
allow users to create profiles, upload photos and - A collection of publicly accessible,
video, share links, send messages and keep in touch interlinked Web pages that share a single
with friends, family and colleagues. domain name. Websites can be created and
maintained by an individual, group,
Twitter
business, or organization to serve a variety
Is a free social network and real-time communication of purpose.
microblogging service. - Originally websites were categorized by
their top-level domains
Tumblr
o Government Agency Websites
A mixture of microblogging, traditional blogging, = .gov
and social networking. o Educational Institution’ websites

Blogging Tools = .edu

o Nonprofit Organization Websites
- Blog is a discussion or informational site = .org
published on the World Wide Web o Commercial Websites = .com
consisting of discrete entries (post) typically o Information Sites = .info
displayed in reverse chronological order (the
most recent post appears first). Basic Parts of Website
Tumblr Website Logo
A mixture of microblogging, traditional blogging,
The logo section of the website will commonly be the
and social networking.
space for identifying the website brand.

Blogger Header
MAMA
MO
EMPOWERMENT TECHNOLOGIES
Rojan Zenth A. Ortiz – 1st semester Pray for brains

The header is the top portion of the website often Are an easy and intuitive way for your visitors, from
containing the website logo as well as the main whatever level of technological background, to get
menu. the correct information to you.

Menu Buttons

Menus, often placed at an easy-to-reach place on the As CTAs prompts to complete an interaction like a
website, provide a way to navigate the website easily. form, or simply as a link to another part of your
The main menu is often contained in the header, or website (menus use this often) buttons are handy
on a collapsible pane (especially in mobile views of interactive parts of your website that prompt
website). engagement.

Body Footer

The body area of a website is the area of the website The footer is the round-up of the website. Typically,
that contains the most content. the footer will contain important links on the website,
or, sometimes, links to all of the pages of the website.
Highlighted Content
Social Links
Often exclusively on the home page, guides visitors
to parts of your website that will convert into website Social media links are a popular addition to most
goals. Booking a flight on a travel agent’s website or websites. While the example shows the links in the
buying goods on an online store are example of this. footer, social media links can be displayed on an part
of the website.
Call to Action

CTAs are important for guiding visitors to you

website to important information, completing website Web Design Principles
goals, and navigating your website.
Portable Design
Sidebar
Website design must be portable and accessible. You
Sidebars are often used in displaying related bits of
need must be compatible with other operating
information, contain CTAs, or guide visitors to the
systems and web browsers. You should also design
next step after they’ve read a post or added a product
your website on which it can be access to different
to their cart (for example).
computer platforms or devices especially for those
Posts and “Feed” Content visitors who use a mobile device to access a website.

This, like a slideshow of recommended products or, Design for Low Bandwidth
in this case, the latest blog posts, serves to pique the
Not all users who are online are connected to a high-
visitor’s interest and guide them to completing
speed internet connection. In designing a website,
website goals (in the case of the dummy website,
you need to avoid large graphics or animations as the
reading a blog post).
users may leave the site if downloading is slow.
Internal links
Direction
The link takes users to the blog page, where they can
Identify the order of importance of the various
peruse the full list of blog posts and find something
elements and place them in a sequence where the eye
that interests them.
moves and perceives the things it sees. There should
Forms be a consistent layout and structure.
MAMA
MO
EMPOWERMENT TECHNOLOGIES
Rojan Zenth A. Ortiz – 1st semester Pray for brains

Simplicity

The more option you place on 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”.

Regular Testing

Every device or project needs maintenance, same as

your website. A website should be regularly
upgraded, updated, and tested so that problems will
be quickly resolved. Visitors who behave
encountered any errors like problems in loading or
viewing your website will not hold on.