Design principles for multimedia application

Design principles for multimedia application

Introduction

            Design principles for multimedia application, in others words, the design principles is the rules or guidelines that we needed to follow or emphasize on while we are developing a multimedia application. A good design for multimedia application is a design that follows the design principles which can always seize the attention of the user. We should remember that our design is to present to our audience but not for ourselves, we should not design something according to our personal preferences only.

Things to consider in the pre-design stage

            First of all, before we start to design a multimedia application, there are some components that we needed to be considers such as, budget, time and the users. We should consider the age level, ethnicity, religion and gender of the multimedia application users in order to ensure that our design is best fit to the needs of all of the users. For example, in designing a game for educational purpose for the users with age range from 5 to 8 years old, then our design should not include violence composition and should include some elements such as cute cartoon character to gain the attention of users to interact with the application. Additionally, the budget and time are also important components that we are needed to consider. We should make sure that the multimedia application can be design within the given budget and dateline.

C.R.A.P principles

            C.R.A.P stand for contrast, repetition, alignment and proximity, C.R.A.P principles is rules that guide us to design the appearance of the content in our design in order to make our design successful. "The appearance of information such as text or graphics effects the way we perceive it." (Darnell, C., August 2005.). The appearance of the content in our design could impact to our design performance.

Contrast

A designer that uses good contrast could make a design appear organize, while poor contrast of a design are design that uses incoherent mass of color value. Good contrast could clearly identify and classified the hierarchy of all the components in the design and make main component to stand out. A good contrast of design also must come along with a clean design, we have to ensure our design is uncluttered, too much text or graphics implode in a small space will cause the information hard to retrieve by users. The most important components should be place at the place that easily to be seen by audience.

Additionally, we have to ensure that the background and the foreground colors, picture or text are well contrast. The contrast of background and foreground components in a design is usually for drawing the attention and creates interest of the users in specific items that we wanted to emphasize on. "It can be accomplished with text, color, shape proximity, size, location, or with any combination." (Darnell, C., August 2005.)

Examples Of Good and Bad Contrast

Color Contrast Checking Tools

"checkmycolours" is a tool used to check the color contrast of background and foreground of a web page

Repetition

            Repetition principles simply mean that a consistent of repeating same interface design. We have to ensure that our design is consistent. "Constantly changing environment required constant mental adjustment.". (Darnell, C., August 2005.). An inconsistent of layout design could interfere the visual enjoyment of users, users would not feel comfortable in using the application. For example, when we access to a website which has multiple web pages and the navigation bar in the web pages are vary in color, shape and position in each of web pages, we will definitely feel confusing and uncomfortable in accessing the website.

Good Repetition of Websites design

This Websites consistently repeat of using same interface

 Bad Repetition of Websites design

Repeat of using the background color in this webpage making the websites looks confuse.

Alignment

 "Alignment is the positioning of a body of text to the left, right, center or justified." (Dr. Liu, 2001). Alignment can be classified in to vertical alignment and horizontal alignment. Both vertical and horizontal alignment needed to format from top to the bottom. For example, when we need to place a few paragraph of text information in our design, we should place the most important message in the top left side of our design, because "study show that human usually read from the top left side first."(Nielsen Jakob, 2006).

Bad Alignment of design

Good Alignment of design

Proximity

Elements that are related should group together whereas separate elements need to have appropriate space between each other to show that they are different. Space between paragraph and pictures must not be too far or too close. " “White space” is the unused areas of a page or screen. Graphic designers realized long ago that is important for clarity and appeal. " (Darnell, C., August 2005.). Leave appropriate of space between various components will make our design looks comfortable. In contrast, space between components too close will cause our design looks cluttered and confusing. Additionally, distance between components too far will cause our design looks weak.

Example of proximity in graphic design

Bad Proximity of design
This design did not group the text and graphic together which represented the same meaning.

Good Proximity of design
This design group the text and graphic together. Looks well organized.

Example of proximity in web page design

Bad proximity of web page design
All of the components in the above webpage are too close, Looks very crowded.

Good proximity of web page design
All of the components in the above webpage are well grouped according to category.

Communicability

            Communicability indicates how users understand about the meaning of design. In designing a multimedia application, we need to create a user friendly application or design with clear navigation structure in order to allow users to feels comfortable to interact with the multimedia application. We should not design a graphic or application that with ambiguous meaning to confuse the users or audience.

Bad Communicability of symbol

This symbol creates ambiguous meaning.

Good Communicability of symbol

Users understand this Question Mark is a symbol for "help information" or "frequently asked question"

Rules of thumb

Most multimedia presentations can be improved by eliminating some elements or moving them to another screen. Rules of thumb most commonly used in typography design.

Examples
eliminating some elements or moving them to another screen.

Typography

"Studies in perception indicate that when blocks of text are used, serif fonts work best for printed page and sans-serif fonts are best for computer monitor and projection." (Darnell, C., August 2005.). A Serif is a terminating mark at the end of a letter stroke, while sans-serif fonts are fonts without terminating marks. Although the difference between serif fonts and sans-serif fonts is not much, but it can really impact your design while you placed a large number of typography design in the multimedia application. While designing typography, we should avoid to use all capital letters and all bold in the same typography, this is because all capitalized texts have no enough space between each text, therefore it make our typography design more difficult to read by the audience, and bold in texts is use for the text that we needed to emphasize, constant emphasize is no emphasize, if all the texts are bold, then the audience would not know which text we wanted to emphasize and feel confusing.

Color

There are also some principles of uses of color can guide us while we are designing a multimedia application. First, we need to limit the color pallet to 3 or 4 colors, uses of too many type of color will make our design distracting. Second, we need to avoid of uses bold color for our background color, strong background will de-emphasizes text and graphics which in foreground, so light colors should use as background color while bold colors should use in foreground. Furthermore, each color have its own meaning, we should avoid of using wrong combination of colors in our design that can cause confusion to the audience. For example, blue color contain the meaning of comfort while the red color contain the meaning anger, when blue color and red color used in the same component, the audience will confuse whether the designers wanted to conveys a comfortable or a anger meaning.

The example of Logo Design that limit the Color Pallet to 3 or 4 colors. 

References

Darnell, C., August 2005. Multimedia Design Principles. [Online] 
Available at: http://web1.arthurphilh.schools.nsw.edu.au/~tas/Multimedia/Website/Term4/Resources/designprinciplesMM.pdf
[Accessed 20 September 2013].


Lazaris, Louis, 2009. The Principles of Proximity in Web Design. [Online] 
Available at: http://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design/
[Accessed 20 September 2013].

Dr. Liu, 2001, Designs and Strategies for New Media. [Online]

Available at: http://www.edb.utexas.edu/minliu/multimedia/technical.swf

[Accessed 21 September 2013].

Reynolds, Garr, 2008, The Big Four : Contrast, Repetition, Alignment, Proximity. [Online]

Available at: http://www.presentationzen.com/chapter6_spread.pdf

[Accessed 21 September 2013].

Mike, Rundle, 2013, How C.R.A.P is Your Site Design. [Online]

Available at: http://blog.teamtreehouse.com/how-crap-is-your-site-design

[Accessed 21 September 2013].

Williams, Robin, 2010, Non-Designers Design Book. [Online]

Available at: http://www.slideshare.net/lisadawley/crap-design

[Accessed 22 September 2013].

Williams, Robin, 2010, Basic Visual Design Principles

Available at: http://www.hu.mtu.edu/~njcarpen/hu3120/pdfs/Basic%20Visual%20Design%20Principles.pdf

[Accessed 22 September 2013].