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

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

http://eLearning.utm.my

INTRODUCTION
Information Design: Content, Strategy

01

02

Interaction Design: Navigation

03

Interface Design: Presentation

4 Faculty of Education, UTM

INTRODUCTION

5 Faculty of Education, UTM

INTRODUCTION

6 Faculty of Education, UTM

http://eLearning.utm.my

INTRODUCTION

7 Faculty of Education, UTM

INTRODUCTION

8 Faculty of Education, UTM

MPT 1203: TECHNOLOGY AND MEDIA DESIGN

USER INTERFACE DESIGN: AN OVERVIEW

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

http://eLearning.utm.my

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

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.

11 Faculty of Education, UTM

USER INTERFACE DESIGN

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

12 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

13 Faculty of Education, UTM

USER INTERFACE DESIGN

14 Faculty of Education, UTM

USER INTERFACE DESIGN

15 Faculty of Education, UTM

http://eLearning.utm.my

USER INTERFACE DESIGN

16 Faculty of Education, UTM

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

USER INTERFACE DESIGN

20 Faculty of Education, UTM

USER INTERFACE DESIGN

21 Faculty of Education, UTM

http://eLearning.utm.my

MPT 1203: TECHNOLOGY AND MEDIA DESIGN

BASIC MULTIMEDIA DESIGN PRINCIPLES

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

CRITICAL THINKING

Users may infer that the men are higher ranking or more important than the women.
23 Faculty of Education, UTM

CRITICAL THINKING

Basketball players might think this screen is fine but golfers???

24 Faculty of Education, UTM

http://eLearning.utm.my

CRITICAL THINKING

The buttons are clearly marked but their positions are the opposite of what users would expect.
25 Faculty of Education, UTM

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.

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

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?

28 Faculty of Education, UTM

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

Size Color Value Fonts Emphasis Shape Texture

29 Faculty of Education, UTM

CONTRAST

30 Faculty of Education, UTM

10

http://eLearning.utm.my

CONTRAST

31 Faculty of Education, UTM

CONTRAST

32 Faculty of Education, UTM

CONTRAST

33 Faculty of Education, UTM

11

http://eLearning.utm.my

CONTRAST

34 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

35 Faculty of Education, UTM

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

12

http://eLearning.utm.my

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

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.

38 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.

39

Faculty of Education, UTM

13

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

UNITY

41 Faculty of Education, UTM

UNITY

42 Faculty of Education, UTM

14

http://eLearning.utm.my

UNITY

43 Faculty of Education, UTM

UNITY

44 Faculty of Education, UTM

UNITY

45 Faculty of Education, UTM

15

http://eLearning.utm.my

UNITY

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

46 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.

47 Faculty of Education, UTM

REPETITION/CONSISTENCY

48 Faculty of Education, UTM

16

http://eLearning.utm.my

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.

49 Faculty of Education, UTM

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.

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

17

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!

52

Faculty of Education, UTM

REPETITION/CONSISTENCY

53 Faculty of Education, UTM

REPETITION/CONSISTENCY

54 Faculty of Education, UTM

18

http://eLearning.utm.my

REPETITION/CONSISTENCY

55 Faculty of Education, UTM

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.

56 Faculty of Education, UTM

BALANCE

Balance is when:
Everything

fits together into a recognizable whole, but at the same time there is enough variety to keep things interesting.

57 Faculty of Education, UTM

19

http://eLearning.utm.my

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

BALANCE
Symmetrical balance arranging the elements as horizontal or vertical mirrored images on both sides of a center line Asymmetrical balance arranging nonidentical 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

59 Faculty of Education, UTM

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 viewers eye off balance.

60 Faculty of Education, UTM

20

http://eLearning.utm.my

BALANCE

61 Faculty of Education, UTM

BALANCE

Symmetrical balance

62 Faculty of Education, UTM

BALANCE

Symmetry is exemplified on the website for Zagg. If you split the design down the center, youll see everything basically reflects perfectly, creating a nice horizontal balance.
63 Faculty of Education, UTM

21

http://eLearning.utm.my

BALANCE

Symmetrical Balance

64 Faculty of Education, UTM

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

BALANCE

Asymmetrical Balance

66 Faculty of Education, UTM

22

http://eLearning.utm.my

BALANCE

Asymmetrical Balance

67 Faculty of Education, UTM

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. Use one or two odd shapes and make the rest regular shapes.
68 Faculty of Education, UTM

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.

69 Faculty of Education, UTM

23

http://eLearning.utm.my

BALANCE
The Concept of Balance in Web Design

http://www.onextrapixel.com/2011/08/25/con cept-and-factors-of-balance-in-web-design/

70 Faculty of Education, UTM

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.

71 Faculty of Education, UTM

RHYTHM OR HARMONY

72 Faculty of Education, UTM

24

http://eLearning.utm.my

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.

73 Faculty of Education, UTM

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.

74 Faculty of Education, UTM

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 of a printed publication such as a newsletter.
75 Faculty of Education, UTM

25

http://eLearning.utm.my

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.

76 Faculty of Education, UTM

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

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

26

http://eLearning.utm.my

WHITE SPACE
White

space the space between visual elements is an integral part of the message. space tells you where one section ends and another begins. space is a design term that describes the unused areas on a book, magazine, multimedia application or web page.
79 Faculty of Education, UTM

White

White

WHITE SPACE

80 Faculty of Education, UTM

WHITE SPACE
White Space Tips
Don't

Trap White Space Although you want white space in your designs, you don't want to trap that white space between two design elements. interrupts 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.
81 Faculty of Education, UTM

This

27

http://eLearning.utm.my

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

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

jharun@utm.my

28