Multimedia Content DesignBasics

Rajesh R. Nair

We Will…

Layout Design

Visual Design

Typography

File Formats- Image

- Audio

- Video

Best Practices - Layout Design

Alignment shouldn’t be focus

on outer edges

Incorrect

Incorrect

Lorem ipsum dolor sit aet, conse adipiscing elit. Lorem ipsum dolor sit aet, conse adipiscing elit. Lorem ipsum dolor sit aet, conse adipiscingelit. Lorem ipsum dolor sit aet, conse adipiscing elit. adipiscing elit.

Lorem ipsum dolor sitAet, conse adipiscing elit.Lorem ipsum dolor sit aet,conse adipiscing elit. Loremipsum dolor sit aet, conseadipiscing elit. Loremipsum dolor sit aet, conseadipiscing elit. adipiscingelit. ipsum dolor sit aet,conse adipiscing elit.adipiscing elit.

Lorem ipsumdolor sit aet, conseadipiscing elit. Lorem ipsum

Lorem ipsumDolor sit aet, conse

Correct

Lorem ipsum dolor sit aet, conse adipiscing elit. Lorem ipsum dolor sit aet, conse adipiscing elit. Lorem ipsum dolor sit aet, conse adipiscingelit. Lorem ipsum dolor sit aet, conse adipiscing elit. adipiscing elit.

Lorem ipsum dolor sitAet, conse adipiscing elit.Lorem ipsum dolor sit aet,conse adipiscing elit. Loremipsum dolor sit aet, conseadipiscing elit. Loremipsum dolor sit aet, conseadipiscing elit. adipiscingelit. ipsum dolor sit aet,conse adipiscing elit.adipiscing elit.

Lorem ipsumDolor sit aet, conse Lorem ipsum

dolor sit aet, conseadipiscing elit. Lorem ipsum

Layout

http://www.ted.com/

Limit yourself to

Three objects or groups

per slide

Correct

2

13

Layout

http://www.apple.com/

1

2

Layout

1

2

3

An Interface should have

One Focal Point

Design

Design is a

creative process

Ad hoc [unplanned]design is a

recipe for disaster.

Design is more about

eliminating ideas than coming up with them.

Design is

C R A P

CRAP

Four essential design elements

Contrast

Repetition

Alignment

Proximity

Contrast

Contrast

If two items aren't the same,

make them

very different

How to get Contrast..

Contrast can be achieved by Playing with

Images

Colors

Fonts

Contrast – Image + Typography

Contrast - Colors

Repetition

Repeat design elementsthroughout the entire piece

Alignment

Everything on a page should be

visually connected to something else on the page

Alignment - Grids

Alignment

Proximity

Definition

The concept of proximity says that

related items should be grouped together.

Example

Proximity

http://news.google.co.in/

Typography

Two Types

Proportional

Fonts- Times

- Arial

- Verdana

Fixed - Width Fonts

-Courier New

Two Styles

Serif

- Times

Suggestible for Print Media

Sans-Serif- Arial, Verdana

Suggestible for Web

A A

Best Practice

Avoid- ALL CAPS

- Underline

- Tabs to indent

- Blank line

Best- Bold

- Italic

- Indent Paragraph

Image Formats

Two Types

Raster Vector

.jpg .svg

.png [Transparent] .eps

.gif [Transparent] .fla

.swf

Audio

File Formats

.AU

.MID

.MP2, MP3

.RA

.SND

.WAV

Best

WAVE Developed by IBM and Microsoft.

Supported by Windows Os and all the most popular web browsers (except Google Chrome).

Extension - .wav

MP3 Format (MPEG)Developed for video by the Moving Pictures Experts Group. We can say that MP3 files are the sound part of the MPEG video format.

Supported by all OS and Browsers

Extension- .mp3, or .mpga (for MPG Audio).

Video

Video Formats

File Extension Good Bad

Real Video .rm or .ram Good for video streaming Quality is not very effective

Shockwave .flv or .swf Light, Fast

Quick Time .mov Need quick time on system

WMV .wmv Except Windows other browser need plugin to run

AVI .avi Heavy file size

MPEG .mpeg Great clearity

Thank You

http://artsrajesh.blogspot.com | http://artsmaths.blogspot.com | http://artseye.blogspot.com