Destroy Fast and Move Faster with Sketch
By: Ridhima Gupta
Tags: Design, Data, Tips And Tricks, Invision, Sketch

Enterprise UX often deals with solving hard problems. At Juniper, we solve a lot of complex problems around networking everyday and a lot of them involve challenges around displaying large amounts of data.

When designing, working with real data is as crucial as sketching before you begin prototyping something. It surfaces unforeseen constraints early on in the process, elicits better feedback from stakeholders and it gives a real picture of what the design would look like when it gets built.

But working with real data is a time consuming process. As designers, we need to be able to quickly get feedback early on in the process and move forward quickly as in order to create good user experiences, rapid iteration is crucial.

And in the end, we often end up compromising either hi-fidelity or speed.

But why should we sacrifice one over the other when we can destroy fast and move faster, balancing both speed and fidelity?

Let me explain —

When laying out mockups, we usually begin by creating elements and laying them in a meaningful order to convey the design. At a later stage, if any edits are to be made, we have to go to each and every element to make the respective changes because we do not want to disturb the order we have spent so much time creating. This process becomes particularly harder when we are dealing with several different data points. For examples, many times I’ve had to quickly turn around updates to the order of columns in a grid right after a stakeholder review. Turned out I had grouped all of my grid elements in rows (damn it! If only I had known earlier — what a waste of time!).

But what if we don’t edit the different elements that we had earlier created, rather destroy and rebuild them once again, in no time?

I would call this the Destroy Fast and Move Faster technique. I’ll explain this further in the context of grids. Grids have been a tried and tested way to visualize large quantities of data for comparison and recognizing meaningful relationships. However, anyone who has ever laid out content for grids would know that it takes a lot of time to create and edit them.

The Destroy Fast and Move Faster technique explained

It involves the use of 3 different Sketch Features/Plugins — The new Scale feature in Sketch 39, CRAFT and RenameIt. These tools have been around for sometime now but I’ll try to tell you how to best use these three together to optimize your workflow when working with grids.

I’ve broken down the technique into 6 steps — I would encourage you to follow along these steps in Sketch as you read through them.

1. Create a table cell

Create a rectangle of height equal to your cell height and any width. Add a text box in it and add a rectangle for margin. Set the text layer and the margin layer to pin to corner and the rectangle to stretch. Now group these 3 layers and rename it to Table Cell.

Tip: Rename your layers in the beginning itself — before you start duplicating them. Use ⌘ + R to quickly rename a selected layer and use Tab/Shift+Tab to quickly move between layers while renaming.

Tip: Always use inner shadows to create dividing lines in your grid. Never create even a single line that you would have to duplicate later. Always use a rectangle. I’ve used a -1px inner shadow in this rectangle, which when repeated would create those grid lines for me effortlessly.

2. Create a table header cell

Add the styling that you want and place it right below the first one.

3. Duplicate horizontally

Hide the Margin layer and then duplicate this cell horizontally to create columns. You can easily add more columns later. We’ll soon see how.

Next, edit the text fields to the categories of data that would be displayed in the grid.

Tip: Use option + drag to duplicate a group and command + D to create a subsequent duplicate which would follow the same rule.