Multimedia Design Principles Pertemuan 17&18
description
Transcript of Multimedia Design Principles Pertemuan 17&18
![Page 1: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/1.jpg)
Multimedia Design PrinciplesPertemuan 17&18
Matakuliah : O0414 - Computer / Multimedia
Tahun : Feb - 2010
![Page 2: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/2.jpg)
Bina Nusantara
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :• Membuat desain rancangan interface dan navigasi untuk
aplikasi multimedia sederhana
![Page 3: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/3.jpg)
Bina Nusantara
Outline Materi
• Information Design
• Navigation
• Interface Design
• Metaphor
![Page 4: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/4.jpg)
Bina Nusantara
Why Design?
“People need to get into your software in about 20 seconds and get immediate positive feedback and reward; then they are smiling and having a good time and they want to go further.”
– Trip Hawkins, Electronic Arts Chairman
“People need to get into your software in about 20 seconds and get immediate positive feedback and reward; then they are smiling and having a good time and they want to go further.”
– Trip Hawkins, Electronic Arts Chairman
![Page 5: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/5.jpg)
Information DesignIs also called :
• Information Architecture• Communication Design
Draws on :
• Typography• Graphic design• Linguistics• Psychology• Ergonomics• Computing• and other fields
Bina Nusantara
![Page 6: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/6.jpg)
What is
Information Design?
Bina Nusantara
![Page 7: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/7.jpg)
Basic Principles
Bina Nusantara
•Proximity•Alignment•Repetition•Contrast
•Proximity•Alignment•Repetition•Contrast
![Page 8: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/8.jpg)
Proximity
• To Organize - Group related items together
Bina Nusantara
Color • Red• Green• Orange• Pink • Blue• Violet• Purple
Color • Red• Green• Orange• Pink • Blue• Violet• Purple
Color • Red• Green• Orange• Pink
• Blue• Violet• Purple
Color • Red• Green• Orange• Pink
• Blue• Violet• Purple
![Page 9: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/9.jpg)
Bina Nusantara
![Page 10: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/10.jpg)
Bina Nusantara
![Page 11: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/11.jpg)
• White Space – to rest the eyes
Bina Nusantara
Proximity
![Page 12: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/12.jpg)
Alignment
• Every items should have a connection, invisible or not• Good alignment contributes to cleaner communication• Centered text is visually unsophisticated and increases
reading time• Uniformity of alignment of elements throughout the
website
Bina Nusantara
![Page 13: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/13.jpg)
Type of Alignment
• Left alignedLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante.
• Right alignedLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh.
Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl.
In dignissim lacus ut ante.
Bina Nusantara
![Page 14: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/14.jpg)
• CenteredLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh.
Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl.
In dignissim lacus ut ante.
• JustifiedLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante.
Bina Nusantara
Type of Alignment
![Page 15: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/15.jpg)
Bina Nusantara
![Page 16: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/16.jpg)
Bina Nusantara
![Page 17: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/17.jpg)
Repetition
• Repeat some aspect of the design• Consistency• To unify all parts of a design
Bina Nusantara
![Page 18: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/18.jpg)
Bina Nusantara
![Page 19: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/19.jpg)
Contrast
• To create interest• To draw our eyes• Must be VERY different
Bina Nusantara
![Page 20: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/20.jpg)
Bina Nusantara
![Page 21: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/21.jpg)
Bina Nusantara
![Page 22: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/22.jpg)
Bina Nusantara
Information Architecture
• Linear / Sequential telling a story
• Hierarchical organized information
• Network / Web exploring
![Page 23: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/23.jpg)
Bina Nusantara
Structural Issues
• Depth
• Breadth
![Page 24: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/24.jpg)
Bina Nusantara
Navigation
• Key Questions– Where am I?– Where have I been?– Where can I go to?
• Navigation Techniques– Browsing– Searching– Site Maps– Indexes
![Page 25: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/25.jpg)
Bina Nusantara
Navigation
• Providing indicators - ‘you are here’– Cascading menus– Thumbnail maps– Color coding
• Providing ‘Search facilities’– Sitemaps– Explicit ‘Home’ button
![Page 26: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/26.jpg)
Bina Nusantara
Usability Attributes
• Match between system and the real world • User control and freedom support undo and redo• Consistency and standards “exit” or “quit” ?• Error prevention • Flexibility and efficiency of use expert/basic mode• Aesthetic and minimalist design • Help users recognize, diagnose, and recover from
errors understandable error message
From Jacob Nielsen’s “Ten Usability Heuristics”
![Page 27: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/27.jpg)
Bina Nusantara
Interface Design Issues
• Hyperlinks, icons, and buttons• Alignment• Text• Color• Screen size and resolutions• And so on .…
![Page 28: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/28.jpg)
Bina Nusantara
Hyperlinks, Icons, and Buttons
• Use common colour to indicate the state of hyperlinks (selected, rollover, or clicked)
• Provide icons/buttons that make sense
• Do not force user to learn many new/special icons• How the buttons is activated/selected highlight or
shape change
![Page 30: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/30.jpg)
Bina Nusantara Pic taken from : http://www.flickr.com/photos/danrubin/1365504132/
![Page 31: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/31.jpg)
Bina Nusantara
Alignment
• Both ‘horizontal’ and ‘vertical’ elements on the page.• Good alignment contributes to cleaner communication• Centered text is visually unsophisticated and increases
reading time• Uniformity of alignment of elements throughout the
website
![Page 32: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/32.jpg)
Bina Nusantara
Text
• Takes longer to read off a screen than from a book• Consider hierarchy of information• Present key information first• Writing - direct, concise, short paragraphs and bulleted
lists• Limit use of typefaces - maximum 2• Sans-serif faces are more readable
![Page 33: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/33.jpg)
Bina Nusantara
Color
• Use simple combinations color theory• Warm colors look larger than cool colors
• Bright colors larger than dark ones.
• Intense, saturated color can cause eye strain when used in quantity so don’t use it as background
![Page 35: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/35.jpg)
Bina Nusantara
Screen Resolutions
2006 Statistic 2001 Statistic640x480 : 5.3 %
800x600 : 13.2 %
1024x768 : 44.4 %
1152x864 : 5.2 %
1280x1024 : 31.9 %From Screen-Resolution.com
640x480 : 5.7 %
800x600 : 52.5 %
1024x768 : 32.7 %
1152x864 : 2.3 %
1280x1024 : 2.9 %From statmarket.com
![Page 36: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/36.jpg)
Bina Nusantara
Screen Resolutions
![Page 37: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/37.jpg)
Bina Nusantara
Screen Resolutions
• Resolution is increasing
• Design for lowest and most used resolution for ensured success
• Resolution is increasing
• Design for lowest and most used resolution for ensured success
![Page 38: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/38.jpg)
Bina Nusantara
Interface Design Pointers
• Define a control area and a stage area
• Choose muted background images and appropriate button graphics
• Use visual depth to indicate importance• Keep it simple
![Page 39: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/39.jpg)
Bina Nusantara
Metaphor
• A complex application can be understood more easily if the user interface is depicted in a way that resembles some commonplace system
• Appropriate metaphor allow user to learn/remember minimal rules or procedures of the application
![Page 40: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/40.jpg)
Bina Nusantara
Metaphor Example – ReadPlease 2000
http://homepage.mac.com/bradster/iarchitect/readplease.htm
![Page 41: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/41.jpg)
Bina Nusantara
Metaphor Example – PowerDVD = Tape Deck
![Page 42: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/42.jpg)
Bina Nusantara
Metaphor Issues
• Used for an application not one button• Several metaphors in one application• Metaphor isn’t always necessary• Stick to metaphors that will be understood by most
users • Some metaphors don't cross cultural boundaries
http://www.keyosk.co.uk/pr_letter-boxes-us-style-mailbox-891.shtml http://commons.wikimedia.org/wiki/Image:Japan_Mailbox_Red.jpg
![Page 43: Multimedia Design Principles Pertemuan 17&18](https://reader035.fdocuments.net/reader035/viewer/2022062221/568147b5550346895db4fbe8/html5/thumbnails/43.jpg)
Exercise
Bina Nusantara