Frames

Frames are used on deliverable pages to separate a piece of artwork (such as a screenshot, Photoshop page comp, or wireframe page) from any descriptive material or annotations beside the picture.

The Jagged Frame

One of the most common and recognizable frames in user experience deliverables is the “jagged frame” that has teeth at its bottom. This communicates that the screen design inside the frame is taller and extends beyond the frame’s viewable area, and so this frame type is included in the overall library.

Tip: when changing the height of the jagged frame, use the Direct Selection tool to select all the anchor points at the bottom of the frame, and then move them up or down. This will keep the frame’s jagged “teeth” at the same depth, instead of making them unattractively shallower (when height is reduced) or sharper (when height is increased).

The Library

In fact, EightShapes Unify comes with a range of useful starter frames. These include a browser window, email window, varied jagged versions, and storyboard tiles. The library even contains jagged separators for you to place on top of an initial frame to communicate that the initial frame shows the top and bottom of a page, such as search results.

Note that most of the frames in this library are sized to exactly fit the left 50% portion of a letter landscape deliverable page.

Frame Object Style

In fact, you need not open the frames.indl library to add a frame to your deliverable page. Instead, you can create a rectangle of any size and style it using the Frame object style.

How

• Open the frames.indl library as a panel in your workspace. Open the file /deliverables/_elements/frames.indl using File > Open or double clicking the file in Windows Explorer or Mac OSX Finder. Once open, drag an item from the panel onto your deliverable page.
• Place an object in a frame by using the File > Place command, copying a picture from your clipboard into it by selecting the object and then Edit > Paste Into, or dragging an image from Windows Explorer or Finder.

Training Videos

Introduction to using frames with EightShapes Unify deliverables:

Using multiple, stacked frames to show various “folds” of a screen design:

How the current frame object style will automatically fit your picture into the frame’s size: