Multimedia Application Fundamentals 2: Material Design

Material Design

• Material Design is a design language developed by Google in 2014, emphasizing the use of texture, light, and shadow to create a sense of depth and interactivity.
• It uses the concept of "material" as a metaphor to guide its design principles and guidelines, based on how users interact with physical objects in the real world.
• A primary color is used most frequently across an app's screens and components, and can also be used to accent elements.
• A secondary color is used to accent select parts of the UI, should contrast with elements that surround it, and be applied sparingly.
• Large UI areas and elements should be colored with the primary color, while a secondary color can be used to accent smaller areas.
• High-quality images should be used, as they can make the design look more professional and enhance the user's experience.
• Bold, graphic, and intentional imagery helps to engage the user and communicate a product through visuals.
• Motion helps make a UI expressive and easy to use.

Material Design Typography

• A typeface is a set of designed characters that share a common visual style and can be used to create written or printed text.
• Typefaces can have different styles and classifications, such as serif or sans-serif, display or text, condensed or extended, and many others.
• Roboto and Noto are the standard typefaces on Android and Chrome.
• Hierarchy can be created by varying font size, weight, and color to guide the user's attention to the most important elements.
• Appropriate font weights and styles should be used to create contrast and hierarchy.
• Text should be easy to read and legible, even at smaller sizes, with a recommended font size of at least 16px for body text and 12px for captions.
• Roboto is a versatile font family that can be used for both body text and headings, and supports a wide range of languages.

Material Design Components

• Material Design components include buttons, cards, navigation drawers, snack bars, text fields, tooltips, progress indicators, tabs, dialogues, and sliders.

Human Interface Guidelines

• HIG stands for Human Interface Guidelines, a set of design principles and guidelines created by Apple to help developers create consistent and intuitive user interfaces.
• HIG covers many aspects of interface design, including layout, typography, color, iconography, and interaction design.
• High-quality imagery is important for creating a polished and professional interface, with high-resolution and optimized images recommended for different devices.
• HIGs recommend using a standardized color space such as sRGB, which is widely supported across different devices and platforms.
• Display P3 is a color gamut or color space that was introduced by Apple in 2015, producing richer, more saturated colors than sRGB.
• Color profiles should be applied to images to ensure that an app's colors appear as intended on different displays.