Download presentation
Presentation is loading. Please wait.
Published byCraig Layton Modified over 9 years ago
1
Multimedia Design Principles Pertemuan 17&18 Matakuliah: O0414 - Computer / Multimedia Tahun: Feb - 2010
2
Bina Nusantara Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Membuat desain rancangan interface dan navigasi untuk aplikasi multimedia sederhana
3
Bina Nusantara Outline Materi Information Design Navigation Interface Design Metaphor
4
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
5
Information Design Is also called : Information Architecture Communication Design Draws on : Typography Graphic design Linguistics Psychology Ergonomics Computing and other fields Bina Nusantara
6
What is Information Design? Bina Nusantara
7
Basic Principles Bina Nusantara Proximity Alignment Repetition Contrast Proximity Alignment Repetition Contrast
8
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
9
Bina Nusantara
11
White Space – to rest the eyes Bina Nusantara Proximity
12
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
13
Type of Alignment Left aligned Lorem 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 aligned Lorem 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
14
Centered Lorem 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. Justified Lorem 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
15
Bina Nusantara
17
Repetition Repeat some aspect of the design Consistency To unify all parts of a design Bina Nusantara
19
Contrast To create interest To draw our eyes Must be VERY different Bina Nusantara
22
Information Architecture Linear / Sequential telling a story Hierarchical organized information Network / Web exploring
23
Bina Nusantara Structural Issues Depth Breadth
24
Bina Nusantara Navigation Key Questions –Where am I? –Where have I been? –Where can I go to? Navigation Techniques –Browsing –Searching –Site Maps –Indexes
25
Bina Nusantara Navigation Providing indicators - ‘you are here’ –Cascading menus –Thumbnail maps –Color coding Providing ‘Search facilities’ –Sitemaps –Explicit ‘Home’ button
26
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”Ten Usability Heuristics
27
Bina Nusantara Interface Design Issues Hyperlinks, icons, and buttons Alignment Text Color Screen size and resolutions And so on.…
28
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
29
Bina Nusantara
30
Pic taken from : http://www.flickr.com/photos/danrubin/1365504132/
31
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
32
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
33
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
34
Bina Nusantara Which one is better?
35
Bina Nusantara Screen Resolutions 2006 Statistic 2001 Statistic 640x480: 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
36
Bina Nusantara Screen Resolutions
37
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
38
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
39
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
40
Bina Nusantara Metaphor Example – ReadPlease 2000 http://homepage.mac.com/bradster/iarchitect/readplease.htm
41
Bina Nusantara Metaphor Example – PowerDVD = Tape Deck
42
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.shtmlhttp://commons.wikimedia.org/wiki/Image:Japan_Mailbox_Red.jpg
43
Exercise Bina Nusantara
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.