Interactive Media Design

1
Interactive Media Design

• Proper and Effective Graphic and Web Design for
  the Web

2
First Principles of Graphic Design The
Carryover.

• In my opinion there really are 8 principles of
  graphic design you should know and use in both
  print and web design. (This is just a review.)

• Color
• Balance
• Size
• Shape

• Texture
• Unity
• Rhythm
• Emphasis

3
Second Print vs. Web

• 3000 dpi vs. 72 pixels per inch
• No worries of spot colors, trim and fold lines,
  press checks, etc.
• Its not easier just different
• Audience, locations/ systems (kiosks, phone,
  laptop, etc.), screens, resolution, download
  time, among other web considerations.

4
Basic rule of thumb pick 2 of the the 3

• Color
• Quality
• File Size

5
Color Is it 256 or 216

• The minimum number of colors that a system
  supports is 256 (also referred to as VGA).
  However, not all computer systems use the same
  set of 256 colors. In fact, Windows-based
  computers use a different system-set of colors
  than Mac-based computers (not surprising). The
  good news is that of these two mainstream
  systems, only 40 colors are different, which
  leaves 216 common colors. This means that if a
  designer were to use one of these 216 colors,
  referred to as web-safe colors, they would be
  assured that their artwork would display properly
  on just about any computer.

6
Now on to Quality

• There are two things that affect the appearance
  of web graphicsdithering, and anti-aliasing.
  Remember computers display different colors
  therefore higher-end graphics cards allow
  computers to display many millions of colors,
  whereas lower-end cards restrict the display to a
  far smaller number of colors. Therefore, the
  following question arises If you create
  multicolored artwork on a high-end machine (which
  most designers use), what happens when that
  graphic is displayed on a low-end machine that
  cant display all of those colors?

7
Dithering

• A process in which a computer simulates a color
  that it doesnt have by mixing colors that it
  does have. For example, if you have a set of
  paints, you might only have a few colors, but you
  can create more colors by mixing the paints.
  Although the dithering concept is nice in theory,
  the results are not always great. The problem is
  that a computer cant mix colors within a single
  pixel, and so the dithering process creates a
  pattern of different-colored pixels in an effort
  to appear as another color.

8
Anti-Aliasing

• Another issue that arises with screen-rendered
  graphics has to do with the low resolution that a
  monitor usesin most cases, 72 ppi. At such a low
  resolution, the eye actually sees pixels, and
  curved edges display with jagged edges (often
  referred to as jaggies). To make graphics look
  better onscreen, computers use a method called
  anti-aliasing to slightly blur the edges of
  boundaries between colors. The result is an image
  that looks smooth instead of jagged.

9
Now onto the 24 rules ofInteractive Media Design

• 1. Know you audience (most important rule!)
• 2. Users are scanners - most users only spend a
  few seconds before they decide to leave or stay
  (7 sec is avg.) Therefore make your point ASAP.
• 3. Less is more! (Use short sentences,
  paragraphs, chapters, pages, etc. / Dont have
  text overload.)
• 4. Use lots of S P A C E (white space is
  critical).
• 5. Use chunking, multiple pages, etc. to break up
  text heavy issues.

10
Interactive Media Design cont.

• 6. Limit or dont use scrolling.
• 7. Use a consistent navigation structure.
• 8. Careful of download time (Internet stats have
  shown visitors leave a website if it takes more
  than 7 seconds to load.)
• 9. Website visitors are your audience - let them
  speak and listen (have feedback forums,
  commenting, contact info. etc.
• 10. Design your website with your monitor set at
  800 x 600 (trend was 640 x 480 but thats old
  school) So if your screen is at 1024 x 768
  change it when web designing.

11
Interactive Media Design cont.

• 11. Test you site on different browsers (watch
  out for Lynx or AOL specific type browsers.)
  (See next slide for stats.)
• 12. Careful of plugins you may require.
• 13. Consider disabilities (hearing and or visual
  considerations).
• 14. Consider the accepted web standards - they
  are important to consider now that people are
  using handheld devices, now that the web is too
  vast to count, etc.
• 15. Use the W3C recommendations as the tool for
  guiding your web design.

12
(No Transcript)
13
Interactive Media Design cont.

• 16. Limit your color palette to 2 - 3 major
  colors (with shade variations.)
• 17. Consider colors and their natural
  associations / color for genders/ consider the
  audience again (certainly the culture) Remember
  colors set an identity what do you want your
  identity to be (if you want a changing one then
  build it in.) Color express your site/ companies
  mood and personality (values, goals, etc.) Ie.
  Look at gap.com their use of monochromatic
  colors let their clothes and models stand out.)
  ie. Winter Fresh gum blue
• Red is associated with blood, and with feelings
  that are energetic, exciting, passionate or
  erotic. Most colors carry both positive and
  negative implications. The downside of red evokes
  aggressive feelings, suggesting anger or
  violence.
• Orange is the color of flesh, or the friendly
  warmth of the hearth fire. The positive
  implications of this color suggest
  approachability, informality. The negative side
  might imply accessibility to the point of
  suggesting that anyone can approach-- a lack of
  discrimination or quality.
• Yellow is the color of sunshine. This color is
  optimistic, upbeat, modern. The energy of yellow
  can become overwhelming. Therefore yellow is not
  a color that tends to dominate fashion for long
  periods of time.
• Green In its positive mode, green suggests nature
  (plant life, forests), life, stability,
  restfulness, naturalness. On the other hand,
  green in some tones or certain contexts (such as
  green skin) might instead suggest decay (fungus,
  mold), toxicity, artificiality.
• Blue suggests coolness, distance, spirituality,
  or perhaps reserved elegance. Some shade of blue
  is flattering to almost anyone. In its negative
  mode, we can think of the "blues"-the implication
  being one of sadness, passivity, alienation, or
  depression.
• Violet is the color of fantasy, playfulness,
  impulsiveness, and dream states. In its negative
  mode, it can suggest nightmares, or madness.

14
Interactive Media Design cont.

• 18. Visitors are looking for a reason not to
  trust you (check for typos, grammar, spelling,
  screen errors, etc.)
• 19. Never leave your users stranded. (Ex. Error
  404/ Page not found this translates into go
  away, I wont help you.)
• 20. Make everything obvious (no jargon, label
  things, give directions, etc.)
• 21. Respect conventions (underline links, etc.)
• 22. The best websites load in about 10 sec. at
  28.8kp/s

15
Interactive Media Design cont.

• 23. On the Web (well at least on most websites),
  visitors look first for relevant text, not
  graphics. Make clear, strong text available right
  away. That will also keep them interested while
  graphics load. Use graphics only if they help
  prospects understand what they are looking for or
  if they convey information that can't be conveyed
  effectively through text. And keep graphics as
  simple as possible so they load quickly.

16
Interactive Media Design cont.

• 24. Use proper visual architecture - The Rule of
  Three.
• a. Why Some research results indicate that
  online, there is a 6 seconds (or less) pitch time
  to grab the attention of the audience! Because of
  this there is a downward trend towards reading
  all of the information available on a site (only
  your mom reads it all) and an upward trend toward
  rapid perception of symbols.
• b. What The Rule of Three is based on a
  triangular figure, but not just any triangular
  figure.

17
Interactive Media Design cont.

• Rule of Three cont.
• Check to see if the composition is dynamic or
  static.