04 MMDesign Part 02 PDF

http://eLearning.utm.
my
MPPP 1213 : TECHNOLOGY AND MEDIA DESIGN
DESIGNING FOR MULTIMEDIA
Department of Science & Mathematics Education, and Creative Multimedia

School of Education, Faculty of Social Sciences and Humanities, UTM
CONTENTS
1 Introduction to Multimedia/Web Design
2 User Interface Design: An Overview
3 Basic Multimedia Design Principles
Faculty of Education, UTM
1
http://eLearning.utm.my
MPT 1213: TECHNOLOGY AND MEDIA DESIGN
BASIC DESIGN PRINCIPLES

INTRODUCTION
What do you think about these screens ????
2
CRITICAL THINKING
 Users may infer that the men are higher ranking

or more important than the women.
5
CRITICAL THINKING
 Basketball players might think this screen is fine

but golfers…???
6
3
CRITICAL THINKING
 The buttons are clearly marked but their positions

are the opposite of what users would expect.
7
CRITICAL THINKING
4
CRITICAL THINKING
1 2 3
What Makes a Turn to a Do you have
Good partner and anything to
Multimedia share your share with the
Interface/ knowledge. class?
Presentation
Design ?
10
5
OVERVIEW
 The principles of design

are applicable to all
design disciplines
including - but not
exclusive to -
architecture, art,
graphics, multimedia
application, web
design, fashion,
industrial design and
writing.
11
12
6
OVERVIEW
 Each principle applies to each element and to the
composition as a whole.
 The principles are :

 Contrast
 Unity
 Repetition/Consistency
 Balance
 Rhythm or Harmony
 Emphasis
 White Space
13
1 2 3
In group of 3, Find friends Share your
read the that read findings with
article given same article members of
to you. with you and your own
discuss it. group
(10 minutes)
(20 minutes) (20 minutes)
14
7
CONTRAST
 Contrast creates interest in the printed or online

presentation by providing variety in the design.
 Provide contrast within each element i.e. light,

dark; soft, hard; warm, cool, etc.
 How can you create contrast in multimedia

design?
15
CONTRAST
How can you create contrast? There's lots of ways:
 Size
 Color
 Value
 Fonts
 Emphasis
 Shape
 Texture
16
8
CONTRAST
17
CONTRAST
18
9
CONTRAST
19
CONTRAST
20
10
CONTRAST
21
CONTRAST
22
11
CONTRAST
23
CONTRAST
 4 Principles of Good Design for Websites

 http://www.myinkblog.com/4-principles-of-good-
design-for-websites/
 The Principle of Contrast in Web Design

 http://webdesignledger.com/tips/the-principle-of-
contrast-in-web-design
24
12
UNITY
 Unity is the underlying principle that summarizes all

of the principles and elements of design.
 It refers to the coherence of the whole, the sense
that all of the parts are working together to achieve
a common result; a harmony of all the parts.
 Readers need visual cues to let them know the
piece is one unit—the text, headline, photographs,
graphic images, and captions all go together.
 How can you create unity in multimedia/web

design?
25
UNITY
How to create unity :
 Use only one or two typestyles and vary size or

weight for contrast throughout the publication,
presentation, or web site.
 Be consistent with the type font, sizes, and
styles for headings, subheads, captions,
headers, footers, etc. throughout the
publication, presentation, application or web
site.
 Use the same color palette throughout.
26
13
UNITY
How to create unity :
 Repeat a color, shape, or texture in different

areas throughout.
 Choose visuals that share a similar color,
theme, or shape.
 Line up photographs and text with the same
grid lines.
27
UNITY
These four images have nothing in common stylistically.

The problem in combining them into single screen is that
they are worlds apart in colors, rendering styles,
background and more. 28
14
UNITY
In this example, the greatest

obstacles to stylistic unity were
the backgrounds and colors of
the original images.
This screen shows how the

images are integrated and
made to work together by:
Removing their background.

Altering their tones to fit within a
particular colour family.
29
UNITY
30
15
UNITY
31
UNITY
32
16
UNITY
33
UNITY
34
17
UNITY
 Unity in Web Design

 http://webdesign.tutsplus.com/articles/unity-in-
web-design--webdesign-3373
35
REPETITION/CONSISTENCY
 Roger C. Parker in "Ten Rules of

Good Design, Part II" writes:
Design creates unity by

using white space, type
and colors in a consistent
way throughout every
document your firm
produces, and within
every page of a single
document, presentation
or web site.
36
18
37
 So just how do you create
consistency in your designs?
 Margins and Page Layout

Use the same margins throughout
a document, and choose the
same underlying grid.
38
19
 So just how do you create
consistency in your designs?
 Typeface
Two typefaces is enough for
many jobs; one typeface can
lend beauty to documents, too.
39
 So just how do you create consistency in your
designs?
 Navigation
When (if) you travel in Europe, do you find yourself
confused because the language and signs
change from country to country?
 Visitors to your Website or multimedia application
might become confused if navigation graphics
are on the left on one page, on the right on
another, and at the bottom on another.
40
20
 So just how do you create consistency in your
designs?
 Color
 Your viewers/readers will feel more comfortable
with your Websites and printed designs if there's a
recognizable color scheme.
 Try to keep your design palette limited to two or

three colors, and don't forget to use them
consistently!
41
42
21
43
44
22
BALANCE
 Once your page is balanced, you will no longer

notice the elements as being individual.
 Your whole page will become one piece and the

viewers eyes will flow from one element to the
next seamlessly.
45
BALANCE
 Balance is when:
 Everything fits together

into a recognizable
whole, but at the same
time there is enough
variety to keep things
interesting.
46
23
BALANCE
 Balance is when:
 Balance is an equal
distribution of weight. In
terms of graphics, this
applies to visual weight.
Each element on a
layout has visual weight
that is determined by its
size, darkness or
lightness, and thickness
of lines.
47
BALANCE
 Symmetrical balance – arranging the elements

as horizontal or vertical mirrored images on
both sides of a center line
 Asymmetrical balance – arranging non-

identical elements on both sides of a center line
 No balance – elements arranged on the screen

without regard to the weight on both sides of the
center line
48
24
BALANCE
 Symmetry is best used: For layout or any other

time you need to keep content roughly the
same size and spanned across the entire
website, courseware or print design.
 Asymmetry is best used: To draw attention to a

certain area by throwing a viewer’s eye off
balance.
49
BALANCE
50
25
BALANCE
Symmetrical balance
51
BALANCE
Symmetry is exemplified on the website for Zagg. If you split

the design down the center, you’ll see everything basically
reflects perfectly, creating a nice horizontal balance.
52
26
BALANCE
Symmetrical Balance
53
BALANCE
Asymmetrical layout that balance is achieved in the

navigational column through the use of border. This tactic is
used a lot in asymmetrical layouts to create contrast from
the main text, which is dominant
54
27
BALANCE
Asymmetrical Balance 55
BALANCE
Asymmetrical Balance 56
28
BALANCE
To create balance:
 Repeat a specific shape at regular intervals,

either horizontally or vertically.
 Center elements on a page.
 Put several small visuals in one area to
balance a single large image or block of
text.
57
BALANCE
To create balance:
 Lighten a text-heavy piece with a bright,

colorful visual.
 Leave plenty of white space around large
blocks of text or dark photographs.
 Offset a large, dark photograph or illustration
with several small pieces of text, each
surrounded by a lot of white space.
58
29
BALANCE
The Concept of Balance in Web Design
• http://www.onextrapixel.com/2011/08/25/con
cept-and-factors-of-balance-in-web-design/
59
RHYTHM OR HARMONY
 Rhythm is a pattern created by repeating elements
that are varied.
 Repetition (repeating similar elements in a consistent

manner) and variation (a change in the form, size, or
position of the elements) are the keys to visual rhythm.
60
30
RHYTHM OR HARMONY
61
RHYTHM OR HARMONY
 Placing elements in a layout at regular intervals

creates a smooth, even rhythm and a calm,
relaxing mood.
 Sudden changes in the size and spacing of

elements creates a fast, lively rhythm and an
exciting mood.
62
31
RHYTHM OR HARMONY
63
RHYTHM OR HARMONY
To create rhythm:
 Repeat a series of similarly shaped elements,

with even white spaces between each, to
create a regular rhythm.
 Repeat a series of progressively larger elements
with larger white spaces between each for a
progressive rhythm.
 Alternate dark, bold type and light, thin type.
64
32
RHYTHM OR HARMONY
 To create rhythm:
 Alternate dark pages (with lots of type or dark

graphics) with light pages (with less type and
light-colored graphics).
 Repeat a similar shape in various areas of a
layout.
 Repeat the same element in the same position
on every page/screen.
65
EMPHASIS
 Emphasis is what stands out

or gets noticed first. Every
layout needs a focal point
to draw the readers eye to
the important part of the
layout. Too many focal
points defeat the purpose.
 Generally, a focal point is
created when one element
is different from the rest.
66
33
EMPHASIS
To create emphasis :
 Use a series of evenly spaced, square

photographs next to an outlined photograph
with an unusual shape.
 Put an important piece of text on a curve or
an angle while keeping all of the other type
in straight columns.
 Use bold, black type for headings and
subheads and much lighter text for all other
text.
67
EMPHASIS
To create emphasis :
 Place a large picture next to a small bit of

text.
 Reverse (use white type) a headline out of a
black or colored box.
 Use colored type or an unusual font for the
most important information.
 Put lists you want to highlight in a sidebar in a
shaded box.
68
34
EMPHASIS
69
WHITE SPACE
 White
space — the space between visual
elements — is an integral part of the message.
 White
space tells you where one section ends
and another begins.
 Whitespace is a design term that describes the

unused areas on a book, magazine, multimedia
application or web page.
70
35
WHITE SPACE
71
WHITE SPACE
72
36
WHITE SPACE
White Space Tips
 Don'tTrap White Space

Although you want white space in your
designs, you don't want to trap that white
space between two design elements.
 Thisinterrupts the flow of the design. You

might increase the size of a font, the size of
the graphic, or reposition elements to avoid
trapped white space.
73
WHITE SPACE
White Space Tips
 Keep Text Cells Small

We've all come across Web sites that have
text stretching across the entire length of the
browser.
 While that might be readable on a fourteen
inch monitor, it's very difficult to read on a
larger monitor whose browser window is
maximized.
74
37
WHITE SPACE
White Space Tips
 Avoid Rivers
Rivers may appear if you set your type
justified. A river is word spaces that appear
near each other on subsequent lines of text.
It is better to edit the text than to change the
word spacing on a line by line basis to correct
rivers.
Rivers may also be a symptom that your line
length is too long or too short.
75
You already know what are principles of design

BUT how can you create or use the principles in
multimedia courseware or web design?
DISCUSSION TIME…!!!
76
38
Choose any 2 principles of design and

discuss in eLearning. Give appropriate
examples to support your discussion
77
Jamalludin Harun (p-jamal@utm.my)

39

04 MMDesign Part 02 PDF

Uploaded by

Copyright:

Available Formats

You might also like

04 MMDesign Part 02 PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

04 MMDesign Part 02 PDF

Uploaded by

Copyright:

Available Formats

http://eLearning.utm.

MPPP 1213 : TECHNOLOGY AND MEDIA DESIGN

DESIGNING FOR MULTIMEDIA

Department of Science & Mathematics Education, and Creative Multimedia

1 Introduction to Multimedia/Web Design

2 User Interface Design: An Overview

3 Basic Multimedia Design Principles

Faculty of Education, UTM

MPT 1213: TECHNOLOGY AND MEDIA DESIGN

BASIC DESIGN PRINCIPLES

Department of Science & Mathematics Education, and Creative Multimedia

What do you think about these screens ????

Faculty of Education, UTM

 Users may infer that the men are higher ranking

Faculty of Education, UTM

 Basketball players might think this screen is fine

Faculty of Education, UTM

 The buttons are clearly marked but their positions

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

 The principles of design

Faculty of Education, UTM

Faculty of Education, UTM

 The principles are :

Faculty of Education, UTM

Faculty of Education, UTM

 Contrast creates interest in the printed or online

 Provide contrast within each element i.e. light,

 How can you create contrast in multimedia

Faculty of Education, UTM

How can you create contrast? There's lots of ways:

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

Faculty of Education, UTM

 4 Principles of Good Design for Websites

 The Principle of Contrast in Web Design

Faculty of Education, UTM

 Unity is the underlying principle that summarizes all

 How can you create unity in multimedia/web

Faculty of Education, UTM

How to create unity :

 Use only one or two typestyles and vary size or

Faculty of Education, UTM

How to create unity :

 Repeat a color, shape, or texture in different

Faculty of Education, UTM

These four images have nothing in common stylistically.

Faculty of Education, UTM

In this example, the greatest

This screen shows how the