web design team presentation

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