📂
Design
  • Design and Interaction System
  • Designing for MR
    • Introduction - Design for MR
    • Content Placement in Mixed Reality
    • User's State of Experience
  • Visual Design
    • Introduction - Visual Design
    • User Interfaces in Mixed Reality
    • Scale, Depth & Size
    • Theme System
      • Color System
      • Typography
      • Shape System
      • Transition System
    • Components of Tesseract Mixed Reality Design
      • Typography
      • Button
      • Progress Indicator
      • Radio Button
      • Check Box
      • Keyboard
      • Toggle Button (Switch)
      • Video View
      • Voice UX
      • Canvas
      • Image View
      • Text View
      • Slider
      • Scroll View
      • Dialog Box
      • Dropdown
      • Pointer
      • Input Field
      • Search Bar
      • Tool Tip
  • Interaction Design
    • Introduction - Interaction Design
    • Multimodal Interactions
    • Voice
    • JioGlass Controller
    • Navigation System
      • States
      • Transitions
Powered by GitBook
On this page
  • Best Practices
  • Margins
  • Curved Edges
  • Gutter
  • Designing Layout of Canvas
  • Columns
  • Canvas
  • States
  • Transitions
  • Curved Canvas
  • Transitions
  1. Visual Design
  2. Components of Tesseract Mixed Reality Design

Canvas

PreviousVoice UXNextImage View

Last updated 2 years ago

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

Transitions

Transitions

Front View

Isometric View

Appear

Disappear