Communication-Oriented Interface Design Principles: Part II (User Interaction Design at Raffles Design Institute)
•
0 likes•18 views
This is part II of how to design interfaces as information systems and use gestalt theory to organize such systems to maximize the user experience.
Recommended
Recommended
More Related Content
Similar to Communication-Oriented Interface Design Principles: Part II (User Interaction Design at Raffles Design Institute)
Similar to Communication-Oriented Interface Design Principles: Part II (User Interaction Design at Raffles Design Institute) (20)
More from Itamar Medeiros
More from Itamar Medeiros (20)
Recently uploaded
Recently uploaded (20)
Communication-Oriented Interface Design Principles: Part II (User Interaction Design at Raffles Design Institute)
- 1. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 1/38 welcome to USER INTERACTION DESIGN Lecturer Itamar Medeiros (Brazil) BA Industrial Design; PgDip Information Design; MA Design Practice Expertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction.
- 2. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 2/38 LESSON 08: COMMUNICATION-ORIENTED INTERFACE DESIGN PRINCIPLES learning outcome Students will learn to think of interfaces as information systems and to use gestalt theory to organize such systems in ways to maximize the user experience.
- 3. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 3/38 LESSON 08: COMMUNICATION-ORIENTED INTERFACE DESIGN PRINCIPLES content An introduction to Communication- Oriented principles of Interface Design: -Scale, Contrast and Proportion; -Gestalt and Visual Variables.
- 4. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 4/38 SCALE, CONTRAST & PROPORTION The subtle interrelationship of scale, contrast and proportion can be seen in every harmonious design. The effectiveness of a clear composition always depends at least as much -- often more -- on the relationships among the parts as it does on the parts themselves.
- 5. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 5/38 SCALE, CONTRAST & PROPORTION These relationships, which emerge at the global level of the display, must be manipulated locally, by modifying the attributes of display component parts. Unfortunately this is on of the most difficult problems in visual communication -- and the one that requires the most practice to develop.
- 6. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 6/38 SCALE, CONTRAST & PROPORTION Altering even a single attribute of one part in a complex composition can have a significant impact on the balance, the unity, and the harmony of the whole.
- 7. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 7/38 SCALE human proportions Scale describes the relative size or magnitude of a given design element in relation to other design elements and the composition as a whole. Scale is never meaningful in an absolute sense: it is defined in relation to the human viewer.
- 9. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 9/38 SCALE the right balance Achieving the right balance between point and counterpoint, between figure and ground, depends on careful manipulation of the graphical qualities of each element in the display. The magnitude of the differences needed to establish this balance are dictated by the principles of contrast.
- 10. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 10/38 CONTRAST Contrast results from noticeable differences along a common visual dimension that can be observed between elements in composition.
- 13. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 13/38 CONTRAST visual distinctions Contrast provides visual distinctions, which are the building blocks of meaning in a visual message. The dimensions along which visual contrast can be drawn include shape, size, color, texture, position, orientation, and movement.
- 16. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 16/38 CONTRAST communication efficiency Effective visual communication consists of selecting – for each part and for the whole composition – the visual treatment that most effectively realizes the communication goal. Scale and contrast must be modulated to produce the right balance between interesting visual dynamics and pleasing, harmonious proportions.
- 18. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 18/38 PROPORTION Proportion deals in rations rather fixed sizes. It determines the balance and harmony of the relations between elements. Classical systems of proportion – such as the Golden Rectangle – codify relationships known to please the mind as well as the eye.
- 19. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 19/38 SCALE, CONTRAST AND PROPORTION Regardless of its source, the effective use of scale, contrast and proportion confers many benefits, such as:
- 20. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 20/38 DIFFERENTIATION Contrast is essential for differentiating elements from one another - for allowing form to emerge from the void.
- 22. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 22/38 EMPHASIS Scale and contrast can be used to emphasize important elements of the composition.
- 24. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 24/38 ACTIVITY Scale and contrast move the viewer’s eye through the composition in a predictable sequence that can be used to support a particular communication goal.
- 26. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 26/38 INTEREST Scale and contrast add visual interest to a composition by juxtaposing elements with strongly opposed visual qualities to create tension, drama, and excitement.
- 28. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 28/38 SCALE, CONTRAST AND PROPORTION principles Scale, contrast and proportion can be powerful tools in the hands of a designer. If proportion sets the rhythm of the display, then the scale of its components determines its forcefulness and their contrasts determines its excitability.
- 29. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 29/38 SCALE, CONTRAST AND PROPORTION principles These powerful elements must be used with care, particularly in user interface design, where the goal is rarely to shock, to arrest, or to persuade. Contrasts must be clear enough to convey the intended distinctions, yet subtle enough to produce a harmonious relation between the elements in the display.
- 30. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 30/38 PRINCIPLES clarity Contrast, like any other aspect of design, is effective only when it is clearly intentional rather than random or accidental. Clarity of intent ensures that contrast can be easily perceived and that values can be clearly equated or differentiated.
- 32. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 32/38 PRINCIPLES harmony Harmony describes the effect, seen at the level of the whole, of the pleasing interaction of the parts.
- 34. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 34/38 PRINCIPLES harmony A constant interest of classical Greek, its architecture was based on an elaborate mathematical canon relating the width, height, and spacing of interior and exterior components to one another. The most famous of such mathematical formula is the Golden Section, which governs the overall proportions of the façade.
- 36. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 36/38 PRINCIPLES harmony Various composition rules derived from this formula, such as the Rule of Thirds for photography.