Lesson 6 -Publicity Materials -The principles and techniques of design using online creation tools, platforms, and applications to develop ict content for specific professional tracks -8 Effective Web Design Principles You Should Know

1. PUBLICITY MATERIALS

2. PUBLICITY MATERIALS
• Publicity material is information disseminated to news media by
a company or its agency to generate unpaid media exposure.
Press releases are one of the most common publicity tools. Other
tools include photographs, guest editorials, community notices,
props and calendar announcements.

3. SAMPLE OF PUBLICITY MATERIALS
• Poster
• Logo
• Labels
• Infographics

4. POSTER
•Designing an eye-catching poster that draws
in viewers requires balancing all of the
elements that feed into making an impact.

8. LOGO
• The LOGO is a visual representation of everything the
company stands for. McDonald’s golden arches or the
Nike swoosh – these two impressive logos embody these
companies well. But many companies still skimp on
developing this key identity piece.

9. LOGO
•Good logo can build loyalty between your business
and your customers, establish a brand identity, and
provide the professional look of an established
enterprise.

11. March 2008 2009 2009 Sept. June
2006 2010 2012

14. LABELS
• a word or phrase indicating that what follows belongs in a
particular category or classification.

18. THE PRINCIPLES AND TECHNIQUES OF
DESIGN USING ONLINE CREATION
TOOLS, PLATFORMS, AND
APPLICATIONS TO DEVELOP ICT
CONTENT FOR SPECIFIC PROFESSIONAL
TRACKS

19. INTRODUCTION
•Online creation tools and platforms exist to enable
users to create content that corresponds to
professional tracks such as academics, sports, arts
and design, and technical vocational. A common
example of an output from using these online
creation tools is a website.

20. THINKFINITY:
WWW.THINKFINITY.ORG
• Verizon is a global leader
delivering innovative
communications and
technology solutions that
improve the way customers
live, work, and play.

22. NATIONAL GEOGRAPHIC EXPEDITIONS:
WWW.NATIONALGEOGRAPHIC.COM
• The travel program of the
National Geographic
Society, was founded on
the same belief in the
importance of exploration
that distinguishes the
Society’s 125-year history.

29. CULTURE GRAMS
WWW.CULTUREGRAMS.COM
• Since its beginnings in 1974,
CultureGrams has become
one of the most trusted and
widely used cultural
reference products in the
education, government, and
nonprofit arenas.

31. ASIA SOCIETY
WWW.ASIASOCIETY.ORG
• Asia Society is the leading
educational organization
dedicated to promoting mutual
understanding and strengthening
partnerships among people,
leaders, and institutions of Asia
and the United States in a global
context. Across the fields of arts,
business, culture, education, and
policy, the Society provides
insights, generates ideas, and
promotes collaboration to
address present challenges and
create a shared future.

33. OWL AT PURDUE U
HTTP://OWL.ENGLISH.PURDUE.EDU/OWL/
• First Online Writing Lab started
by Dr. Muriel Harris & David
Taylor.
• Their goal is to provide a
resource for students who sought
help in writing but could not
make it into the physical Writing
Lab during operating hours. OWL
has become a complement to
classroom instruction, a
supplement to face-to-face
tutorials, and a stand-alone
reference for thousands of writers
worldwide.

38. TED
WWW.TED.COM
It is a nonprofit online site devoted
to spreading ideas, usually in the
form of short, powerful talks. TED
began in 1984 as a conference
where technology, entertainment,
and design converged.
Today, it covers almost all topics
from science to business to global
issues in more than 100 languages.
Meanwhile, independently-run TED
events help share ideas in
communities around the world.

41. THE TEACHER’S CORNER
WWW.TETEACHERSCORNER.NET
The Teacher’s Corner started in
1996 by Jennifer Jensen as a
hobby website that provides links
to teacher resources on the
internet.
In 1998, the website’s owners
created their own resources and
offer them free to teachers and
parents.

46. SLIDE SHARE
WWW.SLIDESHARE.NET
SlideShare is a slide-sharing service
where users can upload infographics,
documents, or videos to support and
enhance their presentations. Visual
formats presentations stand out and
resonate more with readers.

50. FREE RICE-VOCABULARY
WWW.FREERICE.COM
FreeRice is a nonprofit website
that is owned by and supports
the United Nations World
Programme (UNWFP). It has
two goals:
- Provide education to
everyone for free.
- Help end world hunger by
providing rice to hungry
people for free.

51. • Users of FreeRice play multiple-
choice quiz games. For every
question they answer
correctly, the sponsors
donate 10 grains of rice to
UNFWP. As the users improve
their education which can
improve their lives, they also
help feed hungry people and
enable them to function and be
productive.

55. FREE POVERTY-GEOGRAPHY SITE
WWW.FREEPOVERTY.COM
GreaterGood began in 1999 to
provide for worthy causes through
easy, online actions.
Since its launch, GreaterGood has
contributed more than $40 million to
charities around the world.
Each of its cause-related websites
partners with nonprofits to provide
support through many different easy
actions, including a free, fast “click”,
shopping and through the “Gifts That
Give More” online donation program.

59. LEARNER
WWW.LEARNER.ORG
Annenberg Learner’s mission is
to “Advance Excellent Teaching
in American Schools”. They
focus on the teacher as a
learner, as well as the student
as a learner.

64. INTERNATIONAL READING ASSOCIATION
WWW.READWRITETHINK.ORG
The mission of ReadWriteThink is to
provide educators, parents and after-
school professionals with access to
the highest quality practices in
reading and language arts instruction
by offering the best materials for free.

69. THE NATURE PURPOSES OF ONLINE
PLATFORMS AND APPLICATIONS
• A platform is a group of technologies that are used as a base
upon which other applications, processes or technologies are
developed. In personal computing, a platform is the basic
hardware (computer) and software (operating system) on which
software applications can be run.
• A web application or "web app" is a software program that runs
on a web server. Unlike traditional desktop applications, which are
launched by your operating system, web apps must be accessed
through a web browser. An application can stand on its own.

70. ONLINE PLATFORMS

71. ONLINE PLATFORMS

72. ONLINE APPLICATIONS

73. BASIC WEB DESIGN PRINCIPLES AND
ELEMENTS
• The design of the website is more important for
conversions than you think.
• Design is not just something designers do. Design is
marketing. Design is your product and how it works. The
more you’ll learn about design, the better results you’ll
get.

74. 8 EFFECTIVE WEB DESIGN
PRINCIPLES YOU SHOULD
KNOW

75. 8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW
1. Visual Hierarchy
• Visual hierarchy suggests there is a proper way to view content
visually: in a hierarchical way. In other words, there is a pecking order
to things… some content should be viewed first, some second, some
third, and on down the line.
• The most important content is at the top of the hierarchy. It’s the
visual element you look at first, which then directs you to what to look
at next.
• Certain parts of your website are more important than others (forms,
calls to action, value proposition etc), and you want those to get
more attention than the less important parts.

79. 8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW
2. Divine Proportions or Golden
Ratio
• The Golden Ratio is a mathematical
ratio, commonly found in nature,
and used in classical design theory
to create balanced compositions. It
roughly equals 1.6180, is also known
as the “Golden Mean”, the “Golden
Section”, and is referred to by
the Greek letter Phi “ϕ”.

81. • In design, the Golden Ratio boils
down to aesthetics— creating and
appreciating a sense of beauty
through harmony and proportion.
When applied to design, the
Golden Ratio provides a sense of
artistry; an X-factor.
• Our bodies and faces even follow
the mathematical ratio.

82. FIBONACCI NUMBER
• In mathematics, the Fibonacci numbers are the numbers
in the following integer sequence, called the Fibonacci
sequence, and characterized by the fact that every
number after the first two is the sum of the two preceding
ones:

87. 8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW
3. Hick’s Law
• named after British psychologist William Edmund Hick, describes
the time it takes for a person to make a decision. This decision
time is based on the possible choices he or she has.
• The law states that by increasing the number of choices, the
decision time will also increase logarithmically.
• Hick’s law considers the amount of information stored by a
subject, and how long it takes to process this information to
come to a decision. The more information, the longer it takes to
process.

92. 8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW
4. Fitt’s Law
• is a predictive model of human movement primarily used
in human–computer interaction and ergonomics.
This scientific law predicts that the time required to rapidly
move to a target area is a function of the ratio between the
distance to the target and the size of the target.
• Fitts's law is used to model the act of pointing, either by
physically touching an object with a hand or finger, or
virtually, by pointing to an object on a computer
monitor using a pointing device.
• In other words, the bigger an object and the closer it is to
us, the easier it is to use it.

93. • This is similar to rule of target size.
• The size of a button should be proportional to its
expected frequency of use. You can check your stats for
which buttons people use the most, and make popular
buttons bigger (easier to hit).
• It doesn’t mean that bigger is always better. A button that
takes up half the screen is not a good idea, and we don’t
need a mathematical study to know this.
• A tiny button will become much easier to click when
given a 20% size increase, while a very large object will
not share the same benefits in usability when given the
same 20% boost in size.

97. 8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW
5. Rule of Thirds
• An image should be imagined as divided into nine equal
parts by two equally-spaced horizontal lines and two
equally-spaced vertical lines, and that important
compositional elements should be placed along these
lines or their intersections.

103. 8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW
6. Gestalt Design Laws
• Gestalt psychology is a theory of mind and brain.
Its principle is that the human eye sees objects in
their entirety before perceiving their individual
parts.

108. 6 SO-CALLED GESTALT DESIGN LAWS
THAT ALLOW US TO PREDICT HOW
PEOPLE WILL PERCEIVE SOMETHING
•Law of Proximity
•Law of Similarity
•Law of Closure
•Law of Symmetry
•Law of Common Fate
•Law of Continuity

109. • LAW OF PROXIMITY
Proximity occurs when elements are placed close
together. They tend to be perceived as a group.

112. • LAW OF SIMILARITY
Similarity occurs when objects look similar to one another. People
often perceive them as a group or pattern.
The example (containing 11 distinct
objects) appears as single unit because all
of the shapes have similarity.
Unity occurs because the triangular
shapes at the bottom of the eagle
symbol look similar to the shapes that
form the sunburst.

114. • LAW OF CLOSURE
• Closure occurs when an object is incomplete or a space is
not completely enclosed. If enough of the shape is indicated, people
percieve the whole by filling in the missing infomation.
Although the panda is not
complete, enough is present
for the eye to complete the
shape.
When the viewer's perception
completes a
shape, closure occurs.

115. • LAW OF SYMMETRY
• The mind perceives objects as being
symmetrical and forming around a
center point. It is perceptually
pleasing to be able to divide objects
into an even number of symmetrical
parts.
• When we see two symmetrical
elements that are unconnected, the
mind perceptually connects them to
form a coherent shape.

117. • LAW OF COMMON FATE
• We tend to perceive objects as lines that move along a path. We
group together of objects that have the same trend of motion and
are therefore on the same path.

118. • LAW OF CONTINUITY
• People have a tendency to perceive a line as continuing its
established direction. In cases where there is an intersection between
objects (e.g. lines), we tend to perceive the two lines as two single
uninterrupted entities. Stimuli remains distinct even with overlap.
• The Gestalt Continuity Law explains how our brain experiences visual
line of elements that are grouped together. There is a tendency to
perceive a line continuing its established direction.

121. 7. White space and clean design
• White space (also called ‘negative space’) is the portion of a
left “empty”. It’s the space between graphics, margins, gutters,
space between columns, space between lines of type or visuals.
page without white space, crammed full of text or graphics, runs
the risk of appearing busy, cluttered, and is typically difficult to
read.
8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW

125. 8. Occam’s Razor
• Occam’s razor is a principle urging one to select among
competing hypotheses that which makes the fewest
assumptions and thereby offers the simplest explanation
of the effect. To put it in the design context, Occam’s
Razor states that the simplest solution is usually best.
8 EFFECTIVE WEB DESIGN PRINCIPLES
YOU SHOULD KNOW

128. • What does WYSIWYG mean?
• he somehow cryptic abbreviation WYSIWYG stands for “What You See Is
What You Get”. In such editors you edit not directly the source code of your
documents, but its presentation as it (hopefully) will appear in the final
document. So instead of writing blocks of code manually, you manipulate
with design components using an editor window. This means that you view
something very similar to the end result while the document or image is
being created.
WEB PAGE DESIGN USING TEMPLATES
AND OUTLINE WYSIWYG PLATFORMS

129. WYSIWYG PLATFORMS
• Adobe Dreamweaver

130. WYSIWYG PLATFORMS
• Amaya

131. WYSIWYG PLATFORMS
• Adobe Contribute
• Microsoft Expression Web

132. WYSIWYG PLATFORMS
• Kompozer

133. WYSIWYG PLATFORMS
• WYSIWYG Web Builder