Please follow the guidelines and restrictions listed below while designing your custom floor plan.

Design Specifications

You can use any design tool like Adobe Illustrator/Sketch, but the final floor plan map image must be shared in SVG format.
Map size: The full map must fit within the max. resolution size in each of the Sketch/illustrator files (shown in light green below). The core conference area must be 16:10 aspect ratio (highlighted in red below)



Size of the avatar seat is 55px W x 55px H (including the 4px status ring size). Avatars will be rendered as a circular image.

SVG file requirement

While exporting your design as an SVG file, make sure the “Responsive” option is unchecked



If you have your custom fonts inside the floor plan, please embed these fonts as below in the final SVG file





Sample Design with layer names View full image

Conference Area

Create a layer named “conference area” for us to identify the main conference area in the floor plan.
This layer will be zoomed in to fit the users’ viewport/browser.
All the below layers (tables, seats, stage, sponsors) should be added within this layer

Table:

In your design file, the table section should be created with the layer name starting with “table-“ as in the above image. All elements inside this layer will be considered as part of the table. Dimensions like width, height, top, left will be calculated based on this tag.
The rest of the table layer name will be used to create a unique code for identifying the table. Ex: if you set the layer name for a table as “table-first table“, the “first table” text will be used as code for identifying that table. Please make sure all the table layer names are unique and in English.
Our algorithm will spread the attendees to tables evenly based on the order of the table layers. For example, first and second attendees will be placed in the first table and 3rd and 4th attendees will be placed in the second table. So, create layers in the order you want to spread your attendees
For positioning table names inside the table, create an empty text element inside the Table. This text element should have a layer name starting with “name"

Seats

Seats should be added inside the respective table layer created above
Each seat should have a layer name as “seat”  to identify the seats inside the table
We take only the top and left position, and the seat will be rendered as a circle.
The order of seats in the event floor plan will be the same as the order of seat layers inside the table.

Restrictions on Seats

Max. no. of seats inside the table is 6
Max. no. of users allowed on a floor is 100. Create a floor plan that can accommodate 120 seats, so there will empty seats for users to switch tables during the event.
You can have tables with less than 6 seats per table, but the total number of seats per floor has to be 120.

Left Billboard (Youtube video area)

This will be identified by the layer name “table-left-board“

Right Billboard (Agenda area)

This will be identified by the layer name “table-right-board“

Stage (only hosts/speakers can enter)

This will be identified by the layer name “table-stage“

Sponsors

Create empty layers with a layer name starting with “sponsor” as below in the correct position, as required
Order of sponsors will be determined by the order of the sponsors’ layers
Height and width of all sponsor layers should be the same



Final optimizations

Make sure the SVG output follows this guideline

https://css-tricks.com/high-performance-svgs/
Smaller sizes contribute to a faster loading time in our app. Optimal size: < 500kb
Use image compression tools after all validations are done: Ex: https://vecta.io/nano
If there are many elements and small items, it will lead to longer load time and sub-par experience when zooming and dragging the map
SVG export decimal (ignore If Sketch doesn’t have this option): Please set to 2. After output, the SVG and design may be distorted, so the designer will need to correct the output file before handing it to developers

References

Sample AI design file: https://drive.google.com/open?id=17_52inz9_JoN7TfwjSTKlrO1dKjqWzCJ
Sample SVG file: https://drive.google.com/open?id=1nlUpvDlchjqljOhPjrVz9QzyGonOWcGr

Where to upload?

 Click Need Help button in Remo conference page and upload the SVG file.
Was this article helpful?
Cancel
Thank you!