Multimedia Fundamentals

Print media primarily uses static imagery and words as the form of communication, whereas multimedia focuses on a variety of techniques, including sound, graphics, and movement. As such, in a multimedia presentation, keeping text minimal engages users more effectively. Less than half the screen should contain text, at least from a design perspective.

Further guides about using text

A guide for font sizes is to use about 10 to 12 point for body text. Superior headings should be double their inferiors. To maintain semantics, all headings should be larger than body text.

Font faces can fit into 3 broad categories:
sans serif versus serif

  • serif, eg. Times New Roman, Courier, Garamond
  • sans serif, eg. Arial, Helvetica, Verdana
  • and decorative, eg. kids fonts, funky fonts, classic fonts

Sans serif fonts tends to encourage the eyes to meander all over the block of text, and have been used for headings. Traditionally, serif fonts have been used for large bodies of text because the serifs form a line that draws the eye onto the next word. However, given that we are rarely going to present a large body of text in a multimedia presentation, the freedom of font choice is upon the designer. It is far preferable to present a large portion of text as small, readable chunks.

ilovetypography.comFor any given presentation, avoid using more than 3 different font faces. Also avoid use of italics on screen, as it can be very difficult for users to clearly and quickly read the text due to the fact that italics break across the pixel grid. Use some alternative methods to highlight sections and draw emphasis. Check out ilovetypography.com for not-so-bland articles on typography that’s all around you. Visit welovetypography.com and myfonts.com if you too have a thing for examples of sexy fonts, or typefaces…

In colour terms

light or complementary colour text, dark backgroundsComplementary colours, those directly opposite on a colour wheel, are a good choice for use as accent colour in your colour scheme. Interestingly, the shadow of an object will also contain the complementary colour. For example, the shadow of a green apple will contain some red. Either light or complementary colours are particularly useful for text when using dark backgrounds.

All good designs certainly take accessibility into consideration. So try this Accessibility Color Wheel (wheel.zip) to assist choosing background and foreground colour pairs with a suitable WCAG contrast ratio. Giacomo Mazzocato designed this fantastic tool, which also simulates 3 kinds of vision deficiencies.

colours samplePresentations also use colour to convey mood. You must research your target audience to colour your presentation accordingly, be that bright, primary, pastel, muted, earth tones or otherwise. More about colour theory at Color Matters if you’re interested. Also, a photo based palette generator (check this sample) courtesy of bighugelabs.com, and everything for colour lovers at colourlovers.com

light, style, texture

Graphic styling

In addition to colour, several other graphic factors contribute to successful multimedia communication.

  • Style – modern, art deco, postmodern, industrial, cartoon, anime, etcetera. Try to identify with the primary user group and carry the style throughout the presentation.
  • Texture – wood, puff paint, metal, marble, sand, plastic, etcetera. Texture helps to set the tone, such as business-like, laid-back, formal, friendly, or casual.
  • Line – generates feelings of chaos or control.
  • Lighting – assists setting the tone and mood of the presentation. Low-key (deep shadows) or high-key light (bright and evenly lit) can set mysterious or light-hearted moods.

Next: The basic design principles of Balance, Unity and Movement.

About Vernon

An outdoorsy type, I enjoy many things in life, movies, food, music, beer, travel, coffee, a few books, great people and excellent friends.
This entry was posted in Art, Photo and Video, Technology and tagged , , , , . Bookmark the permalink.

7 Responses to Multimedia Fundamentals

  1. Pingback: Scope and Purpose: vfowler blog

  2. Pingback: Promotion: vfowler blog

  3. http://www.fontembedding.com/fonts-and-the-web/

    A resource for designers, developers and typeface creators on font usage, technology and licensing issues.

    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    Common fonts to all versions of Windows & Mac equivalents
  4. http://www.sitepoint.com/blogs/2009/06/26/use-whatever-font-you-please-on-wordpress/
    Earlier in the year, Alex wrote an article about Cufon, a method of text replacement which uses JavaScript to replace HTML text with canvas elements that render the text in vector format.

  5. http://new.myfonts.com/

    Find, try, buy and download fonts from the world’s largest collection of fonts online.
  6. Em units versus ex units
    This article addresses the use of relative “em” and “ex” units in CSS, which can potentially cause rendering problems due to pixel rounding errors. Read about em and ex values in the CSS2 specification.
    http://kb.mozillazine.org/Em_units_versus_ex_units

  7. Yet another font resource. http://typekit.com/libraries
    Typekit claims to be “The easiest way to use Real Fonts on your website”.
    Sign up for the free Trial Library or pay for more…

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>