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.

2. We'll be focusing on the job listing area.

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

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

5. Here's the detail of the first 2 rows.

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

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

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

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

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

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

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

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

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.

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

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.

Filed under: Techniques

---

Comments

 

Post a comment

---