Claret College of Isabela

Senior High School

P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
NAME ___________________________________________ DATE: ___________________
COURSE AND YEAR: ______________________________ OUTPUT NO: 3 AND 4

Principles and Techniques of Design Using Online Creation Tools, Platforms,

and Applications
LEARNING COMPETENCIES:

 Evaluate existing websites and online resources based on the principles of layout, graphic, and visual
message design.
 Use image manipulation techniques on existing images to change or enhance their current state to
communicate a message for a specific purpose
 Create an original or derivative ICT content to effectively communicate a visual message in an online
environment related to specific professional tracks

LESSON OBJECTIVE:
 Apply web design principles and elements using online creation tools, platforms, and applications to
communicate a message for a specific purpose in specific professional tracks.
 Create an original or derivative ICT content using online creation tools, platforms, and applications to
effectively communicate messages.
 Evaluate the quality, value, and appropriateness of peer’s existing or previously developed ICT content
in relation to the theme or intended audience/ viewer of an ICT project.

 VALUES INTERGRATION:

EXPLORE AND EXPLAIN:

Direction: Read each item carefully and choose the letter of the correct answer. Write your answers on a
separate sheet of paper or in your notebook.

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

Web Page Creation

While it's easy to build a web page, it's hard to make it look right. If all you want is plain text, everything will
be too straightforward. The tricky part is when you want something more. Most bad web pages are bad because
of their design rather than their contents. The more stuff on the page, the messier it gets and the less likely you
are to keep the interest of the visitor (http://billconner.com/techie/webpages.html). An effective website design
should fulfill its intended function by conveying its message while simultaneously engaging the visitor. Several
factors such as consistency, colors, typography, imagery, simplicity and functionality all contribute to good
website design. A well-designed website can help build trust and guide visitors to act. Creating a great user
experience involves making sure your website design is optimized for usability (form and aesthetics) and how it
easy is it to use

WEB TEMPLATES and “WYSIWYG” PLATFORMS

“WYSIWYG” means What You See Is What You Get In this kind of platform, no coding skills are required.
Instead, you manipulate with design components using an editor window and get the chance to choose what
elements are on your page.

Web Templates
These are unique full-page layout that contains generic information which can be replaced by the users with
their own personal information.

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
BASIC WEB DESIGN PRINCIPLES

Website Purpose Your website needs to accommodate the needs of the user. Having a simple clear intention on
all pages will help the user interact with what you have to offer. Are you imparting practical information like a
‘How to guide’? Is it an entertainment website like sports coverage or are you selling a product to the user?
Below are the common core purposes of websites:

Simplicity
Simplicity is the best way to go when considering the user experience and the usability of your website. Below
are ways to achieve simplicity through design.

 Color - it has the power to communicate messages and evoke emotional responses. Finding a color palette
that fits your brand will allow you to influence your customer’s behavior. Keep the color selection limited to
less than 5 colors. Pleasing color combinations increase customer engagement and make the user feel good.

 Typography or the text used. Typefaces should be legible and only use a maximum of 3 different fonts on
the website.

 Imagery is every visual aspect used within communications. This includes still photography, illustration,
video and all forms of graphics. All imagery should be expressive and capture the spirit of the company and act
as the embodiment of their brand personality.

Navigation

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
Navigation is the way finding system used on websites where visitors interact and find what they are looking
for. Website navigation is key to retaining visitors. If the websites navigation is confusing visitors will give up
and find what they need elsewhere. Keeping navigation simple, intuitive and consistent on every page is key.

F-Shaped Pattern Reading

The F- based pattern is the most common way visitors scan text on a website. Eye tracking studies have found
that most of what people see is in the top and left area of the screen. The F’ shaped layout mimics our natural
pattern of reading in the West (left to right and top to bottom). An effective designed website will work with a
reader’s natural pattern of scanning the page.

Visual Hierarchy
The arrangement of elements is order of importance. This is done either by size, color, imagery, contrast,
typographically, whitespace, texture and style. One of the most important functions of visual hierarchy is to
establish a focal point; this shows visitors where the most important information is.
Image

Content
An effective web design has both great design and great content. Using compelling language great content can
attract and influence visitors by converting them into customers.

Grid Based Layout

The grid-based layout arranges content into a clean rigid grid structure with
columns, sections that line up and feel balanced and impose order and
results in an aesthetically pleasing website.

Load Time

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
Waiting for a website to load will lose visitors. Nearly half of web visitors expect a site to load in 2 seconds or
less and they will potentially leave a site that isn’t loaded within 3 seconds. Optimizing image sizes will help
load your site faster

Mobile Friendly
More people are using their phones or other devices to browse the web. It is important to
consider building your website with a responsive layout where your website can adjust to
different screens.

Online Creation Tools

Techopedia defines "platform" in computing as the operating system and computer hardware. It follows a set of
standards that enables software developers to develop software applications for the platform. These standards
allow owners and managers to purchase appropriate applications and hardware.
According to Marc Andreessen on his blog, a platform is "a system that can be programmed and therefore
customized by outside developers—users—and in that way, adapted to countless needs and niches that the
platforms’ original developers could not have possibly contemplated, much less had time to accommodate." A
platforms has three levels: Level 1 Access API; Level 2 Plug-in API; and Level 3 Runtime Environment. Each
level has its own features and advantages.
Level 1 — Access API
API means application programing interfaces- it is the most common type of internet platform, the apps on this
level run elsewhere and cad into the platform via web services API to draw on data and services On this level.
the processes of building; and running the application itself solely by a developer who both technical expertise
and financial resources.
Level 2 — Plug-in API
This the kind of platform approach that historically has been used in end user applications to let developers
build new functions that can be injected plugged into the core system and its user interface. Non-internet
examples include Photoshop and Firefox, the best online example of this is hottest thus far the Facebook.

WEB DESIGN PRINCIPLES

According to Cleverism, "Web design is a concept of planning, creating, and maintaining websites?' It is the
process of creatively designing and constructing a website and updating it regularly to incorporate changes.
Designing for web publication equates to communication. Visuals on a web page are of utmost importance
since it is one of the ways how you communicate with the Viewer.

Here are some principles to follow in effectively designing your web page or site.
Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
1, Visual Hierarchy
This explains the order in which human eye perceives what it sees, This is a technique wherein, as the
developer, you have to distinguish the importance of every part of your web page Elements should be ranked
according to its importance and your objectives. It can be shown through the use of varying sizes and amount of
contents
2, Proportion
You can make use of the golden ratio, a magical number approximately equal to 1 .618 that makes all things
proportioned as to make a design aesthetically pleasing. Then there is also
Fibonacci sequence where each term is defined as the sum o the two previous terms: 0, 1 , 1 , 2, 3, 5, 8, 13, 21,
and so on.
As the designer, you should keep in mind the proper division of the contents of your web page to avoid
crowding the view.
If your layout width is 960px, divide it by 1 .618 (=593px),. If the website height is 760px tall, you can split it
into 470px• and 290px chunks (760/1.618=-470).
3. Hick's Law
This law can be considered as a guideline for decision making in a viewer's perspective.
Hick's law states that "with every additional choice, the time required to make a decision increases." This law
does not only hold true for web design but also in a number of other situations and settings. This means that we
need to reduce the number of choices in order to provide a better user experience.
4. Fitts' Law
According to this law, the time needed to move to a target is dependent upon the size of the target as well as the
distance to the target. This means that the larger the object or target and the shorter the distance, the easier
would it be to move to it or reach it. However, this does not mean that the bigger, the better but that usability
factor of a target runs as a curve and not as a straight line.

Accessibility

When a visitor enters the website, he or she must be able to access each bit of information in the easiest manner.
Typefaces must be readable to all and is not too fancy for some to access or understand. Make your own color
palette and choose contrasting color for the background and written content so that it can be easily read. Make
sure your images are of high-quality and are suitable for your purpose.

Visible Language
Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

A web page design should communicate with the users clearly and in an engaging manner. The following are
principles for a Successful visual language: organize, economize, and communicate.

7. White Space and Simple Design White space helps to divide the web page into several distinct parts or areas
which make it simpler for the users to process information. The following are some of the other things that can
be considered as a part of a simple design:

Grid-based layout The content of this layout is divided into columns, boxes, and different sections.

F-pattern design. Design a web page or website in a way that complements the natural reading behaviour of the
visitors like the "F-pattern."

Conventional designs, Conventional or conservative designs still work well as far as visitor response or
likeability is concerned, they add a hint of trust, reliability as well as brand credibility.

Regular Testing

Test Early and •Test Often, or T ETO, is another web design principle that all designers and website owners
must consider. Conducting usability tests every now and then provide important results and insights into many
kinds of problems and complications related to a website layout or aspects of design. Websites constantly need
upgrades and updates to maintain the visitor customer's interests and trends

WEB DESIGN ELEMENTS

To come up with a good web design and an effective visual and technical appeal Of a website, there are some
elements that must be considered. Here are the following elements:

1. Links

Include the following states for all links on the page:

 Norma/. This is the default state of a link (i.e., one that is not being hovered over or being clicked or
pointing to a URL that the user has already visited).

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
 Visited. This is a link that is not being hovered over or clicked but whose target has+ been visited by the
user.
 Active. An active link is one that is currently being clicked by the user. Most developers will replicate
the hover state here if a style is not provided to them,
 Hover. The hover state is what the link looks like when the user moves the mouse over it. This and the
normal states are the ones most designers prepare for.

2. Forms

Two of the most important considerations when laying out a form are:

 Form label Forms typically collect personal data that users are reluctant to give out. As such, properly
informing users of the exact purpose of the form is wise.

 Input fields and labels Plan on how the input fields of the form will be laid out on the page and how the
labels for those fields will be styled and oriented relative to the fields.

3. Form Validation

An important related detail is form validation. This is the critical point where the website communicates the
user requirements and errors in a form. There are three core things to consider:

 Required fields All required fields should be indicated. This is done usually with an asterisk.
 Real-time validation Some validation can be done in real time as the user completes the form. This kind
of validation informs the user as quickly as possible of any problems with the data they have inputted.
 Post-back validation This kind of validation happens after the user has submitted the form. The style
used for real-time validation is often repeated here, but another option is to group all errors into a single
message.

Status Messages: Errors, Warnings, Confirmation

Users will usually need some sort of feedback after performing an action on your website. The most likely
scenario is after submitting a form, but many other events could occur as well. Carefully consider your website
and the actions that users might take, and plan for the messages that the website will need to communicate.

 Image rotators or sliders Home page slide shows are all the rage, and a wide range of options is available
for transitions and styles.
Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
 Lightbox You can style not only the lightbox itself, but also the transition to it.

WEB PAGE DESIGN: USING TEMPLATES AND ONLINE WYSIWYG PLATFORMS

A web template is a ready-made design for your website, including images, some navigation, preferably several
sample pages and in some cases flash animation. Contents come from you as the author. A web template must
be customized or modified to turn it into your very own website. The website template you have chosen is a
look-and-feel for your site. Some high-end templates have database back-ends and so on built-in. You can also
add your own text, set your Meta tags (keywords and description), and insert some images into your product
listing pages (if applicable). Wixand Weeb/y are just examples of a website builder wherein you can choose to
sign up for free or with payment.

Advantages of Using Templates

1 . You know how your finished site looks. You can choose the template that appeals to you.
Faster turnaround. You need not spend a lot of time on getting the colors and layout right.
Templates are much cheaper than hiring a web developer. There are several sites that offer free templates as
well.
ONLINE TECHNOLOGIES
Online technologies also include presentation programs, forms, and file management that are available over the
internet. You can create and edit products without installing the programs into your computer, The following
are examples of online technologies that offer a wide range of use.
According to TechTarget, cloud computing is a term for the delivery of hosted services over the internet. It
promises several benefits for businesses and end users. Three of the main benefits of cloud computing include:
 Self-service provisioning End users can spin up computing resources•for almost any type of workload
on-demand.
 Elasticity Companies can scale up as computing needs increase and then scale down again as demands
decrease.
 Pay-per-use Computing resources are measured at a granular level, allowing users to pay only for the
resources and workloads they Use.

The goal of cloud computing is to apply traditional supercomputing, or high-performance computing power,
normally used by military and research facilities, to perform tens of trillions of computations per second, in
consumer-oriented applications such as financial portfolios, to deliver personalized information, to provide data
storage, or to power large, immersive online computer games.

Prezi and emaze Prezi was founded in 2009 by Peter Arvai, Péter Halåcsy, and Adam Somlai-Fischer. It is a
presentation resource that features a zoomable canvas unlike the box-type slides. You need to sign up for an
account or download it on your computer. Your finished presentation will then be published online.
Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL
emaze works similarly with Prezi. You can choose from their free presentation templates to easily create. It
features a proprietary State-of-the-art HTML5 presentation maker that will enable you to create slide shows,
video presentations, and 3D presentations.

FILE MANAGEMENT AND MAPPING

A mind map is a concept of using diagrams for representing tasks, words, concepts, or items linked to and
arranged around a central concept or subject. It uses a nonlinear graphical layout that allows the user to build an
intuitive framework around a central concept. A mind map can turn a long list of monotonous information into a
colorful and highly organized diagram,
Along with mind mapping is file and project management which is also available online through online
technology. A file management system is a type of software that manages data files in a computer system.
However, an online file management system is designed to manage individual or' group files, such as• special
office d0cuments and records which is cloud based.
MindMeister
MindMeister is an online mind mapping tool that allows users to create, develop, and share ideas visually. It is a
mind map editor for brainstorming, note taking, project planning, and other creative tasks. It is a web-based
software that does not need to download and update.

Sibelius Sibelius is an online platform used for writing music. It is a notation software that features a magnetic
layout and other tools good for music compositions. You can make a video of your score, share directly to
social' media, or export for iPad. You can download a 30-day trial of Sibelius from this link:

Google Forms
Google Forms is a part of Google Drive, a tool used for creating surveys, tests, or web input forms. It allows
anyone to create an easy-to-use web form, connected to a spreadsheet where you can track results and post it on
the web.
Everything Is Online
According to an article on Top Ten Reviews, online file sharing services are becoming the next big service
business everywhere are considering.
Its benefits include the following:

1 . No e-mail bounce backs

2, User-friendly

3. Send files larger than 2 gigabytes

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

4, Secured files

5, Cost-effective

TechTarget, in their article on online file sharing, Dropbox is an example of online file sharing site. Companies
using the service do not have to support and maintain the data. The information stored in an online file sharing
service can be accessed from any device that has an internet connection, including smartphones and tablet PCs,
and by anyone who is given data access rights.

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)
 Claret College of Isabela
Senior High School
P.O. Box 8692 Roxas Avenue, Isabela City, Basilan Province, 7300 Philippines
Tel. No. (062) 200 - 7697 / 200 – 7009 Telefax: (062) 200 – 3865
FINAL

Learning/Activity Sheet
(Empowerment Technologies – Arabejo/Francisco)