http://eLearning.utm.

my

MPT 1203: TECHNOLOGY AND MEDIA DESIGN

DESIGNING FOR MULTIMEDIA

Jamalludin Harun Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

CONTENTS

1 2 3

Introduction to Multimedia/Web Design User Interface Design: An Overview Basic Multimedia Design Principles

2 Faculty of Education, UTM

http://eLearning.utm.my

INTRODUCTION
Outputs of multimedia/web design: Produce a complete specification of all media elements and interactivity Products of multimedia/web design:
Content design Interaction design User interface design

Information Design>Interaction Design> Interface Design

3 Faculty of Education, UTM

INTRODUCTION
Information Design: Content, Strategy

01

02

Interaction Design: Navigation

03

Interface Design: Presentation

4 Faculty of Education, UTM

http://eLearning.utm.my

INTRODUCTION

5 Faculty of Education, UTM

INTRODUCTION

6 Faculty of Education, UTM

http://eLearning.utm.my

MPT 1203: TECHNOLOGY AND MEDIA DESIGN

USER INTERFACE DESIGN: AN OVERVIEW

Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

USER INTERFACE DESIGN

Interface Design = Presentation Design Multimedia user interface design is:
the process of ergonomically and strategically presenting media in order to communicate a message.

The message can be:

informational emotional Navigational
8 Faculty of Education, UTM

http://eLearning.utm.my

USER INTERFACE DESIGN

UI design is not just about the arrangement of media on a screen. Its designing an entire experience for people, hence a look and feel.

9 Faculty of Education, UTM

USER INTERFACE DESIGN

Multimedia user interface design guides: graphic design decisions structural design decisions
navigation interaction

10 Faculty of Education, UTM

http://eLearning.utm.my

USER INTERFACE DESIGN

User interface design involves:
arrangement and presentation of media building a mental model of how users think identifying navigational issues understanding users response and reaction

11 Faculty of Education, UTM

USER INTERFACE DESIGN

12 Faculty of Education, UTM

http://eLearning.utm.my

USER INTERFACE DESIGN

13 Faculty of Education, UTM

USER INTERFACE DESIGN

14 Faculty of Education, UTM

http://eLearning.utm.my

USER INTERFACE DESIGN

15 Faculty of Education, UTM

USER INTERFACE DESIGN

16 Faculty of Education, UTM

http://eLearning.utm.my

USER INTERFACE DESIGN

17 Faculty of Education, UTM

USER INTERFACE DESIGN

18 Faculty of Education, UTM

http://eLearning.utm.my

USER INTERFACE DESIGN

19 Faculty of Education, UTM

MPT 1203: TECHNOLOGY AND MEDIA DESIGN

BASIC MULTIMEDIA DESIGN PRINCIPLES

Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

10

http://eLearning.utm.my

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.

21 Faculty of Education, UTM

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
22 Faculty of Education, UTM

11

http://eLearning.utm.my

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?

23 Faculty of Education, UTM

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

Size Color Value Fonts Emphasis Shape Texture

24 Faculty of Education, UTM

12

http://eLearning.utm.my

CONTRAST

25 Faculty of Education, UTM

CONTRAST

26 Faculty of Education, UTM

13

http://eLearning.utm.my

CONTRAST

27 Faculty of Education, UTM

CONTRAST

28 Faculty of Education, UTM

14

http://eLearning.utm.my

CONTRAST

29 Faculty of Education, UTM

CONTRAST

4 Principles of Good Design for Websites http://www.myinkblog.com/4-principles-of-gooddesign-for-websites/ The Principle of Contrast in Web Design http://webdesignledger.com/tips/the-principle-ofcontrast-in-web-design

30 Faculty of Education, UTM

15

http://eLearning.utm.my

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 unitthe text, headline, photographs, graphic images, and captions all go together. How can you create unity in multimedia/web design?
31 Faculty of Education, UTM

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.
32 Faculty of Education, UTM

16

http://eLearning.utm.my

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.

33 Faculty of Education, UTM

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.

34

Faculty of Education, UTM

17

http://eLearning.utm.my

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.
35 Faculty of Education, UTM

UNITY

36 Faculty of Education, UTM

18

http://eLearning.utm.my

UNITY

37 Faculty of Education, UTM

UNITY

38 Faculty of Education, UTM

19

http://eLearning.utm.my

UNITY

39 Faculty of Education, UTM

UNITY

40 Faculty of Education, UTM

20

http://eLearning.utm.my

UNITY

Unity in Web Design http://webdesign.tutsplus.com/articles/unity-inweb-design--webdesign-3373

41 Faculty of Education, UTM

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.

42 Faculty of Education, UTM

21

http://eLearning.utm.my

REPETITION/CONSISTENCY

43 Faculty of Education, UTM

REPETITION/CONSISTENCY

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.

44 Faculty of Education, UTM

22

http://eLearning.utm.my

REPETITION/CONSISTENCY

So just how do you create consistency in your designs?

Typeface

Face it, if you're a designer, you've probably got a bazillion typeface or fonts. That doesn't mean that you have to use every font you own in every design. Two typefaces is enough for many jobs; one typeface can lend beauty to documents, too.

45 Faculty of Education, UTM

REPETITION/CONSISTENCY

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.
46 Faculty of Education, UTM

23

http://eLearning.utm.my

REPETITION/CONSISTENCY

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. Even in a process color design, there's no reason to use all sixteen million or so colors available to you. Try to keep your design palette limited to two or three colors, and don't forget to use them consistently!

47

Faculty of Education, UTM

REPETITION/CONSISTENCY

48 Faculty of Education, UTM

24

http://eLearning.utm.my

REPETITION/CONSISTENCY

49 Faculty of Education, UTM

REPETITION/CONSISTENCY

50 Faculty of Education, UTM

25

http://eLearning.utm.my

You already know what are principles of design BUT how can you create or use the principles in multimedia courseware or web design?
51 Faculty of Education, UTM

Choose any 2 principles of design and discuss in your blog. Give appropriate examples to support your discussion.
52 Faculty of Education, UTM

26

http://eLearning.utm.my

NEXT WEEK.

To be continued..

53 Faculty of Education, UTM

jharun@utm.my

27