SlideShare a Scribd company logo
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 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
Thinkfinity: www.thinkfinity.org
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
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.
• 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
Asia Society: www. asiasociety.org
• 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.
Purdue Online Writing Lab:
owl.english.purdue.edu
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)
• Started in 1996
• Provides links to teacher resources on the internet
• Free to use since 2005
Teacher Corner: www.theteacherscorner.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
SlideShare: www.slideshare.net
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
Please rank the circles in the order of importance:
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
#2: Divine Proportions
Using golden ratio which is a magical number to make all things
proportioned to it aesthetically pleasing
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
#3: Hick’s Law
states that with every additional choice increases the time required to
take a decision
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
#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.
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
#6: Gestalt Design Laws
Its principle is that the human eye sees objects in their entirety before
perceiving their individual parts.
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
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.
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
2. Law of Similarity
We group similar things together. This similarity can occur in the form
of shape, colour, shading or other qualities.
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
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.
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
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.
The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications
#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.

More Related Content

PPTX
ICT Projects for Social Change.pptx
PPTX
Natures and Purpose of Online Platforms and Applications
PPTX
Online platform
PPTX
Lesson 6
PPTX
Types and Advantages of Massive Open Online Course
PPTX
ICT in the context of global communication.pptx
PPTX
Empowerment Technologies Lecture 6 (Philippines SHS)
PPTX
E-TECH Q2 Week 1 - Module 12 (1).pptx
ICT Projects for Social Change.pptx
Natures and Purpose of Online Platforms and Applications
Online platform
Lesson 6
Types and Advantages of Massive Open Online Course
ICT in the context of global communication.pptx
Empowerment Technologies Lecture 6 (Philippines SHS)
E-TECH Q2 Week 1 - Module 12 (1).pptx

What's hot (20)

PDF
[EMPOWERMENT TECHNOLOGIES]-MULTIMEDIA AND ICT
PPTX
Imaging and Design for Online Environment
PPTX
Empowerment Technology
PPTX
Webpage Design Using Templates and Online WYSIWYG Platforms
PPTX
Empowerment technologies byShyna Gane Daleon and Galasao
PPTX
online safety, security and rules of netiquette
PPTX
Empowerment Technologies - Imaging and Design for the Online Environment
PPTX
EmpTech Lesson 10-Collaborative Development of ICT Content.pptx
PPTX
Publishing and sustaining ict projects
PPTX
Mail-Merge-and-Label-Generation.pptx
PPTX
Nature and purposes of of online platforms and applications
PPTX
Hyperlinking the Presentation
PPTX
Uploading sharing-and-image-hosting-platforms
PPTX
Social Media - Empowerment Tech: ICT for Professional Tracks
PDF
Presentation/Visualization
PPTX
Empowerment Technologies Lecture 12 (Philippines SHS)
PPTX
Empowerment Technologies - Online Platforms as Tools for ICT Content Development
PPTX
Empowerment Technology - Learning Content
PPTX
L10 Interactive Multimedia.pptx
PPTX
The Evolution of Traditional to New Media.pptx
[EMPOWERMENT TECHNOLOGIES]-MULTIMEDIA AND ICT
Imaging and Design for Online Environment
Empowerment Technology
Webpage Design Using Templates and Online WYSIWYG Platforms
Empowerment technologies byShyna Gane Daleon and Galasao
online safety, security and rules of netiquette
Empowerment Technologies - Imaging and Design for the Online Environment
EmpTech Lesson 10-Collaborative Development of ICT Content.pptx
Publishing and sustaining ict projects
Mail-Merge-and-Label-Generation.pptx
Nature and purposes of of online platforms and applications
Hyperlinking the Presentation
Uploading sharing-and-image-hosting-platforms
Social Media - Empowerment Tech: ICT for Professional Tracks
Presentation/Visualization
Empowerment Technologies Lecture 12 (Philippines SHS)
Empowerment Technologies - Online Platforms as Tools for ICT Content Development
Empowerment Technology - Learning Content
L10 Interactive Multimedia.pptx
The Evolution of Traditional to New Media.pptx
Ad

Similar to The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications (20)

PPTX
E-TECH- W6.pptx-Empowerment technology refers to using technology like comput...
PDF
Creating a Positive Professional Presence (ISASA)
PPTX
Conole icem keynote_final_28_sept
PDF
Creating engaging and accessible online courses with wordpress.com
PPT
Conole Canada Keynote
PPT
Conole Canada Keynote
PPT
Conole Canada Keynote
PPT
Conole_AECT_presentation
PPTX
Conole keynote in_suedu
PPTX
empowerment technologies lesson about computer
PDF
User experience design, service design & design thinking : A common story ?
PPTX
Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
PDF
Lesson-7-Web-page-design-using-templates-and-online-WYSIWYG.pdf
PPTX
Conole openness
PPTX
WDD Chapter 1 class pp notes
PPTX
Designers Rus L2009
PPTX
Ossiannilsson lu lakarprogrammet1301214
PDF
Creating Digital Learning Resources for Open Sharing
PPT
Conole Cambridge
PPT
Conole TechItUp Conference Kamloops
E-TECH- W6.pptx-Empowerment technology refers to using technology like comput...
Creating a Positive Professional Presence (ISASA)
Conole icem keynote_final_28_sept
Creating engaging and accessible online courses with wordpress.com
Conole Canada Keynote
Conole Canada Keynote
Conole Canada Keynote
Conole_AECT_presentation
Conole keynote in_suedu
empowerment technologies lesson about computer
User experience design, service design & design thinking : A common story ?
Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
Lesson-7-Web-page-design-using-templates-and-online-WYSIWYG.pdf
Conole openness
WDD Chapter 1 class pp notes
Designers Rus L2009
Ossiannilsson lu lakarprogrammet1301214
Creating Digital Learning Resources for Open Sharing
Conole Cambridge
Conole TechItUp Conference Kamloops
Ad

More from LieLanieNavarro (20)

PPTX
LESSON 10_ETECH.pptx-Empowerment technology refers to the use of technology t...
PPTX
LESSON 13_ETECH.pptx-Empowerment technology refers to the use of technology t...
PPTX
LESSON 5_ETECH.pptx-Empowerment technology refers to the use of various techn...
PPTX
LESSON 6_ETECH.pptx-First Quarter First Semester
PPTX
CSSW23.pptx-Computer Systems Servicing (CSS)
PPTX
CSS-W20.pptx-Computer Systems Servicing (CSS) is a technical vocational cours...
PPTX
CSS-W21.pptx-Computer Systems Servicing (CSS) is a technical vocational cours...
PPTX
CSSW22.pptx-Computer Systems Servicing (CSS) is a technical vocational course...
PPTX
CSS-W16.pptx-COMPUTER SYSTEM SERVICING NCII
PPTX
CSS-W1-Q2.pptx-COMPUTER SYSTEM SERVICING
PPTX
CSS-W3-Q2.pptx-COMPUTER SYSTEM SERVICING
PPTX
css-w10.pptx-In computer systems servicing, Personal Entrepreneurial Competen...
PPTX
css-w11.pptx-In computer systems servicing, Personal Entrepreneurial Competen...
PPTX
CSS-W9.pptx-COMPUTER SYSTEM SERVICING NC
PPTX
CSS-W8.pptx-COMPUTER SYSTEM SERVICING 2-
PPTX
css-w3.pptx- is a vocational course that focuses on developing the skills and...
PPTX
css-w4.pptx- is a vocational course that focuses on developing the skills and...
PPTX
CSS-W1.3.-COMPUTER SYSTEM SERVICING FIRST QUARTER
PPTX
CSS-W1.-COMPUTER SYSTEM SERVICING FIRST QUARTER
PPTX
424410416-COC-1-Computer-Systems-Servicing-Presentation-by-Horacio-N-Aceveda-...
LESSON 10_ETECH.pptx-Empowerment technology refers to the use of technology t...
LESSON 13_ETECH.pptx-Empowerment technology refers to the use of technology t...
LESSON 5_ETECH.pptx-Empowerment technology refers to the use of various techn...
LESSON 6_ETECH.pptx-First Quarter First Semester
CSSW23.pptx-Computer Systems Servicing (CSS)
CSS-W20.pptx-Computer Systems Servicing (CSS) is a technical vocational cours...
CSS-W21.pptx-Computer Systems Servicing (CSS) is a technical vocational cours...
CSSW22.pptx-Computer Systems Servicing (CSS) is a technical vocational course...
CSS-W16.pptx-COMPUTER SYSTEM SERVICING NCII
CSS-W1-Q2.pptx-COMPUTER SYSTEM SERVICING
CSS-W3-Q2.pptx-COMPUTER SYSTEM SERVICING
css-w10.pptx-In computer systems servicing, Personal Entrepreneurial Competen...
css-w11.pptx-In computer systems servicing, Personal Entrepreneurial Competen...
CSS-W9.pptx-COMPUTER SYSTEM SERVICING NC
CSS-W8.pptx-COMPUTER SYSTEM SERVICING 2-
css-w3.pptx- is a vocational course that focuses on developing the skills and...
css-w4.pptx- is a vocational course that focuses on developing the skills and...
CSS-W1.3.-COMPUTER SYSTEM SERVICING FIRST QUARTER
CSS-W1.-COMPUTER SYSTEM SERVICING FIRST QUARTER
424410416-COC-1-Computer-Systems-Servicing-Presentation-by-Horacio-N-Aceveda-...

Recently uploaded (20)

PDF
Anesthesia in Laparoscopic Surgery in India
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PPTX
master seminar digital applications in india
PPTX
Renaissance Architecture: A Journey from Faith to Humanism
PPTX
Cell Structure & Organelles in detailed.
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
Complications of Minimal Access Surgery at WLH
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PDF
Pre independence Education in Inndia.pdf
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
Microbial disease of the cardiovascular and lymphatic systems
PDF
Sports Quiz easy sports quiz sports quiz
PPTX
Pharma ospi slides which help in ospi learning
PDF
RMMM.pdf make it easy to upload and study
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
01-Introduction-to-Information-Management.pdf
PPTX
Cell Types and Its function , kingdom of life
PPTX
Institutional Correction lecture only . . .
PDF
O7-L3 Supply Chain Operations - ICLT Program
Anesthesia in Laparoscopic Surgery in India
Pharmacology of Heart Failure /Pharmacotherapy of CHF
master seminar digital applications in india
Renaissance Architecture: A Journey from Faith to Humanism
Cell Structure & Organelles in detailed.
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
Complications of Minimal Access Surgery at WLH
O5-L3 Freight Transport Ops (International) V1.pdf
2.FourierTransform-ShortQuestionswithAnswers.pdf
Pre independence Education in Inndia.pdf
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
Microbial disease of the cardiovascular and lymphatic systems
Sports Quiz easy sports quiz sports quiz
Pharma ospi slides which help in ospi learning
RMMM.pdf make it easy to upload and study
STATICS OF THE RIGID BODIES Hibbelers.pdf
01-Introduction-to-Information-Management.pdf
Cell Types and Its function , kingdom of life
Institutional Correction lecture only . . .
O7-L3 Supply Chain Operations - ICLT Program

The Principles and Techniques of Design using Online Creation Tools, Platforms, and Applications

  • 1. THE PRINCIPLES AND TECHNIQUES OF DESIGN USING ONLINE CREATION TOOLS, PLATFORMS, AND APPLICATIONS TO DEVELOP ICT CONTENT FOR SPECIFIC PROFESSIONAL TRACKS
  • 2. • 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
  • 4. • 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 Thinkfinity: www.thinkfinity.org
  • 7. 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
  • 8. 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.
  • 9. • 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 Asia Society: www. asiasociety.org
  • 10. • 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. Purdue Online Writing Lab: owl.english.purdue.edu
  • 11. 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)
  • 12. • Started in 1996 • Provides links to teacher resources on the internet • Free to use since 2005 Teacher Corner: www.theteacherscorner.net
  • 13. • 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 SlideShare: www.slideshare.net
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. THE NATURE AND PURPOSES OF ONLINE PLATFORMS AND APPLICATIONS
  • 19. 8 EFFECTIVE WEB DESIGN PRINCIPLES YOU SHOULD KNOW
  • 20. #1: Visual Hierarchy It’s the order in which the human eye perceives what it sees
  • 21. Please rank the circles in the order of importance:
  • 23. #2: Divine Proportions Using golden ratio which is a magical number to make all things proportioned to it aesthetically pleasing
  • 27. #3: Hick’s Law states that with every additional choice increases the time required to take a decision
  • 29. #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.
  • 30. #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.
  • 32. #6: Gestalt Design Laws Its principle is that the human eye sees objects in their entirety before perceiving their individual parts.
  • 34. 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.
  • 36. 2. Law of Similarity We group similar things together. This similarity can occur in the form of shape, colour, shading or other qualities.
  • 38. 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.
  • 40. 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.
  • 41. 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.
  • 42. #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.
  • 44. #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.