Empowerment Technologies 1

1st Semester

1
 Empowerment Technologies 1
1st Semester

Lesson 5
IMAGING AND DESIGN FOR
ONLINE ENVIRONMENT
Images
 Representation of the external form of
a person or thing in art.
 2-dimensional – photograph or screen display.
 3-dimensional – statue or hologram.

Graphic
 Visual images or designs on some surface,
such as a wall, canvas, screen, paper, or
stone to inform, illustrate, or entertain.
Graphic Design
 Uses visual compositions to solve
problems and communicate ideas through
typography, imagery, color and form.
(Cann, 2018)

Basic Principles of Graphic Design

4. Color – used for emphasis or may
elicit emotions from viewers.
Determined by:
a. Hue – name of color
b. Intensity – purity of the hue
c. Value – lightness or darkness of hue
5. Balance – equal distribution of weight;
determined by the darkness or
lightness, thickness of lines, and size.
 Symmetrical Balance – the visual
weight is distributed evenly
 Asymmetrical Balance – artistic and
different intensity on one side of the
page.
6. Proximity – process of ensuring related
design elements are placed together.
 Close proximity – items are connected
or have a relationship to each other
 White Space – the art of nothing;
negative space.
2
 Empowerment Technologies 1
1st Semester

7. Alignment – the way visual elements are Lesson 6

arranged. Principles and Techniques of
a. Edge Alignment
Design Using Online Creation
b. Center Alignment
8. Repetition – process of repeating elements Tools, Platforms, and Applications
throughout a design to give a unified look.
9. Contrast – divergence of opposing elements. Web Page Creation
An effective website design should fulfill its
Image Manipulation intended function by conveying its message while
simultaneously engaging the visitor.
 Refers to a process of bringing changes to a
digitized image for transforming it to a desired Factors that contribute to good website design:
image. 1. Consistency
2. Colors
Principles and Basic Techniques of Image 3. Typography
Manipulation 4. Imagery
1. Cropping – cutting parts away 5. Simplicity and functionality
2. Color Balance – ambience and tone of light
3. Brightness and Contrast – making the image Web Templates
darker or lighter.  Unique full-page layout that contains generic
4. Filter – gives your image a twist from its information which can be replaced by the users
original look. with their own personal information.
5. Changing the Background
6. Removing the Color
WHAT YOU SEE IS WHAT YOU GET
7. Combining text, graphics, and image
“WYSIWYG”
 No coding skills are required.
 Design components are manipulated using an
editor window and get the chance to choose
what elements are on your page.

BASIC WEB DESIGN PRINCIPLES

1. Website Purpose – website needs to
accommodate the needs of the user.
 Describing Expertise
 Building Your Reputation
 Generating Leads
 Sales and After Care

3

2. Simplicity – the best way to go when
considering the user experience and the usability
of your website.
 Color – has the power to communicate
messages and evoke emotional responses.
Limit color scheme to less than 5 colors.
Pleasing color combinations.
 Typography – should be legible. Use
maximum of 3 different fonts.
 Imagery – capture the spirit of the company
and their brand personality.
3. Navigation – finding system used on websites
where visitors interact and find what they are
looking for.
4. F-Shaped Pattern Reading – most common way
visitors scan text on a website.
5. Visual Hierarchy – arrangement of elements,
order of importance. Establish a focal point.
6. Content – using compelling language, great
content can attract and influence visitors by
converting them into customers.
 Grid-based layout – arranges content into a
clean rigid grid structure that line up and
impose order for an aesthetically pleasing
website.
 Load Time – waiting for a website to load
will lose visitors. Nearly half of web visitors
expect a site to load in 2 seconds or less.
Optimize image sizes.
 Mobile Friendly – more people are using
other devices to browse the web. Consider
building your website with a responsive
layout that could adjust to different screens.
4
Empowerment Technologies 1
1st Semester
Online Creation Tools
TYPES OF VISUAL CONTENT
1. Infographics – graphic visual representations
intended to present information quickly and
clearly.
 Piktochart – infographic creation tool
that lets you design stunning pieces
worth sharing in minutes.
2. Videos – recording of moving pictures and
sound, especially as a digital file.
 PowToon – online animation software
perfect for storytelling and creating
Flash-style movies.
3. Presentations – use catchy images, videos,
and graphics in your presentation to get into
the minds of your target audience.
 Prezi – cloud-based presentation
software that displays information not as
series of slides but as a large board that
zooms in on specific information, text,
or an image.
 SlideShare – upload and share
professional videos and slide
presentations.
 Empowerment Technologies 1
1st Semester

Lesson 7
MULTIMEDIA AND ICT
 Web 1.0 – “readable” phrase of the World Wide Web with flat data and limited interaction between sites and
web users.
 Web 2.0 – “writable” phrase of the World Wide Web with interactive data.
 Web 3.0 – It is the “executable” phrase of Word Wide Web with dynamic applications, interactive services,
and “machine-to-machine” interaction.

Rich Content in Online Environment and the User Experience

Rich User Experience
 Ability of the web to deliver full scale GUI style application to the client, making it easier to interact, share
and access the web content.
 Focuses to enhance how the data is presented, manipulated, and used by the user.
GUI (Graphic User Interface)
 Program that allows a person to work easily with a computer by using a mouse to point a small picture and
other element on the screen.