VuMark Design Guide

A VuMark is a new kind of Vuforia target that can be customized to closely reflect a company’s brand identity.

It can both store encoded data as well as initialize an AR experience. One example of VuMark usage is for enterprises: by affixing VuMarks to their manufactured equipment, enterprises can both identify the piece of equipment and overlay augmentation that indicates how to use it.

This document will help you create your own VuMark.  It provides guidelines to help you design a VuMark that conforms to the requirements for making a functional VuMark that will perform well. Once you understand the design elements, and rules governing VuMark designs, you can implement your design in Adobe Illustrator to output an SVG file that will be used to generate your VuMark in the Target Manager, See: Designing a VuMark in Adobe Illustrator
Figure 1 - Example VuMarks

THE PARTS OF A VUMARK

VuMarks have five major parts that you will need to understand when designing your own.  

 
Figure 2 - VuMark Parts

⦁    Contour
The Contour is what the Vuforia computer vision algorithm first detects. After finding the contour, the algorithm looks for the code and “reads” it to identify the value or “ID” that is encoded within the VuMark.

The Contour is not explicitly drawn or visible in a VuMark design. Rather, the Contour is the line that appears where two other parts of the VuMark meet – the Border and the Clear Space. Essentially the Contour is defined by the contrast between the two different colors of the Border and Clear Space.

⦁    Border
The Border is typically the most identifiable and defining shape within the VuMark. In FIGURE 2, the Border is the outermost shape made of six straight lines forming a hexagon.

⦁    Clear Space
The Clear Space is the mandatory blank area that appears adjacent to the border along its entire length. The Clear Space can be either inside or outside of the border and is required in order to guarantee there is enough contrast for the algorithm to detect the Contour.

⦁    Code / Elements
Every individual VuMark contains a unique Code, which is a visual representation of the ID encoded in the VuMark.

The Code consists of Elements and the type of data and length of the value/ID that is encoded determine the number of Elements. The larger the value length, the larger number of elements that are required.

Every Element has 2 states: a “Dark” and “Bright” state. A unique code is generated by setting some of the elements in the Dark vs. Bright state (roughly 50% of Elements in each state).

⦁    Background / Design Area
The Background or Design Area is a layer where you can put any parts of the VuMark that are not used for detection. There is a lot of freedom in designing and placing the Background. We recommend to add graphically rich background if you plan to use VuMark for tracking as well.

DESIGN REQUIREMENTS

This section will help you design a VuMark that performs well in a variety of conditions. To do that you’ll need to take into account the following considerations and requirements.

Contour
The Contour is a part of the VuMark that is implied by the line created when placing the Border and the Clear Space next to each other.

⦁    The Contour must consist of straight lines that form a closed path.
⦁    The Contour must have at least 4 sides, and a maximum of 20 sides.
⦁    The Contour shall ideally not be rotational symmetric (as shown in lower row). If you decide to do, additional steps are necessary during design.
    

ILLUSTRATOR TIP: Create the Contour directly on the “VuMark-Contour” layer using Illustrator’s “Pen Tool”, by manually rendering the underlying contrast border between the Border and the Clear Space anchor-by-anchor.

⦁    The length of smallest side of the Contour must be at least 10% of the length of the largest dimension of the overall VuMark.
User-added image
⦁    The largest dimension is the larger of either the height or width.
⦁    The overall size of a VuMark will comprise all parts of the VuMark, including the Background.      


⦁    Maximum angle limit between contour segments is 150°. If you have designs where the angle is bigger, the VuMark may not work. Make sure to create less flat corners. Example (‘No’ example has top and bottom corner with very flat angles):    
Border & Clear Space
The Border and Clear Space share the same design requirements. These requirements guarantee that the Contour becomes a good quality contrast edge.

⦁    The width of the Border & Clear Space must be at least 5% of the length of the largest dimension of the overall VuMark.     
User-added image
⦁    The Border and Clear Space must be filled with a solid/uniform color; they can’t be transparent or set to ‘No fill, and can’t have a gradient or pattern fill.
⦁    Make sure these elements don’t use Appearance Attributes.
User-added image
⦁    There must be high contrast between the colors of the Border & Clear.

To ensure that there is enough contrast between the colors used for the Border and Clear Space, you should convert those colors to grayscale, and then inspect the “K” value of each color. There should be a “K” value difference of at least 30-40%, but more is better.

ILLUSTRATOR TIP: To find out the “K” value:  Select an object, then from the Illustrator menu choose: Edit  Edit Colors  Convert to Grayscale. Then using the Color panel, check the “K” value (your color space must be set to CMYK).
⦁    The Clear Space can be placed either inside or outside of the Border, so that the Contour is formed inside or outside of the Border.

ADVANCED TIP: Only the edge of the Clear Space that faces the Border must consist of straight lines and meet the length requirements described above.


Code / Elements

Determining the number of elements that your VuMark design must accommodate is an important detail to figure out up front. Your choice of what type of data and the length of that data or “ID” will determine how many elements will be needed in your VuMark.

There are 3 types of data that can be encoded:
 
Type Usage
String Printable ASCII characters
Numeric A number made up of the digits 0 - 9
Byte Any data in a byte format

The section ‘Using the Setup script’ later in this document explains how to calculate the number of elements that your design must have based on your data type and ID length. Following design requirements apply to the Elements:

⦁    Every Element must have a Bright and Dark state defined.
⦁    An Element’s Bright and Dark state are represented by different colors that have high contrast to each other. Ideally all Bright Elements have the same color, slight variation is acceptable. Same applies for Dark Elements.
⦁    When placing the elements brighter elements must go on the “VuMark-BrightElements” layer.

ILLUSTRATOR TIP: To ensure that there is enough contrast between the colors used for the Dark and Bright states, you should convert those colors to grayscale, and then inspect the “K” value of each color. There should be a “K” value difference of at least 30-40%, more is better.

⦁    The Bright and Dark states of any element must be in the exact same position (perfectly overlapping).
⦁    An Element’s size (both the height and width) must be at least 3% of the length of the largest dimension of the overall VuMark.
⦁    Each Element can be a unique size and shape provided the element meets the size requirement. Use filled paths or compound paths only. Strokes only will not work. Also don’t use grouped or layered items as Elements. Don’t use Appearance Attributes.
⦁    Elements don’t need to be adjacent – they can be scattered anywhere within the VuMark.
⦁    Elements can overlap with the Background/Design Area. They cannot overlap the Border, Clear Space or other Elements.
⦁    Elements can be placed inside or outside of the Border and Clear Space but the farthest Element must be no more than approximately 50% of the VuMark’s width from the border.

Design Tip – Using ‘Fake’ Elements
Sometimes it can be challenging to design your VuMark such that it has the exact number of required Elements, but there is a technique to make this easier to accomplish.

This technique involves creating more than the required number of Elements, and designating some of them as “fake” elements. They are “fake” in that they look like real elements but are actually not included in the Bright or Dark Elements layers – instead they are placed in the Background layer. Since anything in the Background layer is ignored by the Vuforia algorithm, your VuMark design technically has the exact number of required elements that the algorithm expects.

Example:  Your VuMark requires 122 Elements, but from a design perspective it is hard to arrange your Elements in an aesthetically pleasing way such that you have exactly 122 elements, but 128 elements fit nicely into your design. You would select any 6 elements that you want to be considered “fake” and move them to the Background layer.  
In the example below, this particular VuMark only required 122 Elements in its design, but the element layout worked best with 128 Elements. You can see that 6 of the Elements have been set to look like “Dark” Elements but have actually been placed in the VuMark-Background layer where they will not technically be treated as real Elements.


Figure 3 – Adding ‘fake’-Elements to the design


Background / Design Area
Since the Background / Design Area is not used for detection, there aren’t many requirements or limitations for what you place there. You have a lot of freedom to create a VuMark that expresses your brand or identity.  Background can be empty; it’s assumed to be white. Note that the background can influence the size of your VuMark which affects minimal size of Elements, and Border & Clear Space width requirements.

The companion article to this guide, Designing a VuMark in Adobe Illustrator, will show you how to implement these guidelines in Adobe Illustrator to output an SVG file that will be used to generate your VuMark in the Target Manager.