Download to read offline
Uploaded byItamar Medeiros
Communication-Oriented Interface Design Principles: Part II (User Interaction Design at Raffles Design Institute)
This document covers principles of user interaction design, focusing on scale, contrast, and proportion in communication-oriented interfaces. It emphasizes the importance of these visual elements in creating harmonious and effective designs that enhance the user experience. The document discusses how manipulating these elements can lead to clarity, emphasis, and visual interest in compositions.
More Related Content
Similar to Communication-Oriented Interface Design Principles: Part II (User Interaction Design at Raffles Design Institute)
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 INTERACTIONDESIGN 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 DESIGNPRINCIPLES 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 DESIGNPRINCIPLES 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 Thesubtle 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 Theserelationships, 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 Alteringeven 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 describesthe 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.
- 8.
- 9. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 9/38 SCALE the right balance Achievingthe 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 fromnoticeable differences along a common visual dimension that can be observed between elements in composition.
- 11.
- 12.
- 13. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 13/38 CONTRAST visual distinctions Contrast providesvisual 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.
- 14.
- 15.
- 16. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 16/38 CONTRAST communication efficiency Effective visualcommunication 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.
- 17.
- 18. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 18/38 PROPORTION Proportion deals inrations 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 Regardlessof 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 essentialfor differentiating elements from one another - for allowing form to emerge from the void.
- 21.
- 22. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 22/38 EMPHASIS Scale and contrastcan be used to emphasize important elements of the composition.
- 23.
- 24. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 24/38 ACTIVITY Scale and contrastmove the viewer’s eye through the composition in a predictable sequence that can be used to support a particular communication goal.
- 25.
- 26. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 26/38 INTEREST Scale and contrastadd visual interest to a composition by juxtaposing elements with strongly opposed visual qualities to create tension, drama, and excitement.
- 27.
- 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 Thesepowerful 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 anyother 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.
- 31.
- 32. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 32/38 PRINCIPLES harmony Harmony describes theeffect, seen at the level of the whole, of the pleasing interaction of the parts.
- 33.
- 34. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 34/38 PRINCIPLES harmony A constant interestof 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.
- 35.
- 36. USER INTERACTION DESIGN LESSON 08: SCALE, CONTRAST AND PROPORTION 36/38 PRINCIPLES harmony Various composition rulesderived from this formula, such as the Rule of Thirds for photography.
- 37.
- 38.