When prototyping new interactive elements for an app, it is often helpful to scaffold the layout to show how the pieces fit together. There are a few problems with this approach.
- It can take a lot of dev work to essentially rebuild an app layout just to explore a small, yet significant, interaction.
- Getting the right level of abstraction is tough. If you make the prototype look exactly like the live app, you’re inviting the team to talk about design issues unrelated to the problem at hand.
With that in mind, v1Labs recently started a new open source component framework called Protovue. The goal is to give designers & developers a tool to assemble an abstracted layout to frame a prototype in under 5 minutes.
If you are using CodeSandbox, just add
v1labs-protovue as a dependency. To add to a local Vue.js app run:
$ npm install v1labs-protovue --save
$ yarn add v1labs-protovue
Then add Protovue as a plugin when you initialize Vue.
import Vue from "vue";
import Protovue from "v1labs-protovue";
Setting up the grid
By default, grids are designed to be
100% tall. It is a good idea to add your grid as the first element of
The above grid is
12 columns x
10 rows with a
10px gap between cells. Also note the
guides attribute. This shows a grid of blue lines designed to help you lay out your cells. You can remove it once you place all your cells.
The grid with guides should look like this.
First let’s add a cell to represent the navigation.
In this case we just want a cell that spans
12 colums and
1 row. It should look like this.
Now for the left sidebar.
3x9 cell has a
y="1" attribute which offsets the cell 1 row from the top.
The right sidebar is very similar to the left.
We made it
1 column narrower and offset it
10 columns from the left.
Getting the hang of it? Now let’s add the main content cell and the footer cell.
You’ve now placed all your cells so remove the
guides attribute from
. This is what you should have so far.
Adding a mock navigation
In your first cell, add a
Left sidebar content
- The image element is
- The text is
centeredwidth 3 rows.
- The avatar element repeats 6 times.
Right sidebar content
Similar to the left content elements. Note that adding
middle to a cell vertically centers content.
Easy enough. Just added a
Ready to start prototyping
It only takes a few lines of code to scaffold your app.