Interactive Media Design

Proper and Effective Graphic and Web Design for the Web

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

Second: Print vs. Web

•3000 dpi vs. 72 pixels per inch

•No worries of spot colors, trim and fold lines, press checks, etc.

•It’s not easier just different

•Audience, locations/ systems (kiosks, phone, laptop, etc.), screens, resolution, download time, among other web considerations.

Basic rule of thumb: pick 2 of the the 3

•Color

•Quality

•File Size

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.

Now on to: Quality

• There are two things that affect the appearance of web graphics—dithering, 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 can’t display all of those colors?”

• A process in which a computer simulates a color that it doesn’t 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 can’t 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.

Dithering

Anti-Aliasing• Another issue that arises with screen-rendered graphics has to do with the low resolution that a monitor uses—in 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.

Now onto the 24 rules of:

Interactive 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. / Don’t 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.

Interactive Media Design cont.

• 6. Limit or don’t 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 that’s old school) So if your screen is at 1024 x 768 – change it when web designing.

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.

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.

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 won’t 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

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.

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.

Interactive Media Design cont.

•Rule of Three cont.:

•Check to see if the composition is dynamic or static.