With the large number of component systems under our belt, I’ve begun to significantly change the nature by which I construct combinations of objects and text within a page or component.

Up until now, nearly all wireframes are composed as a combination of many independent “objects,” those vector-based descriptions of a shape (e.g., gray outline box or drop down menu or popup icon) or text (e.g., “Submit” or “Spotlight Title”). By independent, I mean that each one is constructed and managed separately on the canvas. For complex UI, this becomes a vast array of overlapping anchors and segments that become more and more difficult to manipulate.

However, as my fluency in Adobe InDesign CS3 has increased, I’ve become more adept in utilizing three key features that simplify the complexity of component layout: inline objects inside objects, text wrapping, and greater use of tab stops and alignment.

Inline Objects Within Objects

InDesign enables you to paste not only text within an object’s frame, but also other objects. Therefore, you can flow text and objects (such as form elements, buttons, icons, or other simple elements) together and control alignment, spacing, and other attributes globally or by line.

In the screenshot displayed here, the example on the left shows the “old school” approach, with independent object frames for each label, each dropdown, and the title label. Painful to update if you are trying to change the format of all labels at once, or align them with form elements, or other manipulations.

On the right, a single “padded” container object (with gray stroke and 10pt padding on all four sides) contains a single inline series of labels and dropdowns. Granted, the dropdowns are sized specifically for this container width. But the text is far easier to type across fields, and after each label a simple CTRL-X pastes yet another dropdown. With a bit more familiarity with the Direct Selection tool (shortcut: A), you can even reach into the object frame and manipulate the dropdowns - objects within objects. No doubt this is a cleaner representation of the same content, both for creation and maintenance.

You can also explore making that container object have 2 or more columns and start using column breaks - then things get really fun!

Tab Stops & Alignment

So how about that text for every other month? Is that accomplished via a healthy dose of the spacebar? Nah, tab stops.

Opened via a shortcut (CTRL-SHFT-T), the overlaid tab ruler enables you to add tab stops easily to a single line of text. In this case, I wanted center-aligned stops for each month, more precisely aligning each stop with the embedded object below it. No problem - select the Centered icon, then click (and drag if necessary) for each stop. Once complete, close the Tabs dialog, and type & tab to your hearts content.

Such tab stop configuration is especially helpful for creating tables without tables, such as a checkout price summary where both the label and dollar value are right aligned. Using the tab ruler is far quicker for a set of 6 or 7 lines in that format than creating (and extensively deformatting) an InDesign table.

Not All Objects Go Inline

In some cases, it may be easier to overlay an image as an object separate from the object containing the text. With that approach, you can apply text wrapping attributes to the image so that the text in the container below will wrap / space appropriately.

In the example on the left, individual objects are used for the header, descriptive text, image, container, and learn more link. Ugh, so much manipulation. On the right, all text is embedded in a container object, and the image object is overlaid with text wrapping attributes so the text formats correctly.