Using jigs when rendering screens

As part of most Cooper projects we create a visual styleguide that details all of the visual elements of the design. Additionally, we create detailed scenario renderings to illustrate the behaviors of the design. While the visual styleguide is the source of record for precise measurements, it is great if the detailed scenario renderings can follow the styleguide exactly. I’ve come up with a technique that I use to verify and correct the accuracy of my renderings in a quick, visual way.

When working with wood, it is very common to use a jig (a device for guiding a tool) to ensure accurate repeatable results. This same technique can be applied rendering screens; allowing you to easily check the position of design elements, and correct them as needed. The easiest way to explain this is to walk through an example.1. This example is a job search tool for traveling nurses. It shows a listing of jobs, and their locations on a map.
Step 1

2. We’ll be focusing on the job listing area.
Step 2

3. This is the final state that we’re aiming for:
The spacing is consistent and everything is in correct alignment.
Step 3

4. Here’s our before state:
The spacing and alignment are all over the map.
Step 4

5. Here’s the detail of the first 2 rows.
Step 5

6. Start by adjusting the elements in the first row to the correct positions.
Step 6

7. Once the first row is correct, it’s time to make the jig.
Step 7

8. On a seperate layer, draw rectangular elements that fill the space between the design elements.
Step 8

9. Add additional elements until all the important spatial relationships are expressed in the jig.
Step 9

10. Once the jig is complete, shift it into position over the next row.
Step 10

11. Adjust the position of the row elements until they have the correct relationship to the jig.
Step 11

12. When you’re done with the adjustments you will have a perfectly arranged row. Repeat for all the rows in the rendering.
Step 12

13. The final product has the correct relationships that the visual designer defined.
Step 13

While this technique works very well for repetitive elements on a single screen, it also works well for elements that appear on multiple screens. For example, the following pictures show some information about a specific nurse. The spatial relationship of the information should stay the same, but will vary as the scenario progresses.

Step 14

This jig expresses all the spatial relationships for this area, and can be used to check the position on other renderings.
Step 15

Using jigs isn’t the only way to solve this problem. Some applications (Fireworks in particular) provide symbol functionality that addresses many of these issues. But there isn’t always time to set up and configure a relatively heavy solution. Jigs can be created quickly, are simple to use and can be kept around for later re-use. I usually have a layer in my files dedicated to jigs—I just make the layer visible when I need to check the alignment.

Noah Guyot

Learn more

Subscribe to our mailing list and stay up to date on our latest thought leadership and learning opportunities.

Connect with us

Want to know how we can help your company drive real business progress?

Let’s talk

Stay up to date on our latest thought leadership and learning opportunities