Venice Interface Guidelines

Designing for Venice was at times an inconsistent process because the app was very customized in its design.

There was multiple duplication of assets and reusable components, frameworks and patterns were not being shared between teams. To solve this, the three of us decided to document every element within the app and create a centralized repository where building blocks for Venice would live.

What is it?

VIG started off as a side project and our hope was to make an internal website where anyone building for Venice could go to for reference. If someone needed a button, there would be no need to recreate a button from scratch, it would be available on VIG both for designers to use in their designs and for developers to grab a code snippet from—with a detailed description of how to use them.

Specs and measurements

When designing for Venice, we followed an 8pt grid system. We used what we call spaceblocks to lay out the screen. That allowed elements not to seem like they were floating randomly in space. The spaceblocks also helped developers to see more quickly how different elements were spaced on the screen relative to one another.

Motion design

We wanted to incorporate elegant motion to further guide and educate the user on what is happening, to give context, and furthermore to add more delight to the experience. We used framer.js to document these micro-interactions from which we could then extract values for developers.