Scribd
Upload
21 views22 pages

Lesson 5 Imaging and Design For The Online Environment

The document discusses principles of graphic design and layout for online environments. It covers topics like balance, emphasis, alignment, hierarchy, contrast and unity. It also discusses design elements, image editing techniques, platforms for hosting images and more.

Uploaded by

christian gesta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views22 pages

Lesson 5 Imaging and Design For The Online Environment

The document discusses principles of graphic design and layout for online environments. It covers topics like balance, emphasis, alignment, hierarchy, contrast and unity. It also discusses design elements, image editing techniques, platforms for hosting images and more.

Uploaded by

christian gesta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

IMAGING AND DESIGN FOR THE

ONLINE ENVIRONMENT
BASIC PRINCIPLES OF GRAPHICS AND
LAYOUT

Communication is critical for people to share thoughts,


feelings, and emotions. With the use of different media,
people can express their views in many ways, including
adding artistic designs. The purpose of the combined
images and texts also gives influence to people not just
understand the sent idea or message, but it also adds
emotion to what is being seen.
• WHAT MAKES A GOOD AND EFFECTIVE
WEBSITE?

HOW DO USERS INTERACT WITH THE


WEBSITES THEY VISIT?
Usability is important for the users as it satisfies
their experience on the website, but a good design
will drag the audience’s attention to stay on the
page. Always remember that first impressions last
and web design has an impact on the users on
how they perceive the brand or message.
• Graphic design is an artistic way of communicating ideas
and messages through visual expressions using texts,
images, and symbols. Graphic designers work on the
quality of the output they serve for the audience or clients
like websites, advertisements, posters, flyers, logos, videos,
and any other multimedia form. A practical graphic layout
and design can easily catch the attention of the viewers
and allow them to understand the message conveniently.
GRAPHIC DESIGN VS. LAYOUT

• Design is a plan of creating an idea through a


combination of texts, images, and other elements that
are placed together artistically, whereas, the layout is a
term used as the process of organizing and arranging
these elements in a design as you plot it in a paper.
BASIC PRINCIPLES OF DESIGN AND LAYOUT
• 1. Balance It refers to the proper arrangement of the elements,
which gives a visual weight for the design. There are two types
of balance, Symmetrical or Asymmetrical. Symmetrical balance
is where the elements are equally distributed on both sides of
your design, technically a mirror-based design. In contrast,
Asymmetrical balance is a free layout where the elements can
be placed in any order or the opposite of symmetrical
2. Emphasis
• It refers to something that needs to stand-out or emphasize.
When working on emphasis, you can change the color, size, or
even the element itself to lead the eye to the focal interest
3. PATTERN, REPETITION AND RHYTHM
• The use of repetitive elements such as lines, shapes, forms,
textures, space, colors, font, style, and the like to create texture,
movement, continuity, and consistency of the design. It also
makes the design formal and more comfortable to read because
of its uniformity
4. ALIGNMENT

• It refers to the proper placement of an element to your


design, just like invisibly placing or aligning your texts or
images diagonally, vertically, and horizontally. The
standard texts or paragraph alignment we apply are
center, right, left, and justified.
5. HIERARCHY
• It refers to the proper arrangement of the details such as text,
characters, numbers, and symbols. Changing its character size,
thickness, spaces, or even font type to stand out is its most critical
features. By applying this principle, it can help the viewer to
recognize and navigate the highlight of the event smoothly.
6. CONTRAST
• It refers to the use of different or opposite elements such as sizes
(large or small), shapes (geometric or organic), spaces (negative
or positive), form (real or abstract), colors (monochromatic,
complementary, triadic, tetradic), texture (smooth or rough),
and values (light or dark). The contrast gives visual weight to an
object or design. You must consider and limit the use of different
elements, color, style, and typography to avoid cluttered design.
7. UNITY AND HARMONY
• It refers to the relationship of the elements or the contents
when you place them together. The elements of the design
must work together and agree to its meaning, theme,
feeling, or mood.
• WHITE SPACE – “White space is the art of nothing.
White space is the absence of text and graphics” -
Principle of White Space
• WHITE SPACE – negative space
FIVE PRINCIPLES IN ORDER TO CREATE
AN EFFECTIVE INFOGRAPHIC DESIGN

• BE UNIQUE
• MAKE IT SIMPLE
• BE CREATIVE AND BOLD
• LESS IS MORE
• THE IMPORTANCE OF GETTING IT ACROSS
ONLINE PLATFORMS FOR IMAGES NADD
TEXT

• Join Photographic Experts Group - JPEG


• Graphics Interchange Format - GIF
• Portable Network Graphics – PNG
• Portable Document Format - PDF
• Document File - DOC
FIVE BASIC TECHNIQUES OF IMAGE
EDITING

• CROPPING
• COLOR BALANCE
• BRIGHTNESS AND CONTRAST
• COMPRESSION AND RESIZING
• FILTERS
BASIC IMAGE MANIPULATION USINF
OFFLINE OR OPEN SOURCE SOFTWARE

• CLONING
• CHANGING BACKGROUND
• REMOVING COLORS
• COMBINING TEXT, GRAPHICS, AND IMAGES
UPLOADING, SHARING AND IMAGE
HOSTING PLATFORMS
• Imgur
• Google Photos
• Flickr
• Photobucket
• Imageshack
• Dropbox
THANK YOU!!

You might also like