Canvas
Last updated
Last updated
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.
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 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.
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.
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.
Transitions
Front View
Isometric View
Appear
Disappear
As recommended earlier, use of Curved UI elements gives it a more sleek and futuristic look
Transitions
Front View
Isometric View
Appear
Disappear
