Canvas

Canvas is the background for laying any User Interface element in Tesseract Mixed Reality Design. The canvas defines the layout and arrangement that plays a huge role in defining the user experience from visual design standpoint.

Best Practices

Margins

Margins are the space between content and the left and right edges of the screen.

Margin widths are defined as fixed values at each Canvas size. To better adapt to the screen, the margin width can change at different Canvas size. Wider margins are more appropriate for larger screens, as they create more whitespace around the content.

Curved Edges

Curved edges are directly proportional to the Canvas Size. If canvas size increases then curved edges increases proportionately.

Example If Canvas size is = 1920px X 1080px ( x ) and Curved edges = 30px ( y ), then x and y scale proportionately.

Gutter

Gutters are the spaces between columns. They help separate content.

Gutter spaces are fixed values at each canvas. To better adapt to the screen, gutter width can change at different canvas size. Wider gutters are more appropriate for larger screens, as they create more whitespace between columns.

Designing Layout of Canvas

Columns

The Designing area of the screen contains columns which can refer to as content area. The number of columns displayed in the grid is determined by the Canvas size at which a screen is viewed. Vertical & horizontal Column Grid is used as a ruler to maintain design proportion.

Canvas

States

Transitions

Transitions

Front View

Isometric View

Appear

Disappear

As recommended earlier, use of Curved UI elements gives it a more sleek and futuristic look

Curved Canvas