Escolar Documentos
Profissional Documentos
Cultura Documentos
my
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
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
INTRODUCTION
Information Design: Content, Strategy
01
02
03
http://eLearning.utm.my
INTRODUCTION
INTRODUCTION
http://eLearning.utm.my
Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM
http://eLearning.utm.my
http://eLearning.utm.my
http://eLearning.utm.my
http://eLearning.utm.my
http://eLearning.utm.my
http://eLearning.utm.my
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.
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?
CONTRAST
How can you create contrast? There's lots of ways:
12
http://eLearning.utm.my
CONTRAST
CONTRAST
13
http://eLearning.utm.my
CONTRAST
CONTRAST
14
http://eLearning.utm.my
CONTRAST
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
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.
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
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
18
http://eLearning.utm.my
UNITY
UNITY
19
http://eLearning.utm.my
UNITY
UNITY
20
http://eLearning.utm.my
UNITY
REPETITION/CONSISTENCY
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.
21
http://eLearning.utm.my
REPETITION/CONSISTENCY
REPETITION/CONSISTENCY
and Page Layout Use the same margins throughout a document, and choose the same underlying grid.
22
http://eLearning.utm.my
REPETITION/CONSISTENCY
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.
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
REPETITION/CONSISTENCY
24
http://eLearning.utm.my
REPETITION/CONSISTENCY
REPETITION/CONSISTENCY
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..
jharun@utm.my
27