Empowerment Technologies - Imaging and Designing for Online Environment
Summary
TLDRIn this lesson, Sergio Erickson from Empowerment Technologies covers the fundamentals of graphic design and infographic creation for online environments. Key design elements like point, line, shape, color, and space are defined, and their roles in crafting visually appealing layouts are discussed. The video also explores the principles of balance, emphasis, movement, pattern, rhythm, proportion, and variety in graphic design. Erickson highlights Google's homepage as an example of effective use of space and balance. The tutorial continues with a guide on creating infographics using tools like Piktochart, emphasizing the importance of data, design, readability, and shareability. Finally, the instructor touches on various online image file formats and image hosting platforms, concluding with a quote from Scott Adams about creativity and design.
Takeaways
- 🙏 The session begins with a prayer, emphasizing the spiritual aspect of the gathering.
- 🎨 The lesson focuses on design elements like point, line, shape, color, size, texture, and space which are crucial for creating effective graphics and layouts.
- 🌐 The most visited website in the world is Google, which aims to organize information and make it accessible.
- 🔍 Google's design prioritizes space, drawing attention to its logo and search function, which contributes to its top ranking.
- 📐 Shapes carry different meanings: circles imply infinity and harmony, squares represent security and stability, and triangles suggest aggression and energy.
- 🖌️ Color is significant in design, with RGB being the primary colors for digital displays.
- 📊 Infographics are a powerful tool for presenting complex data in a visually appealing way, often used by educational institutions and government agencies.
- 🛠️ Tools like Piktochart allow for the creation of professional-grade infographics with user-friendly interfaces and cloud storage.
- 🌟 The principles of balance, emphasis, movement, pattern, rhythm, proportion, and variety are essential for effective graphic and layout design.
- 🌐 Different file formats like JPEG, GIF, and PNG have specific uses and limitations, impacting how images are displayed online.
- 📚 The lesson concludes with a practical application task, encouraging learners to analyze technology's role in addressing challenges.
Q & A
What is the main focus of the 'Empowerment Technologies' session led by Sergio Erickson?
-The session focuses on understanding and applying the principles of graphic design and layout, particularly in the context of creating effective online content and infographics.
What are the key terms discussed in the lesson?
-The key terms discussed are point, line, shape, color, size, texture, and the principles of graphics and layout, as well as infographics.
What is the most visited website in the world according to the transcript?
-The most visited website in the world is Google, which aims to organize the world's information and make it universally accessible and useful.
What elements of design does the lesson discuss?
-The lesson discusses elements of design such as point, line, shape, form, texture, color, value, and space.
What is the significance of space in design according to the transcript?
-Space in design refers to the area that acts as a visual container, drawing attention to other visual elements in a layout. An example provided is Google's homepage, which maximizes the use of space to draw attention to the logo and search option.
What are the three basic types of shapes mentioned in the lesson?
-The three basic types of shapes are geometric shapes (like triangle, square, rectangle, and circle), natural shapes (such as animals and plants), and abstract shapes (seen in icons, stylized figures, and graphic illustrations).
What is the role of color in design as discussed in the session?
-Color in design is crucial for creating emphasis and can dramatically change the design. It is produced by objects that reflect light and is important for creating presentations and enhancing visual appeal.
What are the basic principles of graphics and layout outlined in the transcript?
-The basic principles of graphics and layout outlined are balance, emphasis, movement, pattern repetition, rhythm, proportion, and variety.
What is an infographic and why are they used?
-An infographic is a visual representation of statistical data or knowledge in a graphical manner, often creatively designed to attract viewers' attention. They are used to make complex data more visually appealing and easier to understand.
What are the elements that an effective infographic should have according to the lesson?
-An effective infographic should have reliable and timely data, a uniform theme with consistent color and font, readability, a clear story, a solution to a problem, cleverness, and shareability.
What is the purpose of the tool 'Pictochart' mentioned in the transcript?
-Pictochart is a tool used to create professional-grade infographics with features like a simplified user interface, preset templates, high-resolution downloads, and cloud storage for easy access and sharing.
What are the different online image file formats mentioned, and what are their uses?
-The different online image file formats mentioned are JPEG (for real-life photographs and high compression), GIF (for computer-generated graphics with transparency and animation support), and PNG (for screenshots and high compatibility with transparency support but no animation).
Outlines
🙏 Introduction to Empowerment Technologies
Sergio Erickson starts the session with a prayer and introduces the topic of the day: imaging and designing for the online environment. The lesson focuses on graphic and layout design principles, including point, line, shape, color, size, texture, and the use of infographics. The learning objectives are to understand graphic principles, create infographics using web tools, understand various file formats for web use, and manipulate images with simple editors. The most visited website in the world is revealed to be Google, which leads to a discussion on why Google ranks number one despite competition.
🎨 Elements of Design and Art
This section delves into the elements of design and art, such as point, line, shape, form, texture, color, value, and space. It explains the significance of each element, including how points establish visual focus, lines are created by connecting points, and space provides a visual container. The use of Google's homepage as an example of effective space utilization is highlighted. The paragraph also discusses the meaning of different shapes and the importance of color in design, including the RGB color model for digital displays.
📊 Principles of Graphics and Layout
The paragraph discusses the basic principles of graphics and layout, emphasizing the importance of balance, emphasis, movement, pattern repetition, rhythm, proportion, and variety. Each principle is explained with examples, such as how Google uses a balanced layout and emphasizes its logo. The concept of balance can be symmetrical or asymmetrical, and movement guides the viewer's eyes around the screen. Pattern repetition and rhythm create a sense of organized movement, while proportion ensures that elements relate well with one another, and variety draws the viewer's attention using multiple design elements.
📈 Creating Infographics
Infographics are introduced as a way to represent statistical data or knowledge in a visually appealing manner. The elements of infographics include reliable and timely data, a uniform design theme, readability, a story, and shareability. Common types of infographics are listed, such as visual articles, flowcharts, timelines, lists, comparisons, data visualization, and maps. The paragraph also provides an example of how to create infographics using an online tool called Pick Chart, which offers features like simplified user interface, preset templates, high-resolution downloads, and cloud storage.
🖼️ Using Pictochart for Infographics
This section provides a tutorial on how to create visual projects using Pictochart, emphasizing its user-friendly interface, preset templates, and high-resolution download options. It explains how to customize templates, add charts, maps, and other elements, and change text and colors to fit one's needs. The paragraph also discusses how to share or publish the created infographics through various methods, such as email attachments, embedding on websites, or sharing on social media.
🌐 Online Image File Formats and Sharing
The final paragraph covers different online image file formats like JPEG, GIF, and PNG, explaining their features and uses. It also touches on the importance of considering bandwidth limits when uploading and sharing images over the Internet. The paragraph lists various image hosting platforms such as Instagram, Imgur, Google Photos, Photobucket, and Flickr. The summary concludes with a reminder to keep designs simple and to understand the discussed concepts for creating effective infographics.
📝 Conclusion and Assignment
The session concludes with a quote by Scott Adams about creativity and design, emphasizing the importance of understanding the concepts discussed to create good infographics. The audience is reminded of the lesson's learning objectives and is assigned an activity to identify challenges, the technology used to address them, and how technology empowers individuals, as outlined in provided articles.
Mindmap
Keywords
💡Point
💡Line
💡Space
💡Shape
💡Color
💡Texture
💡Balance
💡Emphasis
💡Movement
💡Pattern
💡Proportion
💡Infographics
Highlights
Introduction to the session by Sergio Erickson, emphasizing the importance of prayer and the presence of the Lord.
The session focuses on learning how to create effective PowerPoint presentations and graphic design principles.
Key terms introduced: point, line, space, shape, color, size, texture, and principles of graphics, layout, and infographics.
Learning objectives include understanding graphics principles, creating simple infographics, using file formats, and manipulating images.
Google is identified as the most visited website in the world, sparking a discussion on its success over other search engines.
Elements of design discussed: point, line, shape, form, texture, color, value, and space.
The significance of space in design is highlighted, using Google's homepage as an example of effective use of space.
Shape's role in defining mood in graphic design and the meanings associated with different shapes are explained.
Color's importance in design is discussed, including the RGB model for digital displays.
The basic principles of graphics and layout are introduced: balance, emphasis, movement, pattern, repetition, rhythm, proportion, and variety.
Infographics are defined and their elements, such as reliable data, design, readability, and story, are outlined.
The use of infographics in presenting complex data in an appealing way is emphasized.
Different types of infographics, including visual articles, flowcharts, timelines, and data visualization, are presented.
A tutorial on creating infographics using Picktochart, highlighting its features and ease of use.
Discussion on different online image file formats: JPEG, GIF, and PNG, including their uses and limitations.
The importance of bandwidth limits in uploading and sharing photos over the Internet is explained.
Recommendations for image hosting platforms like Instagram, Imgur, Google Photos, Photobucket, and Flickr.
Summary of the session, reinforcing the principles of graphics and layout and the use of infographics.
A quote by Scott Adams on creativity and design is shared as a takeaway for the audience.
Assignment for the audience to analyze a challenge or problem, the technology used to address it, and its empowerment impact.
Transcripts
foreign
good day everyone I am Sergio Erickson
estua and welcome to empowerment
Technologies
so before we start our session for today
may I request all of you to please bow
your head as we fill the presence of Our
Lord through this prayer in the name of
the father and of the son and of the
holy spirit amen
foreign
[Music]
foreign
[Music]
foreign
[Music]
page is like creating a work of art
there are certain things that you need
to consider in order to get your message
across in the previous lesson we have
learned how to create an effective
PowerPoint presentation and some of
those tips can help you in your graphics
and layout design
so for today's lesson we're going to
discuss Imaging and designing for online
environment
our key terms are as follows we have
point line and space shape color size
texture we have the principles of
graphics and layout and infographics
so our learning objectives are as
follows at the end of the lesson you
should be able to First understand the
basic principles of Graphics in layout
second create simple infographic using
web tools third you need to understand
and use several file formats you use on
web and the fourth one we're going to
manipulate images using simple image
editors
okay so it says here we have a question
what is the most visited website in the
world
so it's not Facebook or Twitter but its
mission statement is to organize the
world's information and make it
universally accessible and useful so the
answer is Google
so according to alexa.com in December
2015 which is a renowned website for
ranking web page popularity it runs this
website number one in the world so why
do you think Google ranks number one
despite the contest search engines and
websites in the internet okay so you
need to answer this after our discussion
foreign
so here are the elements of design we
have point line shape form texture color
value and space
and here are the seven elements of art
we have line shape form space texture
value and color
so let's define the different elements
of art so the first one is we have your
point so this is simply a DOT and it
establishes a position in acts as a
visual Focus so we have here several
examples of points okay and if we
connect two or more points we can create
a line so this is your first point and
second point and then we can just create
a line okay okay and using that it
begins by extending one point towards a
specific Direction okay next we also
have what we call space so this is an
area which refers to the surface that
acts as a visual container or drawing
that gives you an attention to other
visual elements in a layout so one good
example of
good use of space is on Google as you
can see when you type in www.google.com
you can just see the logo and then we
have here text box and the search option
that's how you just see uh your Google
website and they really maximize the
purpose of space so that it draws
attention to the
um
the logo of that particular website
next is shape so this is an element of
design which is a combination of lines
points and space so it helps to define
the mood of your graphic design and each
of this particular shape has its own
meaning
Okay so
here are some meanings of the different
shapes it can be Circle which means it
it implies Infinity Harmony and
Perfection and the insights such as
protection and endurance first Square
um it presents security and stability
and it illustrates strong character
firmness and protection and for triangle
it presents aggression and energy and it
illustrates illustrates progression in
Direction okay so these are some of the
definitions of the different shapes
okay and there are three basic types of
shapes we have here geometry which such
as Triangle Square rectangle in circle
we have natural shapes just as the
animals and plants and we also have
abstract
which can be seen on icons stylized
figures and graphic illustrations
so color is also an important aspect of
um
design key or art so all colors come
from Pure light a color is produced by
an object that reflects lights and color
can produce dramatic changes in the
design when it is used to emphasize
things or create images and color is
also very important in creating some
presentations as we have discussed in
our PowerPoint lesson so we have here
the primary colors for a digital
a digital displays we have the RGB or
red queen and blue okay so this is the
primary colors for digital displays
okay so aside from that uh we also need
to understand the size of your
um art okay so size refers to how large
or small something is in the document
and it allows you or helps you to create
layout more attractive and organized
texture is also important because it
presents a look or feel of the
particular surface and printed patterns
are a type of visual texture
okay so let's proceed to uh basic
principles of graphics and layout so
creating a web page is like creating a
work of art okay so we need to
understand this because it allows us to
understand how we can create later on
infographics okay so the first one that
we need to understand is about balance
so when we say balance this is the
visual read of objects texture colors
and space that is evenly distributed on
the screen when visiting a website check
if one site holds the same amount of
weight on the other because
um
uh this can suggest that the web page is
on balance procession and you should
also check the colors
um it has also some visual way okay so
balance can either be symmetric or
asymmetrical okay so these are examples
of balance as you can see this is a
perfect symmetry another example of
balance where you can just see here
pictures and on the other eyesight is
onwards so this is an example of
asymmetrical balance
foreign
next is on emphasis so when we say
emphasis this is an area in design that
may appear different in size texture
shape or color to attract the viewer's
attention so similar with Google so they
just use the logo that is placed on the
center of the website so it emphasizes
the theme of the website okay so here is
an example of emphasis where they use
the
color red okay to make an emphasis and
it is the letter is larger compared to
the other text another example of
emphasis is this one
next is movement so when we say movement
um this presents a visual element that
guides the viewer's eyes around the
screen okay so with this particular
example as you can see the movement goes
to the left side of your screen okay and
this type of image
um the movement is going around okay
because you if you want to see the
information one by one okay or the image
one by one you just need to go around
the picture so that's an example of
movement
next is pattern repetition and Rhythm so
this is an example of repeating visual
element in an image or layout to create
a Unity
in the late Outer Image so rhythm is
achieved when visual elements create a
sense of organized movement so let's try
to differentiate the T so this is an
example of a pattern so we have a
bigger line and this is a smaller line
okay and this is an example of that
pattern okay for the repetition as you
can see this is an example of a shape
hexagon and it uses uh that particular
shape to create this particular
repetition pattern okay and this a
particular example it creates a rhythm
because as you can see it creates an
organized movement
okay
next we also have here a proportion so
proportion is also important in creating
web pages and even infographic posters
because this allows you to have your
elements create a sense of unity where
they can relate well with one another
Okay so
um this type of
um
shape is what we call Fibonacci and
Fibonacci is used in mathematics okay so
um using this Fibonacci um
uh style this allows you to have a
visual proportion in your
websites okay a good example of having
good proportion is your Facebook page so
on your Facebook uh you can see the uh
features on the left side of your page
and then the timeline is placed inside
here uh on this particular example which
is Twitter the information is placed
here and then the timeline is placed
here using the Fibonacci so
um Fibonacci as you can see here uh it's
like one part of the side of that
particular website is for other
information and the majority of the
content should be placed on the other
side
okay and next we have variety so this is
on the use of several Design Elements to
draw the viewer's attention so here are
examples of variety okay so here uh this
is a combination of the different basic
principles of graphics and they are so
I'll give you an example this is on
emphasis we can also see here some
patterns okay
um it can also be an example of
repetition as you can see here okay and
the like so that's a combination of
different principles on this one we can
see that it can present i a
you can present proportion okay because
um if you divide this this is bigger
compared to this one and this can also
be on emphasis okay
that's an example of this okay
next
okay so let's proceed to infographics so
when we say infographics these are
information
that are used to represent
um statistical data or knowledge in a
graphical Manner and is usually in a
creative way to attract the viewer's
attention and nowadays
um
majority of the different schools and
different government agencies now use
infographics to present different datas
and information or even announcement to
the people okay so it makes a complex
data become more visually appealing to
an average user
so here are the elements of infographics
it should have data which is reliable
timely and have timely content it should
have a design in which it should have a
uniform theme color font and it should
be readable it should have a story okay
okay it presents a solution to other
problem it should be clever okay and it
should have a message and shareability
meaning you can just
share this to the viewers and so that
the viewers can understand it much
easier
so here are the common types of
infographics we have the visual article
we have the flowchart as seen here we
have timelines lists number love versus
comparison data visualization and maps
so this is an example of an infographics
as you can see this is a combination of
different pngs or um we have your icons
and then the information as your space
beside it okay so that's how infographic
Works another example of infographic are
used in RDR okay so we have
um the things to do when there is a
flood before during and before after and
if there is an earthquake what should we
do before during and after so example uh
during an earthquake we need to drop
cover and hold okay so using this a
simple information in graphics we can
understand
much easier okay compared if you just um
please here just uh words okay another
example are as follows
um
uh what to do during a hurricane before
during and after and so on Okay so
how do we create infographic using pick
the chart so here are some features of
it um it has a simplified user interface
it uh it has preset templates and
Graphics that you can use
it has a high resolution for downloads
especially if you download it as an
image
in jpeg file and it has a professional
grade infographics okay and the good
thing about picture chart is it allows
you to have this what we call cloud
storage in which you can just save the
file on the web and then you can just
access it whenever you have your
internet connection okay so to further
understand how pictosart works and how
to use it we just need to watch this
video
creating a visual project in picture
chart is super easy no matter what your
role is just watch and we'll show you
this is your picture chart account
when you log in the first thing you'll
see is a templates dashboard
this is where you'll select a previously
saved project or create a new project by
choosing a template format on the left
side of the screen either infographic
presentation or printables just search
or scroll down and browse through the
templates list clicking preview on
templates that you think you'll like
until you find exactly the one you want
to use if you want a sharp lookout for
structure or layout think roadmaps
comparisons lists Etc let's go ahead and
select this template called startup
basic just click create to start editing
your template
once you're situated in the picture
editor you'll see that it'll be super
easy to customize your chosen template
the formatting is already taken care of
for you
just need to go in and change text to
fit your needs and change colors on the
canvas using your color palette or your
own hex values
you can even use a photo and set it as a
background too
changing up a template is exactly how
you'll turn one of our templates into
your own creation
while charts are certainly an option
let's go ahead and add a map in the next
block and repurpose it by changing the
percentages and the text description
next to it
foreign
[Music]
[Music]
let's scroll down to the next block here
you can see that the basic design and
simple layout and spacing is already
done for you all you need to do is once
again change the text maybe add some
hyperlinks to outside articles or videos
delete the current icons and add icons
and photos of your own choosing
you don't find Icons or photos that you
want from our library
there's no need to worry
you can easily upload your own images
brand logos and icons here by clicking
on the upload section
you can see that you're quickly changing
this template to reflect the exact
project we're going for
let's go ahead and clone this block to
add to our project
[Music]
foreign
remember to hold shift when clicking to
select two or more elements on the
canvas and finally our tools are
intended to provide data visualizations
to back up whatever story you're trying
to tell here in our charts feature all
you need to do is simply plug in or
import your data
Choose Your Chart format and off you go
[Music]
foreign
you can choose many variations of charts
like this icon Matrix where you can
portray your data with an icon of your
choosing
you'll notice that if you're using
picture chart right everything should be
falling into place with relative ease
and speed and that the changes you're
making are pretty straightforward and
clear because you're using our templates
to your advantage our editor does a
creative work for you all you have to do
is customize our templates for your
needs
once you're done making edits to your
project there are a few things you can
do with it
first you can make an exact copy of your
project by clicking save as so that you
can work on another variation of it in
the future
you can also download your project as an
image or PDF and share those as
attachments in email or print them from
your desktop
or you can publish your project by
clicking on the share button publishing
your project will give your audience
permission to see your project no matter
how you share it
give them the custom link
embed your project on your website or
blog directly share it with someone
using a pictocard or if it's for
everyone to see share it with your
social media followers on Twitter
Facebook Google Plus or Pinterest what
will happen is when your audience clicks
on your shared link they'll be taken
straight to the project
they'll then be able to view your
project interact with it and leave
comments as well
if I were conducting a live webinar or
in-person presentation I could also hop
into a picture presentation mode and
flip through each block as if they were
slides
there's plenty more to learn about
picked a chart and creating visual
projects so play around and have some
Picto fun we're always here to help and
willing to answer any questions you may
have so Jump Right In and get started
with creating your project thanks and
happy picture charting
so let's proceed to the different online
image file formats so that when you will
be creating your infographics and
exporting it here are some of the
features on each of the file type so the
first one is join photographic experts
group or also known as your jpeg so the
use of it is for Real Life photographs
and high compressions so the downside of
this jpeg is it doesn't support
transparency and doesn't support
animation next is your GIF or Graphics
interchange format so this is a computer
generated Graphics it has transparency
and it can support some animation
next is your ping or PNG so this is used
for screenshots and high compatibility
it has transparency properties but it
doesn't support sound animation
so how do we insert upload and share
photos over the Internet okay so in this
case we just need an image hosting
applications and there are a lot of
hosting applications that we can use
especially in posting some images in
most of the social media that we use we
can use it to upload our images and
videos okay and just present it to that
to our friends on those particular
social media and image hosts are website
specializing in storing photographs and
these photographs can be easily be
embedded to a web page or a website
so uh one of the things that we need to
consider in inserting uploading and
sharing photos is what we call bandwidth
limits because it hinders and access to
your image once a certain magic quota is
reach which is all
um already measured by megabyte and
gigabyte so Dakota is
an example of
the limit that a website can can be
accessed for that particular time so
when this is reached
um a lot of people have loaded the
images using their own computers on a
certain amount of time and usually a
hotel can be on a monthly basis
foreign so here are some image hosting
platforms that you can use or you can
upload some photos of we have Instagram
okay we have Imgur we have Google photos
we have photo bucket and we have Flickr
as uh as the image hosting applications
that we can use and on Google photos you
can use this as a means for backup
pictures because it provides you some
gigabytes okay to to store your images
okay so in summary of our discussions we
have the basic principles of graphics
and layout which includes violence
emphasis movement pattern repetition
Rhythm proportion and variety and
infographics is used to represent
information that is statistical or
knowledge in a graphical manner
okay so for our code of the day
creativity is allowing yourself to make
mistakes and design is knowing which
ones to keep this is according to Scott
Adams and in order for us to create a
very good infographic is we need to
understand all the concepts that we have
discussed under this particular lesson
and just like in PowerPoint presentation
we need to keep it simple
so for our practice what you're going to
do is to answer Activity three of our
subject
um which is a title situation and
Analysis so you are tasked to identify a
challenge or a problem the technology
used to address the challenge and how
the technology empower the individuals
involved in the different articles that
will be given to you on your activity
sheet so you need to answer this on your
activity later on
thank you for watching and I hope that
you have learned many things from our
discussion see you on our next lesson
keep safe and God bless
[Music]
foreign
[Music]
thank you
[Music]
Ver Más Videos Relacionados
The Principles of Design | FREE COURSE
Elements and Principles 3D Art - Google Slides
Understanding the Principles of Design | Graphic Design Basic
Prinsip Dasar Desain dalam Desain Komunikasi Visual - Video Pembelajaran - DKV #dkv #desain
Principles and Elements of Design
Lecture: Formal Elements and Principles of Design
5.0 / 5 (0 votes)