Spectrum, Adobe’s design system

Voice and Tone

As I’ve been exploring Spectrum, Adobe’s design system, I’ve gained knowledge about their meticulous approach to voice and tone. They define voice by applying design principles to language, prioritizing clarity, simplicity, and a human-centric, friendly demeanor while avoiding overly opinionated or trendy expressions. Tone, on the other hand, is viewed as the varied expression of this voice, which is adaptable to users’ emotional states and needs throughout their experience. I’ve come to realize how tone can positively shape interactions by guiding communication to align with the appropriate level of emotional involvement required. Overall, Spectrum’s focus on coherent, empathetic, and adaptable communication highlights their dedication to enhancing user experiences across Adobe’s products.

Color System

In Spectrum, Adobe’s design system, I’ve learned about a meticulously crafted color system that forms the backbone of UI design. It revolves around 11 neutral grays per color theme, meticulously chosen to ensure optimal contrast and prevent color misinterpretation in various workflows. Within each theme, gray-100 acts as the default background, with other gray values generated based on contrast ratios. These grays serve different UI elements, such as background layers, decorative borders, and text content, to maintain clarity and hierarchy in design.

Alos, I’ve learned that Spectrum incorporates 13 colors per theme, each with 14 tints and shades, used sparingly to reinforce hierarchy and communication within the interface. These colors convey contextual information and relationships between content types, aiding categorization and data visualization. Additionally, the system assigns generic meanings to some colors to ensure consistent user expectations.

Semantic colors, like informative, accent, negative, notice, and positive, play a crucial role in enhancing communication by visually signaling meaning. However, it’s essential to remember the cultural and emotional significance of colors globally. Spectrum emphasizes the adherence to international design guidelines for color usage to create interfaces that are accessible, communicative, and culturally sensitive.

Inclusive Design

Inclusive design is at the core of Adobe’s mission, driving collaboration among designers, engineers, and product builders to craft better experiences by embracing diverse perspectives. Within Spectrum, Adobe’s design system, inclusivity is paramount, ensuring readability, usability, and accessibility for all users, including those reliant on assistive technology. Best practices within Spectrum encompass principles such as providing context-sensitive help, accommodating various input methods and screen sizes, respecting user preferences, minimizing distractions, maintaining consistency, involving marginalized users in the design process, and prioritizing comprehensive documentation. Checkpoints for inclusivity cover structure, color, Windows high contrast mode, animation, and interactions, emphasizing logical organization, color accessibility testing, support for high contrast modes, animation moderation, and user-friendly interactions. Spectrum’s inclusive design approach aims to create products and experiences that are accessible, usable, and welcoming to all, reflecting Adobe’s commitment to diversity and inclusivity.

Spectrum, Adobe’s design system

Inclusion

Learning about the inclusion of Apple Human Interface Guidelines involves understanding the fundamental principles of designing apps that prioritize respect and accessibility for all users. It emphasizes the importance of empathetic design, considering diverse perspectives, and using inclusive language to create welcoming experiences. By examining various human characteristics and experiences, including age, gender, race, disabilities, and cultural backgrounds, designers can ensure their apps are not only free from offensive content but also genuinely inclusive. This approach encourages the use of plain language, avoiding colloquial expressions and unnecessary gender references, while maintaining an approachable interface that accommodates users of all skill levels. In essence, embracing inclusivity in app design fosters a more equitable and user-friendly digital environment.

Motion

In Apple’s Human Interface Guidelines, the section on Motion emphasizes the role of fluid and purposeful animations in enhancing user experience across platforms. It highlights the importance of using motion to communicate feedback, provide instruction, and enrich visual interactions within apps and games. The guidelines stress the need for subtle and intentional animations that support user understanding without overwhelming them, while also making motion optional to accommodate accessibility settings. By striving for realism, credibility, and brevity in animations, designers can create seamless and lightweight experiences that complement rather than overshadow the interface. Additionally, the guidelines advise against excessive motion in frequent interactions and suggest considering the use of animated symbols for added context and engagement.

Color

Apple’s Human Interface Guidelines provide valuable insights on how to effectively use color in app design. The guidelines stress the importance of using color to improve communication, brand identity, and user experience while also providing guidance on its careful use, especially in non-game apps. They also cover topics such as adapting colors to different contexts, testing them in various conditions, and ensuring inclusivity for users with color blindness. Additionally, the guidelines emphasize the importance of system colors and dynamic system colors, as well as best practices for color management, including the use of color profiles and wide color displays. Overall, the guidelines serve as a comprehensive resource that highlights the significance of thoughtful color design in creating successful user interfaces.

The Guardian Digital Design Style Guide

Grid and Space

The grid system, characterized by columns of 60px with 20px gutters on desktop, provides a structured framework for organizing information across different screen sizes. The guide outlines specific grid sizes for large screens and utilizes a fluid grid for mobile devices, ensuring consistency and adaptability. Additionally, spacing is strategically employed to mirror the typography placement in print, with rules governing the alignment of display and text elements to maintain coherence across both print and digital mediums, particularly evident in headlines, bylines, and container titles.

Typography

I learned about the typography choices, which include two core typefaces, Guardian Headline and Guardian Titlepiece, along with three additional typefaces. Guardian Headline, designed for optimal readability across platforms, is utilized for headlines, imbuing them with the Guardian’s distinctive voice. Guardian Titlepiece, derived from the Guardian’s logotype, serves for section titling, marked by its high contrast and boldness. Complementing these are the highly legible text types and the sans serif for small sizes or meta information, ensuring a cohesive and visually appealing typographic experience throughout the website and app.

Color Palett

In exploring The Guardian Digital Design Style Guide’s color palette, I learned that it serves as a versatile tool for conveying boldness, playfulness, tastefulness, and sensitivity. The guide emphasizes consistency in color usage, highlighting its role as a navigational aid for readers. The palette strikes a balance between harmonious and contrasting colors, aiming to maintain coherence across the platform. Additionally, color is utilized not only for the user interface but also to signify different types of editorial content and the corresponding editorial pillars. This approach helps to guide users and indicate the tone of voice associated with each piece of content, encouraging a bold, playful, and courageous design ethos throughout the platform.