Group 5 - Tan Kian Siong I09004037

Table of Contents
1.0 Introduction 

2.0 Storyboard

3.0 Information Appearance

   3.1 C.R.A.P

4.0 Typography

5.0 Animation and Audio

6.0 Conclusion

References

1.0 Introduction

With today technologies, Multimedia is gaining more popularity and attractive compare to past few years. It is because with the rich combination of audio, video, image, text and animation, a multimedia application allows users to understand more easily and rapidly instead of using text or image only.

Nevertheless, not every multimedia applications are able to successfully derive the actual content to user, it is because designer did not design base on the common design principle. Therefore, useless multimedia application is developed. Certainly, in order to produce a successful multimedia application, several design principles should be followed. At the discussion below, several design principles are introduced.

2.0 Storyboard

Preparing a story storyboard is one of the essential step for all designer, it is because storyboard is a visual representation and envision of the designer. Generally, information that consist in the storyboard are the design layout, page sequence, screen indication and so forth by sketching out. The benefit of sketches is to allow designer to do some modification easily. Apart from that, purpose of the storyboard is to allow designer collect all relevant ideas, material, and determine a logical format that is going to present in the multimedia application (Betrus, A., 2004). Figure 2.1 below illustrate an example of storyboard.

Figure 2.1: Storyboard (Chan, K., 2013).

3.0 Information Appearance

Information such as text or graphic that appear on screen must be clear and consistent. Typically, clear simply means by do not add in too much of information in a space and important information should be placed on the top or left of the screen. Hence, readers are able to get important information directly since reader usually will read from top or left on the screen as well as confusion can be avoided.

Besides that, text or format that appear on screen should be consistent. Else, reader may feel messy, confuse, and dizzy when look on the content. Apparently, reader will not continue to look and read on it (Chance, D., 2005). Figure 3.1 below illustrate a website that is clear and consistent and figure 3.2 below illustrate a website that is unclear and inconsistent.

 

Figure 3.1: Clear, Consistence and Contrast Website (HTC Corporation, 2013).

Figure 3.2: Confusion Website (Zamoht, 2012).

3.1 C.R.A.P

Apart from that, in order to have a good information appearance, C.R.A.P is another best design rules. C.R.A.P stand for Contrast, Repetition, Alignment and Proximity. When a designer would like to emphasize and create interest in a specific graphic, designer or image editor should adjust the proper contrast value and apply to the image. Thus, strong contrast graphic between elements in page will allow readers to focus on the graphic at first. Whereas, poor contrast of image may blends it all into RGB incoherent mass value as figure 3.3 illustrate below (Gregory, 2012).

Figure 3.3: Non-contrast and Contrast Graphic (Ania, F., 2011).

Furthermore, to create a cohesive look in a multimedia application, repeating style and same piece of design is one of a key point. For an example, to create a cohesive look in a website, same header and footer design, color, shape arrangement and font type must be consistence. In this case, readers are able to read or scan through the website easier. Nevertheless, if the design do not has a cohesive layout design, reader may not able to find the key elements and do not comprehend the design as well (Eduardo, 2012). Figure 3.4 below illustrate a repetition brochure design.

Figure 3.4: Repetition Brochure Design (Depositphotos, 2013).

On top of that, designer should always make a design look align, clear, clean and connected. Alignment should be either left, right or center, do not ever using all of these direction at once, this will create a very untidy and messy of view. Meanwhile, to enhance reader readability, words that crammed in a row must be avoided. Hence, readers are able to read the content more easily (Eduardo, 2012). Newspaper alignment is one of the best example for alignment as figure 3.5 show below.

Figure 3.5: Sample of Alignment (Romein, P., 2008).

Last but not least, proximity in design principle creates a related meaning by grouping related design elements or information together. Whereas, information that is not related must provide more proximity between each other. So, readers are able to find matching information or differentiate unrelated information easier and faster. However, designer should not give too much of white space between unrelated content as well, it is because negative effect of view may be presented to the reader (Ania, F., 2011). Figure 3.6 below illustrate an example of good website proximity design.

Figure 3.6: Website Proximity Design (Woods, A., 2012).

4.0 Typography

Typography in a multimedia application is playing one of an important role in design principle. It is because without a suitable font type, style, and size provided in a multimedia application, definite most of the time actual information will not derive accurately to the user since users are not feeling comfortable in reading the content.

For instance, if a web application do not provide sound, animation and consistence font style in the guide line, user probably will not interest to further understand it. Nevertheless, if the website is having a consistence and proper font type, style and size, user are able to easily read through and understand the guide line. However, alignment is very important to make the text looks consistence. Besides that, designer may use bold style to create contrast and gain attraction from the reader (Lee, S. H., 1999).

Other than that, there are some rules that designer should follow, which is do not consistently use all capital letter in a multimedia application, because capitalized text is having the same shape. Thus, readers may face difficulty when reading it. Moreover, designer should avoid all the text display in bold style as well. Since bold usually used to emphasis title or important point, and constant emphasis will equal to no emphasis (Chance, D., 2005). Figure 4.1 below show the consistence of font type, size and style, at the same time there is a bold style on the right hand side and below to emphasis the contact section, About Us and Mission Statement.

Figure 4.1: Consistence font type, style and size (The Oaks Group, 2013).

5.0 Animation and Audio

Animation offer one of the best visual effect that allow visual leaner to understand easily and rapidly. While designing a multimedia application, animation is one of the best method to derive information to all user. Base on designer’s creativity, a creative animation can be produced to enhance the application interactivity and dramatic.

Apparently, audio not only can support learner reading on the text, but it also has the ability to hold learner’s attention when come to the important parts. This is why animation and audio will be one of the design principle in a multimedia application. However, designer should think on the response time as well. For an example, if a webpage contain lots of animation, size of the website will typically increase. For those who are having slow bandwidth connectivity, it is difficult for them to load a webpage that contain large size of animation (Lee, S. H., 1999).

6.0 Conclusion

Multimedia can be one of the most influential tools for the end user, because it help lots of people to understand and clarify their doubt by using multimedia tools as well as make people life easier. But, sometime poor designed can cause the creation of poor system. This can be caused by overuse of the element such as animation, audio, color and font type. Therefore, designer should always keep in mind on these design principles that discussed above.

Apart from that, the author has gain some extra information throughout this assignment and understand more in depth for each designing principle for a multimedia application. Not only that, the author also explored on some other proper citation and referencing format while completing the assignment.

References

Ania, F., 2011. C.R.A.P Literally. [online] Available at: <http://aniaf84.wordpress.com/2011/09/20/c-r-a-p-literally/> [Accessed 22 September 2013].

Betrus, A., 2004. Storyboards for Multimedia Projects. [online] Available at: <http://www2.potsdam.edu/betrusak/621/storyboards.html> [Accessed 22 September 2013].

Chan, K., 2013. Storyboarding. [online] Availble at: <http://acomp.stanford.edu/tutorials/storyboarding> [Accessed 22 September 2013].

Chance, D., 2005. Multimedia Design Principle. [online] Available at: <http://web1.arthurphil-h.schools.nsw.edu.au/~tas/Multimedia/Website/Term4/Resources/designprinciplesMM.pdf> [Accessed 22 September 2013].

Depositphotos, 2013. Eco green brochure design. [online] Available at: <http://depositphotos.com/10727648/stock-illustration-Eco-green-brochure-design.html> [Accessed 23 September 2013].

Eduardo, 2013. CRAP: 4 Elements in Creating Professional Designs. [online] Available at: <http://www.chatterbuzzmedia.com/4-design-elements-professionals/> [Accessed 23 September 2013].

Gregory, 2012. It’s all C.R.A.P.: Four Principles of Design. [online] Available at: <http://www.thinkaroundcorners.com/2011/10/c-r-a-p-principles-design/> [Accessed 22 September 2013].

HTC Corporation, 2013. Smartphone. [online] Available at: <http://www.htc.com/sea/smartphones/> [Accessed 22 September 2013].

Lee, S. H., 1999. Scrren Design Guidelines for Motivation in Interactive Multimedia Instruction. [online] Available at: <http://www.medvet.umontreal.ca/techno/eta6785/articles/screen_design_guidelines.pdf> [Accessed 23 September 2013].

Romein, P., 2008. Newspaper Article From Boxing Day Morning Camp-Out. [online] Available at: <http://www.paulromein.ca/blog/tag/newspaper/> [Accessed 23 September 2013].

The Oaks Group, 2013. Welcome. [online] Available at: <http://www.redcouchinteractive.com/portfolio/custom-web-application/> [Accessed 23 September 2013].

Woods, A., 2012. Become A Better Web Designer – Read the full article to find out how. [online] Available at: <http://www.basekit.com/become-a-better-web-designer> [Accessed 23 September 2013].

Zamoht, 2012. Archive for the “Web Design” Category. [online] Available at: <http://youarenotagraphicdesigner.com/category/web-design/> [Accessed 22 September 2013].