THE PRINCIPLES AND TECHNIQUES OF

DESIGN USING ONLINE CREATION

TOOLS, PLATFORMS, AND
APPLICATIONS TO DEVELOP ICT
CONTENT FOR SPECIFIC
PROFESSIONAL TRACKS
• Online creation tools and platforms exist for users to
utilize in order to create content that correspond
to professional tracks such as academics, sports,
arts and design, technical vocational
• Website – a common example of an output from
using these online creation tools
• Edutopia – a US-based comprehensive website
and online community that increases knowledge,
sharing, and adoption of what works in k-12
education
ONLINE TOOLS, REFERENCES
AND RESOURCES
Thinkfinity: www.thinkfinity.org
• Thinkfinity is a free online professional learning community,
providing access to over 60,000 educators and experts in
curriculum enhancement, along with thousands of award-
winning digital resources for K-12 — aligned to state
standards and the common core.
• Verizon – is a global leader delivering innovative
communications and technology solutions that improve
the way our costumer’s live, work and play
National Geographic Xpeditions:
www.nationalgeographicexpeditions.com
• The travel program of the National Geographic Society
• Launched in 1999
• Operates hundreds of trips each year, spanning all seven
continents and more than 60 destinations
 Culture Grams:
www.culturegrams.com
• Launched in 1974
• Has become one of the most trusted and widely used
cultural reference products in the education, government,
and non profit arenas
• Culture Grams content is available in the Culture Grams
Online Database and as PDF download of individual
reports.
Asia Society: www. asiasociety.org
• Founded in 1956
• The leading educational organization dedeicated to
promoting mutual understanding and strengthening
partnerships among peoples, leaders and institutions of
Asia and the United States in a global context
Purdue Online Writing Lab:
owl.english.purdue.edu
• The Purdue University Writing Lab and Purdue Online Writing Lab
(OWL) assist clients in their development as writers—no matter what
their skill level—with on-campus consultations, online participation,
and community engagement. The Purdue Writing Lab serves the
Purdue, West Lafayette, campus and coordinates with local literacy
initiatives. The Purdue OWL offers global support through online
reference materials and services.
TED: www.ted.com
• Began in 1984 as a conference were technology, entertainment and
Design converged, and today covers almost all topics from science to
business to global issues – in more than 100 languages
• Is a nonprofit devoted to spreading ideas, usually in the form of short,
powerful talks (18 minutes or less)
Teacher Corner: www.theteacherscorner.net
• Started in 1996
• Provides links to teacher resources on the internet
• Free to use since 2005
SlideShare: www.slideshare.net
• Show what you know through a presentation, infographic, document
or videos. Visual formats help you stand out and resonate more with
your readers.
• When you upload to SlideShare, you reach an audience that’s
interested in your content – over 80% of SlideShare’s 70 million right
audience and cultivate more professional authorities
Free Rice-Vocabulary Site: www.freerice.com
• Is a non-profit website that is owned by and supports the United
Nations World Food Programme
• Has two goals; provide education to everyone for free, help end world
hunger by providing rice to hungry people for free
• This is made possibly by the generosity of the sponsors who advertise
on this site
Free Poverty-Geography Site:
www.freepoverty.com
• GreaterGood began in 1999
• Provides support for worthy causes through easy, online actions
including a free, fast ‘click’, shopping, and through the gifts that give
more online donation program
• GreaterGood has contributed more than 40 million dollars to charities
around the world
Annenberg Learner: www.learner.org
• Mission is to “Advance Excellent Teaching in American Schools”
• Pursued for more than three decades by funding and distributing
multimedia resources for teachers (K-12 and college levels) to teach
their subject and to stay up-to-date in their fields
• Focuses on teacher as a learner, as well as the student as a learner
International Reading Association:
ww.readwritethink.org
Provies educators, parents, and after school professionals with access
to the highest quality practices in reading and language arts instruction
by offering the very best in free materials
THE NATURE AND PURPOSES OF
ONLINE PLATFORMS AND
APPLICATIONS
8 EFFECTIVE WEB DESIGN
PRINCIPLES YOU SHOULD
KNOW
#1: Visual Hierarchy
It’s the order in which the human eye perceives what it sees
• Visual hierarchy is the order in which a user processes information on a page; its function in user interface (UI) design is to allow users to understand
information easily. By assigning different visual characteristics to sections of information (e.g., larger fonts for headings), a designer can influence
what users will perceive as being further up in the hierarchy.
• The visual characteristics that a designer can use to influence users’ perception of the information are:
• Size: the larger the element, the more attention it will attract
• Color: bright colors are more likely to draw attention over muted ones
• Contrast: dramatically contrasted colors will catch the eye easily
• Alignment: an element that breaks away from the alignment of others will attract more attention
• Repetition: repeating styles can give the impression that content is related
• Proximity: closely placed elements will also appear related
• Whitespace: more space around elements will attract the eye toward them
• Texture and style: richer textures will attract more attention than flat ones
• When information design does not have a strong visual hierarchy, a user’s eye follows a predictablereading path. This path is culturally influenced, as it
is connected to the standard reading direction of written text. In the Western world, two main left-to-right paths exist, which can be described as a Z
and an F pattern. A designer has the opportunity to use visual hierarchy to reinforce these natural paths, or deliberately use visual characteristics to
break such patterns so as to draw the viewer’s attention to a focal point. Thus, the successful manipulation of this hierarchy empowers designers to
lead users, quite literally, along a cleverly devised visual journey to a goal.
Please rank the circles in the order of importance:
#2: Divine Proportions
Using golden ratio which is a magical number to make all things
proportioned to it aesthetically pleasing
#3: Hick’s Law
states that with every additional choice increases the time required to
take a decision

https://uxplanet.org/design-principles-hicks-law-quick-decision-
making-3dcc1b1a0632
#4: Fitt’s Law
Fitt’s law stipulates that the time required to move to a target area (e.g.
click a button) is a function of the distance to the target and the size of
the target. In other words, the bigger an object and the closer it is to
us, the easier it is to use it.
#5: Rule of Thirds
The best images follow the 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.
#6: Gestalt Design Laws
Its principle is that the human eye sees objects in their entirety before
perceiving their individual parts.
1. Law of Proximity
People group things together that are close together in space. They
become a single perceived object.
With effective web design, you need to make sure things that do NOT
go together, are not perceived as one. Similarly, you want to group
certain design elements together (navigation menu, footer etc) to
communicate that they form a whole.
2. Law of Similarity

We group similar things together. This similarity can occur in the form
of shape, colour, shading or other qualities.
3. Law of Closure
We seek completeness. With shapes that aren’t closed, when parts of a
whole picture are missing, our perception fills in the visual gap. We see
two squares overlaid on four circles even though none of these shapes
actually exist in the graphic.
4. 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.
5. 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.
#7: White space and clean design
• White space (also called ‘negative space’) is the portion of a page left
“empty”. It’s the space between graphics, margins, gutters, space
between columns, space between lines of type or visuals.
• It should not be considered merely ‘blank’ space — it is an important
element of design. It enables the objects in it to exist at all. White
space is all about the use of hierarchy. The hierarchy of information,
be it type, colour or images.
#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.