Motion principles

Motion principles

Motion principles

Motion principles


Adhering to motion principals as a designer helps create a uniform experience for our users as they move throughout the TELUS website. Be sure to check that your design follows the guides below. 

Topics

Topics

Fundamentals of motion

Learning the basics when creating motion graphics is key. As a designer you should be aware of hierarchy, feedback and personality when creating any moving component.

Learn more about fundamentals of motion

Fundamentals of motion

Learning the basics when creating motion graphics is key. As a designer you should be aware of hierarchy, feedback and personality when creating any moving component.

Learn more about fundamentals of motion

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Dimensional plane (X, Y, Z-axis)

Understanding how components move along a dimensional plane will help ensure correct grid use with designing motion. 

Learn more about Dimensional plane

Dimensional plane (X, Y, Z-axis)

Understanding how components move along a dimensional plane will help ensure correct grid use with designing motion. 

Learn more about Dimensional plane

Transitions

Motion communicates that a transition has occurred. Read the following guide to learn about different kinds of transitions along with feedback, status, and easing.

Learn more about transitions

Transitions

Motion communicates that a transition has occurred. Read the following guide to learn about different kinds of transitions along with feedback, status, and easing.

Learn more about transitions

The role of continuity

Continuity is extremely important for users as they interact with a product. Designing recognizable patterns can aid in the understanding of the product and ultimately create a more friendly experience.

Learn more about continuity

The role of continuity

Continuity is extremely important for users as they interact with a product. Designing recognizable patterns can aid in the understanding of the product and ultimately create a more friendly experience.

Learn more about continuity

Choreography

Sequencing movements in a predictable and intuitive way will help the user’s understanding of what is taking place on their page. Good choreography will help maintain the user's focus throughout multiple actions.  

Learn more about choreography

Choreography

Sequencing movements in a predictable and intuitive way will help the user’s understanding of what is taking place on their page. Good choreography will help maintain the user's focus throughout multiple actions.  

Learn more about choreography

Speed (Timing)

Proper timing ensures there are fewer complications with the user's flow throughout a task. There should be enough time passing to show an action has been triggered, but not too slow or fast so that the user misses it.

Learn more about speed

Speed (Timing)

Proper timing ensures there are fewer complications with the user's flow throughout a task. There should be enough time passing to show an action has been triggered, but not too slow or fast so that the user misses it.

Learn more about speed

Fundamentals of motion

Learning the basics when creating motion graphics is key. As a designer you should be aware of hierarchy, feedback and personality when creating any moving component.

Learn more about fundamentals of motion

Fundamentals of motion

Learning the basics when creating motion graphics is key. As a designer you should be aware of hierarchy, feedback and personality when creating any moving component.

Learn more about fundamentals of motion

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Dimensional plane (X, Y, Z-axis)

Understanding how components move along a dimensional plane will help ensure correct grid use with designing motion. 

Learn more about Dimensional plane

Dimensional plane (X, Y, Z-axis)

Understanding how components move along a dimensional plane will help ensure correct grid use with designing motion. 

Learn more about Dimensional plane

Transitions

Motion communicates that a transition has occurred. Read the following guide to learn about different kinds of transitions along with feedback, status, and easing.

Learn more about transitions

Transitions

Motion communicates that a transition has occurred. Read the following guide to learn about different kinds of transitions along with feedback, status, and easing.

Learn more about transitions

The role of continuity

Continuity is extremely important for users as they interact with a product. Designing recognizable patterns can aid in the understanding of the product and ultimately create a more friendly experience.

Learn more about continuity

The role of continuity

Continuity is extremely important for users as they interact with a product. Designing recognizable patterns can aid in the understanding of the product and ultimately create a more friendly experience.

Learn more about continuity

Choreography

Sequencing movements in a predictable and intuitive way will help the user’s understanding of what is taking place on their page. Good choreography will help maintain the user's focus throughout multiple actions.  

Learn more about choreography

Choreography

Sequencing movements in a predictable and intuitive way will help the user’s understanding of what is taking place on their page. Good choreography will help maintain the user's focus throughout multiple actions.  

Learn more about choreography

Speed (Timing)

Proper timing ensures there are fewer complications with the user's flow throughout a task. There should be enough time passing to show an action has been triggered, but not too slow or fast so that the user misses it.

Learn more about speed

Speed (Timing)

Proper timing ensures there are fewer complications with the user's flow throughout a task. There should be enough time passing to show an action has been triggered, but not too slow or fast so that the user misses it.

Learn more about speed

Tools

Tools

There are no tools associated with this standard.