Alexa I. Stefanou

Visual systems design requires technical and visual approaches.

Visual systems are patterns and relationships between design elements and experiences. A visual experience balances brand and product with established product patterns.

‍

A technical, systems approach to UI design builds the necessary visual systems for product design based on universal design principles.

‍

Design principles most applicable to product design include:

Contrast
Hierarchy
Balance
Proximity
Proportion
Unity
Repetition

Balancing brand identity and product visual system.

Brand is most often the starting point for developing a visual product system. Brands and products evolve, and it isn't uncommon for a product's visual system to fall behind product development.

‍

Visual systems fall under Ramp and Token levels in the component model and are just as important to design systems and upkeep as other areas of the system. Just like working with any other part of a design system, a systems approach can scoped to work with elements in place.

‍

Visual systems affect areas beyond what everyone notices or can see. Accessibility is one of the most technical aspects of visual systems, but there are several product considerations to design against.

‍

Product considerations

Accessibility
Brand identity
Brand voice
Product requirements
Responsiveness
Localization & Globalization

Visual UI design can be technical but it isn’t an exact science.

While mapping visual styles against visual relationships helps develop system rules, it's just a starting point.

‍

Because the human eye isn't able to see as a computer does, designers need to factor optical harmony into a system. Not everyone perceives visual elements the same way physically, cognitively, and culturally.

common styles and where they are applied

Design elements often have specific, and often, overlapping, applications.

Visual styles affect visual relationships.

Visual relationships found in product design often mirror visual relationships found in the material world. This diagram shows areas where styles most frequently contribute to building visual relationships.

A type scale is the starting point to a typographic system.

A type scale is a collection of text sizes that have relationships to each other. Different types of products may require different scales. A product with multiple areas with copy or small text may be heavier on the smaller end of the scale. A product with a minimalist UI may feature multiple display styles and be heavier on the larger end of the scale.

This is an example of a balanced type scale

Using a type scale, we can draw contextual type styles to apply to our visual system. Weight, line height, and other type styles aren’t part of the scale but can factor into scale proportions.

contextual type styles

These are examples of contextual styles pulled from the above type scale.

Color systems ramp.

I create a tints and shades scale for every hue used in the system even though only a few values will end up being used.

Spacing system based on a 4/8pt grid.

Additional styles and foundations.

Color, typography, and spacing are the foundational visual elements in a visual system. Visual systems include border, corner, elevation, and mode rules but that's not an all inclusive list. The approach behind building those libraries can be modeled after the approaches here.

‍

Interactions, haptics, and sounds are part of libraries adjacent to visual systems and often require visual elements within their definitions.

‍

jump to section

Balancing brand identity and product visual system.

Brand is most often the starting point for developing a visual product system. Brands and products evolve, and it isn't uncommon for a product's visual system to fall behind product development.

‍

Visual systems fall under Ramp and Token levels in the component model and are just as important to design systems and upkeep as other areas of the system. Just like working with any other part of a design system, a systems approach can scoped to work with elements in place.

‍

Visual systems affect areas beyond what everyone notices or can see. Accessibility is one of the most technical aspects of visual systems, but there are several product considerations to design against.

‍

Product considerations

Accessibility
Brand identity
Brand voice
Product requirements
Responsiveness
Localization & Globalization

common styles and where they are applied

Design elements often have specific, and often, overlapping, applications.

Visual UI design can be technical but it isn’t an exact science.

While mapping visual styles against visual relationships helps develop system rules, it's just a starting point.

‍

Because the human eye isn't able to see as a computer does, designers need to factor optical harmony into a system. Not everyone perceives visual elements the same way physically, cognitively, and culturally.

This is an example of a balanced type scale

Using a type scale, we can draw contextual type styles to apply to our visual system. Weight, line height, and other type styles aren’t part of the scale but can factor into scale proportions.

contextual type styles

These are examples of contextual styles pulled from the above type scale.

explanation

copy

Color systems ramp.

I create a tints and shades scale for every hue used in the system even though only a few values will end up being used.

Balancing brand identity and product visual system.

Brand is most often the starting point for developing a visual product system. Brands and products evolve, and it isn't uncommon for a product's visual system to fall behind product development.

‍

Visual systems fall under Ramp and Token levels in the component model and are just as important to design systems and upkeep as other areas of the system. Just like working with any other part of a design system, a systems approach can scoped to work with elements in place.

‍

Visual systems affect areas beyond what everyone notices or can see. Accessibility is one of the most technical aspects of visual systems, but there are several product considerations to design against.

‍

Product considerations

Accessibility
Brand identity
Brand voice
Product requirements
Responsiveness
Localization & Globalization

Visual UI design can be technical but it isn’t an exact science.

While mapping visual styles against visual relationships helps develop system rules, it's just a starting point.

‍

Because the human eye isn't able to see as a computer does, designers need to factor optical harmony into a system. Not everyone perceives visual elements the same way physically, cognitively, and culturally.

Visual styles affect visual relationships.

Visual relationships found in product design often mirror visual relationships found in the material world. This diagram shows areas where styles most frequently contribute to building visual relationships.

This is an example of a balanced type scale

Using a type scale, we can draw contextual type styles to apply to our visual system. Weight, line height, and other type styles aren’t part of the scale but can factor into scale proportions.

contextual type styles

These are examples of contextual styles pulled from the above type scale.

explanation

copy

tints and shade scale

I create a full scale of all tints and shades for each hue in the system

Additional styles and foundations.

Color, typography, and spacing are the foundational visual elements in a visual system. Visual systems include border, corner, elevation, and mode rules but that's not an all inclusive list. The approach behind building those libraries can be modeled after the approaches here.

‍

Interactions, haptics, and sounds are part of libraries adjacent to visual systems and often require visual elements within their definitions.

Balancing brand identity and product visual system.

Brand is most often the starting point for developing a visual product system. Brands and products evolve, and it isn't uncommon for a product's visual system to fall behind product development.

‍

Visual systems fall under Ramp and Token levels in the component model and are just as important to design systems and upkeep as other areas of the system. Just like working with any other part of a design system, a systems approach can scoped to work with elements in place.

‍

Visual systems affect areas beyond what everyone notices or can see. Accessibility is one of the most technical aspects of visual systems, but there are several product considerations to design against.

‍

Product considerations

Accessibility
Brand identity
Brand voice
Product requirements
Responsiveness
Localization & Globalization

‍

Visual UI design can be technical but it isn’t an exact science.

While mapping visual styles against visual relationships helps develop system rules, it's just a starting point.

‍

Because the human eye isn't able to see as a computer does, designers need to factor optical harmony into a system. Not everyone perceives visual elements the same way physically, cognitively, and culturally.

Visual styles affect visual relationships.

Visual relationships found in product design often mirror visual relationships found in the material world. This diagram shows areas where styles most frequently contribute to building visual relationships.

A type scale is the starting point to a typographic system.

A type scale is a collection of text sizes that have relationships to each other. Different types of products may require different scales. A product with multiple areas with copy or small text may be heavier on the smaller end of the scale. A product with a minimalist UI may feature multiple display styles and be heavier on the larger end of the scale.

Color systems ramp.

I create a tints and shades scale for every hue used in the system even though only a few values will end up being used.

This is an example of a balanced type scale

Using a type scale, we can draw contextual type styles to apply to our visual system. Weight, line height, and other type styles aren’t part of the scale but can factor into scale proportions.

Visual Systems

Visual systems design requires technical and visual approaches.

Design principles most applicable to product design include:

Balancing brand identity and product visual system.

Product considerations

Visual UI design can be technical but it isn’t an exact science.

common styles and where they are applied

Visual styles affect visual relationships.

A type scale is the starting point to a typographic system.

This is an example of a balanced type scale

contextual type styles

Color systems ramp.

tints and shade scale

Spacing system based on a 4/8pt grid.

explanation

Additional styles and foundations.

Balancing brand identity and product visual system.

Product considerations

common styles and where they are applied

Visual UI design can be technical but it isn’t an exact science.

This is an example of a balanced type scale

contextual type styles

explanation

Color systems ramp.

explanation

Balancing brand identity and product visual system.

Product considerations

Visual UI design can be technical but it isn’t an exact science.

Visual styles affect visual relationships.

This is an example of a balanced type scale

contextual type styles

explanation

tints and shade scale

Spacing system based on a 4/8pt grid.

Additional styles and foundations.

Balancing brand identity and product visual system.

Product considerations

Visual UI design can be technical but it isn’t an exact science.

Visual styles affect visual relationships.

A type scale is the starting point to a typographic system.

Color systems ramp.

This is an example of a balanced type scale

Spacing system based on a 4/8pt grid.

Balancing brand identity and product visual system.

Product considerations

Balancing brand identity and product visual system.

Product considerations

A type scale is the starting point to a typographic system.

Color systems ramp.