This document discusses different image file formats and the basics of using color in design. It describes GIF, JPEG, and PNG file formats and their uses. It also explains what a color wheel is and different types of color combinations like complementary, analogous, and triadic colors. Finally, it covers best practices for formatting website content, including using white space, inverted pyramids, typographical emphasis, headings and subheadings to improve readability and direct attention.

1. MODULE 4 TEAM
PRESENTATION
By: Kaylyn Soukkala and Bridget Levenick

2. IMAGE FORMATS
GIF vs. JPEG vs. PNG

3. GIF
GIF stands for: Graphic
Interchange Format
GIFs are compressed using the
Lempel-Ziv-Welch (LZW) data
compression technique that
reduces the size of the file
without downgrading the
quality of the image.

4. JPEG
JPEG or JPG
A JPEG/JPG is an image that is
produced by digital
photography.
The JPEG format is commonly
used by digital cameras and
other photo capturing devices.
(Cell phones, etc.)

5. PNG
 PNG stands for: Portable Network
Graphics
 PNG is mainly used for transferring images
on the internet that aren’t professional
quality graphics.
 PNG files can allow you to make the
background transparent.
 A good example of a PNG is clip-art. Most of
us have used clip-art of some form before!
Well, then you’ve used a PNG file!!

6. COLOR WHEEL BASICS
The basics of the color wheel

7. COLOR WHEEL?WHAT IS IT?
 The color wheel is a diagram showing the
different hues of color and how they
interact with one another.
 The color wheel can be used to find
Complementary, Adjacent,Triadic, and
many other color combinations.
 Using the color wheel to your advantage
during website creation can help you to
create contrast, unity, and more!

8. TYPES OF COLOR COMBINATIONS
 Complementary Colors:
2 colors that are opposite each other on the
color wheel.
• Monochromatic Colors:
3 shades, tones, and tints of one base color.

9. TYPES OF COLOR COMBINATIONS
• Analogous Colors:
3 colors that are side by side on the
color wheel.
• Triadic Colors:
3 colors that are evenly spaced on the
color wheel.

10. TYPES OF COLOR COMBINATIONS
• Ter triadic Colors:
4 colors that are evenly spaced on
the color wheel.
Warm vs. Cool Colors

11. WEBSITE FORMATTING
AndWhy it Matters

12. WHITE SPACE AND BREAKING UPTEXT
 White space in a web page increases readability for the users
 Prevents site visitors from being scared away from your page or
missing important information
 Direct a viewer's attention by skillfully using white space
 Breaking up chunks of text also helps with ease of reading as well
as being a good way to add white space with purpose into your
site
 Smaller chunks of text help keep reader's attention and ensure
that important information isn't skimmed over
 Without proper formatting of text a web page can become
intimidating or deterring, rendering it incapable of performing its
intended purpose

13. INVERTED CONTENT PYRAMID
 Create easy flow of content and understanding by
employing the inverted pyramid method to your content
 Put the most important information at the top of the page,
don't bury the lede
 Follow up with supporting details; the less important
something is, the farther down the page it should be
 This puts the need to know information at easy access to
viewers
 This method will either increase the knowledge that
viewers are able to get from your site with a quick scan, or
encourage users to read more closely on something that
caught their interest

14. TYPOGRAPHICAL EMPHASIS
 Another way to assist web site users in easily finding the
important information is typographical emphasis
 Typographical emphasis includes things like bold, italics,
underlining, text color, font, and text size
 By using these tools you can direct a site visitor's eyes to
the most important and relevant information
 Typographical emphasis can also be used to help
distinguish different topics and subtopics
 Be sure not to overuse emphasis as it will lose its value
and meaning

15. HEADINGS AND SUBHEADINGS
 A great way to make sure site visitors know what they're
looking at, and know how to find what they're looking
for, is headings and subheadings
 Headings and subheadings are also great for formatting
because they give us a way to break up text blocks and
add white space
 Use typographical emphasis to differentiate between
headings/subheadings and text and also between
headings and subheadings
 Make subheadings accurate and relevant to the block of
text that they are representing—headings are like the
street signs of a web page's content

16. CONTENTTHAT WORKS
 Formatting helps direct a user's attention, but content is what grabs it
 To keep user's interested and coming back, ensure that your content is
relevant, accurate, and up to date
 Follow the 'SUCCESS' model introduced by Heath and Heath (2007) to
help create content that sticks with viewers
 S-simple
 U-unexpected
 C-concrete
 C-credible
 E-emotion
 S-story