Multimedia Design Principles - Chapter 1

8/19/2019 Multimedia Design Principles - Chapter 1

1/18

1 Introduction to Multimedia Design

OBJECTIVES

At the end of this chapter students will be able

to:

1. Describe what is multimedia design.

2. Identify a good multimedia design3. Describe design for all.

4. Recognize the examples of design for all.5. Evaluate the benefits of design for all.

6. Enumerate phases and processes in

multimedia design development.

q

Introduction

q

A good multimedia design

q

Design for all

q

Examples of design for all

q Benefits of design for all

q

Phase and processes in Multimedia design developmentq

Phase 1: Planning and needs analysisq

Phase 2: Multimedia design and presentation

q Phase 3: Multimedia development

q

Phase 4: Testing and evaluation


2/18

1

MU L T I ME D I A D E S I G N P R I N C I P L E S

2

1 1 INTRODUCTION

Multimedia Design is not a simple process. It needs creativity,

requires usability and functionality environment to ensure that

the project is user- friendly. Plenty of time and cost is needed to

be invested to develop a high-quality multimedia product.

1 2 A GOOD MULTIMEDIA DESIGN

A good multimedia design depends on:

· A design with clear and concrete goals.

· The delivery of a clear message.

·

Very attractive interfaces.· Knowledge of the effective design for the screen layout.

· To acquire a good knowledge of the techniques to createand to test a multimedia document.

1 3 DESIGN AND MULTIMEDIA

The combination of low-bandwidth considerations and primitive

interface options creates interesting design challenges for Web developers who wish to

incorporate multimedia elements into their sites.

Designers need to inform users when they are entering a high-bandwidth area and give them

the tools they need to control their experience once in the area.

Ø

Multimedia Design is a process to create a multimedia product by integrating multimedia elements such as

sound, graphic, text, video and animation.


3/18

1

C H A P T E R 1 I N T R O D U C T I O N T O M U L T I ME D I A D E S I G N

3

1 3 1 Inform your users

One aspect of the Web is that you don't always know where you're going or what you'll find

there. For some this uncertainty is exciting. For many, it is annoying, particularly when a

long wait is involved.

Most frustrating, perhaps, is when you finally receive the requested page only to find that is

not what you expected or that it contains materials in a format you are not set up to view.

· With content that is as technologically demanding as multi-media, it is especially

important to give users enough information to make an informed decision before they

click , so that they know what to expect and are prepared to receive your materials.

· High-demand content such as large multimedia files should not be part of your basic page design. These materials should appear on secondary pages that are described

and can be accessed from the main pages of your site.

· Make the menu page a plain HTML page that loads quickly and does not require

special software. Include descriptive information about the materials along with

previews such as still shots from the video.· Include the run time for time-based media, and include the file size for materials that

download. In addition, fully explain any special software requirements for accessing

the materials and provide a download link.

· Users should have a clear idea of what your materials are before they begin to

download.

· With a menu interface, users can confirm that their systems are properly configuredand that they have enough bandwidth, time, and patience to load the materials.


4/18

1


4

1 3 2 Provide controls

Be sure to give users status information and controls when you are presenting multimedia

materials.

The QuickTime controller bar is an extremely effective interface element that provides both

controls and status information. It allows users both to adjust the volume control and to play,

stop, and scrub through a movie, and it provides information about the movie's download

status.

If you don't include controls, users will hit your page with no way to control their viewing

environment. For example, if a visitor is looking at your page at a public workstation and you

have looping bird calls as a background sound without any control options, the visitor will

experience an unsettling (and potentially embarrassing) moment when he or she cannot

control interaction with your site. Many users in this situation will simply close the browser

window to make the sound stop, which means that they never get to see the page content.

When designing a media interface, let interaction with your media be entirely user-driven.

Always include user controls, such as a media controller bar, and make sure that users have away to turn it off. Avoid prescribed playback options like auto play or looping that takecontrol from the user. With auto play, for example, media files begin playing when a Web

page is loaded. If the page has other elements, such as descriptive text, the user who wants just the text will find the video distracting. Design your media interface so that files play only

when the user explicitly elects to initiate playback.

Various multimedia products


5/18

1


5

1 4 DESIGN FOR ALL

Design for all is the process of creating multimedia products, services and systems which are

usable by people with the widest possible range of abilities, operating within the widest possible range of situations.

Design for all is the designing of products, services and systems so that they are:

· Flexible enough to be directly used, without assistive devices or modifications.

· Compatible with the assistive technology products that might be used by those who

cannot efficiently access and use the products directly.

An Example of a good design

Example of good design


6/18

1


6

1 5 EXAMPLES OF DESIGN FOR ALL

Kerb cuts:

They were introduced for people in wheelchairs. However, they are used much more often by people with bicycles, baby carriages, wheeled luggage or delivery carts that are used by

people in wheelchairs.

Example of kerb cuts usage

Baby Stroller

Travelling

bag

bicycle


7/18

1


7

Volume amplification control in telephones:

Telephones with amplified volume controls are useful

not only for individuals with hearing problems, but also

for anyone using a telephone in a noisy environment,for example airports, hotels or offices.

Speech Recognition :

This enables people who are unable to use a keyboard with an alternative input facility.Example: people who have both hands occupied by repairing something, people with

tetraplegia and car drivers.

Captioning of native language in TV-programs:

This was introduced for people who are hearing

impaired or deaf, but also used by people with another

mother tongue, by children learning to read and by

adults developing their literacy skills. It is also used by

people who want to continue watching the TV program

while answering the phone (some TV sets turn the

captions on automatically when the sound is muted.)

Captioning of native language

in TV programs

Volume Amplifier Headset Kit

Telephone Amplifier

Portable Telephone Amplifier


8/18

1


8

Adaptation of keyboard features:Macintosh and Windows 95 have both, a standard, a set of

customization functions such as adjustable repeat rate,serial execution of multiple keystrokes, adjustable key

activation delay etc. These features facilitate people with

less dexterity to use the keyboard. For Windows, thesefunctions were previously provided as a separate software

package.

Other examples:Interfaces which are usable by individuals without fine

pointing control, can also be used by individuals wearingwinter gloves. Portable communication or information

systems that can be operated by people who are blind are

also suitable for people driving a car.

Other examples


9/18

1


9

Microsoft distributes keyboard layouts (called Dvorak layouts) to help make themost frequently typed characters on a keyboard more accessible to people who

have difficulty using the standard keyboard layout (called the "QWERTY"

layout). Dvorak layouts reduce the amount of motion required to type common

English text. This may help avoid some types of repetitive strain injuries

associated with typing. Studies have also shown an increase in typing speed and

accuracy when using the Dvorak layout for two hands.

Keyboard layout fortwo-handed normal

users

Keyboard layout

for people who

type with only

their right-hand

Keyboard layout

for two- handed

users

Keyboard layout for

people who typewith only their left-

hand


10/18

1


10

1 6 BENEFITS OF DESIGN FOR ALL

For AllAlmost without exception, features or flexibility added

to a product to accommodate individuals withtemporary or permanent handicap have proven to be

beneficial to users in general. In many cases, more people without disability will find features useful than

the number of people in the original target audience.

For Disabled PeopleAs products, services and environments are designed to

accommodate the greatest range of users, there will be

less need to make adaptations for people who function

differently because of physical, sensory, or cognitive

ability, age or size. The elimination of special,duplicative, and more costly elements to accommodatethe needs of people with disabilities. For example,

incorporating access features into voice-mail services

could eliminate the need for deaf persons to purchase

expensive text telephone answering machines

For Elderly PeopleThe elimination of needs to make future modifications

to accommodate the changing requirements of people asthey age. For example, we know that hearing and vision

impairments are common to the aging process.Incorporation of universal design features, such as

larger buttons with high colour contrast on public and

private telephones will enable older people to maintain

their independence and avoid institutionalization.

Multimedia design for all.

The ATM machine

interfaces that can be

used by disable people.

A telephone with largerbutton is suitable for

ageing people.


11/18

1


11

For IndustryIncreasing ease of use and convenience for the broadest

possible range of individuals will expand the potential pool of users, multiply marketability and reduce

expenditures for assistive technology. Incorporating

disability standards at the design stage is cheap –amending products and standards or making specialist

provision is expensive, time consuming and ultimately

discriminatory.

For Public SectorPublic financing of special assistance and adaptations

currently required to meet the needs of individuals withdisabilities will be reduced.

1 7 Principles of design

i. Balance

· Balance is an equal distribution of weight. When a design is balanced, it seems to

hold together, look unified, and feel harmonious.

· When a design is imbalanced, it can make us fell uncomfortable. Understanding

balance involves the study of several interrelated visual factors;

·

Weight· Position

· Arrangement

· When there is a mark on a page, that mark has a visual weight – it can appear to be light or heavy. Visual weight can be defined as creating the illusion of physical

weight on the two-dimensional surface.

· The size, value, color, shape, and texture of a mark all contribute to its visualweight.

· Where you position the mark on the page also affects its visual weight. The same

mark positioned at different points on a page – bottom right, bottom left, centre,

top-right, or top-left – will appear to change in visual weight because of its

position.

Multimedia product design

for public and industry sector

The Principles are concepts used to organize or arrange the

structural elements of design. There are many basic concepts

that underlie the field of design. They are often categorized

differently depending on philosophy or teachingmethodology.


12/18

1


12

· In visual perception, different areas of the page seem to carry more or less visualweight.

Balance usually comes in two forms : symmetrical and asymmetrical.

ii.

Symmetric vs. Asymmetric Balance· Symmetry – you can arrange all identical or similar visual elements so that they

are evenly distributed on either side of an imaginary vertical axis; like a mirror

image.

· The design of *********** in Figure is symmetrical. Imagine a vertical axisdividing the poster in half; you can see an equal distribution of weight on either

side of it.

· Symmetrical balance occurs when the weight of a composition is evenly

distributed around a central vertical or horizontal axis. Under normal

circumstances it assumes identical forms on both sides of the axis.

·

When symmetry occurs with similar, but not identical, forms it is calledapproximate symmetry. In addition, it is possible to build a composition equally

around a central point resulting in radial symmetry1. Symmetrical balance is also

known as formal balance.

iii. Asymmetrical

· When you arrange dissimilar or unequal elements of equal weight on the page; itis called asymmetry (Figure *********). To achieve asymmetrical balance, the

position, visual weight, size, value, colour, shape, and texture of a mark on the

page must be considered and weighted against every mark.

· It is almost impossible to list all the way to achieve asymmetrical balance because

every element and its position contribute to the overall balancing effect in a design

solution.

Example of balance


13/18

1


13

iv. Emphasis

· How does the viewer glean information from a design? How does a design facilities

communication of information? The viewer – as receiver – depends upon the designer

to direct his attention.

· This bring the importance of emphasis in design. Emphasis is the arrangement of

visual elements, giving stress or importance to some visual elements, thereby

allowing two actions: information to be easily gleaned and the graphic design to beeasily received.

· When you look at a well-designed poster, what do you look at first? You probably

look at what the designer determined to be paramount. We call this point of emphasis

the focal point – the part of a design that is most accentuated.

· The position, size, shape, direction, hue, value, saturation, or texture of a component

can make it a focal point. The focal point in figure is the ****. We are then led to all

the other elements in the design because they have been arranged according to

emphasis.


14/18

1


14

v. Rhythm

· In music, most people think of rhythm as the ‘beat’ – a sense of movement from one

chord to another, a flow, accent patterns, or stress.

· In design, Rhythm is a pattern that is created by repeating or varying elements, with

consideration given to the space between them, and by establishing a sense ofmovement from one element to another.

· Repetition occurs when you repeat visual elements with some or total consistency, ason the ****** design.

· Variation can be established by changing any number of elements, such as the color,size, shape, shaping, position, and visual weight of the elements in a design.

vi.

Unity

·

When you flip through a magazine or browse a website, do you ever wonder how thegraphic designer was able to get all the type, photographs, illustrations, and graphic

elements to work together as a unit?

· There are many ways to achieve what we call unity, where the elements in a design

look as though belong together.

· A designer must know how to organize visual elements and establish bond among

them.

vii.

Correspondence

·

When a repeat an element like colour, direction, value, shape, or texture, or establish avisual connection or correspondence among the elements.

· To establish correspondence in the folder / poster, the designer used several related,type, line, and a grid.

· Continuity is related to correspondence. IT is the handling of design elements – likeline, shape, texture, and colour – to create similarities of form. In other words,

continuity is used to create family resemblance.

· For example, if you were designing stationary, you would want to handle the type,

shapes, colour, and any graphic elements on the letterhead, envelope, and business

card in a similar way to establish a family resemblance among the three pieces.

viii. Grid

· A grid is a guide – a modular compositional structure made up of verticals and

horizontals that divide a format into columns and margins.

· A grid gives a design a unified look.


15/18

1


15

ix. Alignment

· Visual connections can be made between and among elements, shapes, and objects

when their edges or axes line up (area in alignment) with one another.

·

The eye easily picks up these relation-ships and makes connections among the forms.

x.

Flow

· Elements should be arranged

so that the audience is led

from one element to another

through the design.

·

Flow is also calledmovement and is connectedto the principle of rhythm.

Rhythm, in part, is about a

sense of movement from one

element to another.

· In ***, the arrangement oftype and visuals move your

eyes from one elements to

another, across the elongated

horizontal format and backagain.


16/18

1


16

1 8 PHASE AND PROCESSES IN MULTIMEDIA DESIGN

DEVELOPMENT

Phase and Processes In Multimedia Design Development

1 8 1 Phase 1: Planning and needs analysis

In this phase, it is important to analyze product requirement to ensure the multimedia

development plan more systematic and deliberate. It is important to ensure that the designer

clearly understands the rules and main features of any project planned.

Have three main steps:

Phase 1: Planning and Needs Analysis

Phase 4

TESTING AND EVALUATION

Phase 2

DESIGN

Phase 3

MULTIMEDIA DEVELOPMENT

Phase 1

PLANNING AND NEEDS ANALYSIS

1. Product Concept Development

Most of the multimedia project development comes from ideas.

2. State the ObjectivesAfter developing the concept, specify the goals and objectives of the

project.

3. Identify Target UserThe more information acquired about the user ability, which will develop

multimedia project so more accurate and suitable, the project that develop

to fulfil targeted user satisfaction.


17/18

1


17

1 8 2 Phase 2: Multimedia design and presentation

There are several steps or tasks to perform. Some of them are identifying the development

ways and identifying the specification.

Phase 2: Multimedia Design and Presentation

1 8 3 Phase 3: Multimedia development

In multimedia presentation development process, the work processes change from planning

and designing to multimedia development process. It has two main steps :

Phase 3: Multimedia Development

IDENTIFYING THE DEVELOPMENT WAYS

· Pattern

· Approach

· Metaphor

· Importance

IDENTIFYING THE SPECIFICATION

· Elements that will be used

· Functionality

· User Interface

·

Storyboard and exploration

(navigation)

1. STEP TO DEVELOP THE CONTENT

· Multimedia presentation specifications cover any script that

will be used to show the content of the multimedia

presentation.

2. STEP TO AUTHOR OR PROGRAMMED THE PROJECT

TITLE.· If in planning phase, especially the successful completion of

the specification and storyboarding process will guide to the

easier, faster and systematic process of authoring or

programming.

· The storyboard will give a clear guideline to the multimedia

programmer about what is going to be developed.


18/18

1


18

1 8 4 Phase 4: Testing and evaluation

This phase refers to a process of testing and evaluating the multimedia presentation to make

sure it is fill the planed specifications. The tested and evaluated multimedia presentation is

hopefully presenting more quality and also fills the real user’s needs.

Phase 4: Testing and Evaluation

Testing Process

· Although the testing processes placed at the last multimedia development

process, the real testing should be continually develop from the early stage of

development.

· Testing can be done at the early stage of concept development. One group of

target audience can be used to test the planned prototype

Evaluation Process

· Evaluation is also a continuous process although it is stated last in the

development process.

· The developer has to review the prototype with the target user, before it is

fully developed. The evaluation is based on the design and the function on

how the user can interact with the multimedia software.

Documents

Multimedia Design Principles - Chapter 1