Lesson 3 Imaging and Design For Online Environment
Lesson 3 Imaging and Design For Online Environment
Imaging and Design for Online Environment are graphic visual representations of information.
Learning is more fun through infographics, not only
Basic Principles of Graphics and Layout because it is appealing to
the eyes but it is also educational. With the use of
Some of the most commonly acknowledged infographics you can deliver information
principles of design are alignment, contrast, quickly and more precise. Infographics also
proximity, balance, repetition, and white space. enhances the readers/viewer’s visual skills.
These are all elements of graphic design.
Elements of Message Design using
1. Alignment – One common thing beginners do in Infographics
designing is aligning all of the
elements in the center, but did you know that there • Color – Color helps us distinguish one color from
are other ways? To keep the another. Color is basically used to
design balanced, you can try spreading your draw attention to certain part of an object. Color also
elements from one another. Play with can convey an emotion from
your design. If it doesn’t look or feel right, you may a message. Color is made up of three parts. Value,
adjust your elements till you hue and saturation.
feel satisfied. It is important to be consistent in the
alignment of your elements. • Line – A line is a series of points that are adjacent
Still be cautious enough, you may confuse the to one another. Lines unlike
readers with your intention just by points can also convey different kinds of messages.
committing some errors in your layout E.g Line orientation can present
different moods. Lines can also be used to separate
2. Balance – Balancing your elements is essential in content from one another. Or
designing. One section must not to connect ideas.
be heavier from the other. It still depends what
message or mood you would like • Shape – is an outline of an area or a figure. Using
your audience to feel. Changing the size shape or shapes to convey a message is
tone of your elements helps. not only helpful but creative. Shapes can also
represent a variety of things in a
3. Contrast – One way in making the elements of simple manner. For example in Maps, every shape
your design get noticed is by presents a certain continent.
contrasting your elements. By doing this, it can make Shapes can also represent a quantitative data.
the text that you want to
emphasize, stand out from the others. You may also • Texture – When we talk about texture, we see it as
use different shapes and you have to touch it to feel
symbols. Changing the colors of each element may the texture of a certain object. Texture helps for
also help you deliver your visual example if you want to choose a
message. terrain. Whether it is rocky, moldy feather-ish etc.
4. Proximity – Is used to guide your readers/viewers • Point – to simply catch a viewer’s attention. Put a
to different parts of the message. It is something to point or a circle, different from
consider when laying out graphics. It is grouping the the backgrounds color and in the part of the picture
related you want to emphasize. A point is a location and has
items together, so it is important that they’re relevant no length or width of its own. Instead of thinking it’s
to one another. Sticking to a shape it’s more of an abstract.
templates that you may find online is not bad. But it
still helps to know the design Online file formats for Images and Text
principles if you want to customize an existing
design. Here, we are going to discuss the different file
formats of images and text and how efficient
5. Repetition – Like how your mother repeats every and how they differentiate from each other.
time that you should wash the For images:
dishes, repetition in a layout design can is simply
visually amusing. Repetition also 1. BMP – Bitmap is a commonly used raster
serves as a guide for the readers. Insure that your graphics image file format to store bitmap
document employs the principles digital images.
of repetition, consistency, and unity in page design.
2. JPEG/JPG – is the acronym for Joint
6. White Space – Too much content in the page may Photographic Experts Group. This type of
not be appealing to the eyes image file extension is commonly used and it
of the reader/viewer. That is why white space adjusts reduces the actual file size. You may
the mood of your page. Plus lose some of the details of the image but it is good
a white space directs your readers/viewers eye to for saving some space up your
your text or message. It easily memory.
catches their attention.
3. PNG – stands for Portable Network Graphics. web content and cater to different kinds of
PNG file formats saves images at a information such as texts, images, and videos.
higher quality, even when you zoom your image it
doesn’t pixelate. If you want a
transparent background when you edit in Adobe Social Media Platforms - are computer-mediated
Photoshop or if you’re looking for tools that allow people, companies and other
images on google with transparent background, look organizations to create, share, or exchange
for PNG file formats. information, career interests, ideas, and
pictures/videos in virtual communities and networks
4. GIF – is the acronym for Graphics Interchange
Format. It is a bitmap image format Social Media Like what most people do nowadays,
that supports animated and static images. Social media consists of websites and applications
that enable users to create and share content or to
5. PSD – if you have an unfinished work in Adobe participate in social networking. Examples are as
Ps. Just save your file as .psd and you follows:
can edit your work anytime you want
For texts: Facebook – everyone knows Facebook, but still let
us define it. Facebook is a social networking site in
1. .txt - is for Text Document/Plain Text which is where you can create an account, customize your
mostly seen when you open notepad, profile, find and add common users or friends,
type something and when you save, you see this file communicate with every human being, upload
format. photos or videos, create events, a page for a famous
person, or a page for your business and many more.
2. .srt – as you download movies online, some come You can do almost anything on facebook, no wonder
with an SRT file. SRT files are the why everyone has it.
subtitles for the movie. It stands for SubRip video
subtitle format. Twitter - online social networking service that
enables users to send and read short 240- character
3. .doc/.docx – is a file format for Word Document. messages called “tweets”
This works for Microsoft Word.
Instagram - is an online mobile photo-sharing site
4. .pdf – is a file extension for Adobe Reader which that allows its users to share pictures and videos
stands for Portable Document Format. It is either publicly or privately on the app, as well as
commonly used for Educational Online books, through a variety of other social networking
references, thesis etc. platforms
5. .html – stands for Hypertext Markup Language. LinkedIn - is a social networking site designed
HTML is a file format used for creating webpages specifically for the business community. The goal of
online. the site is to allow registered members to establish
and document networks of people they know and
Online Platforms trust professionally.
You may not be familiar with the term online Google+ - is an Internet-based social network that
platforms but these are the tools that you use in your is owned and operated by Google and you can add
everyday routine. Wordpress, Dropbox, Facebook, curated circles for your particular interests,
Twitter, YouTube, Gmail, Picasa and many more are entertainment, news, sports, etc.
examples of an online platform. These tools or
applications help you create, invent, design, Blogging Platforms - is the software or service that
improve, and develop workable solutions and new you use to publish your content onto the internet in
ideas that you may share with everyone. These are the form of a blog. A blog platform is a specific form
mainly used for communication, business of a content management system.
processes, presentations, seeking new knowledge,
and for entertainment purposes that may kill your WordPress - is open source software you can use
boredom. By using these platforms, you may to create a beautiful website or blog. It just may be
discover skills you haven’t thought you’d got and the easiest and most flexible blogging and website
guess what? Maybe it’ll give light to your dull and content management system (CMS) for beginners.
boring life. Or next thing you know, you’re already a
millionaire. As we go further, we will help you Tumblr - is a popular microblogging platform
differentiate every application and how it may benefit designed for creative self-expression. It is
you depending on what is it that you want to considered a mindful alternative to Facebook and
accomplish. other social media websites where users blog on a
myriad of topics.
Online Platforms - are technologies that are
grouped to be used as a base upon which other Blogger - is a blog-publishing service that allows
applications processes or technologies are multi-user blogs with time-stamped entries.
developed. It is created to aid users in creating their