Please follow the guidelines and restrictions listed below while designing your custom office layout.


Design Specifications

  • You can use any design tool like Adobe Illustrator/Sketch, here are some ideas for you. However, the final floor plan must be shared in SVG format.
  • The full floor plan layout 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 blue)

https://storage.crisp.chat/users/helpdesk/website/adec4cbfbe984000/core-office-area_15dp24x.png

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


SVG file requirement

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

https://storage.crisp.chat/users/helpdesk/website/adec4cbfbe984000/export-options_owq5ps.png

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

https://storage.crisp.chat/users/helpdesk/website/e439abdb27f7c000/5e4e4c42-165d-452f-870a-3715b3_m04jai.png

https://storage.crisp.chat/users/helpdesk/website/adec4cbfbe984000/ai-layers_2aypkj.png

Sample Design with layer names View full image


Samples

References

Sample SVG

Sample AI


Conference Area

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


Table/Room:

  • In your design file, the room 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 room layer name will be used to create a unique code for identifying the room. For example, if you set the layer name for a room as “table-first table“, the “first table” text will be used as code for identifying the room. Please make sure all the room layer names are unique and in English.
  • For positioning table name inside the room, create a text element inside the room. This text element should have a layer name starting with “name". These will automatically be aligned to the center.


Seats

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


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: Here's a helpful tool: 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 the after output decimal to 2. The SVG and design may be distorted, so the designer will need to correct the output file before handing it over.

Where to upload?


Click the Need Help button in Remo Office space and upload the SVG file.