Share:

" /> Visio Guy » Design Web Pages With This Visio Breadcrumbs Shape
Home » Shapes, Web Design, Wireframes & IA

Design Web Pages With This Visio Breadcrumbs Shape

Submitted by on February 3, 2009 – 4:05 pm | | 34339 views 5 Comments

breadcrumbs-visio-shape-thumb

I’ve seen much buzz lately regarding breadcrumb shapes in Visio.

Evidently a lot of folks are using Visio for IA and wireframes. Yup, you can lay-out and design web-sites with good ol’ Visio!

So I decided to create a Visio Breadcrumbs Shape to help web-site designers more quickly finish their prototypes. This shape incorporates some smart-behavior that should save you a lot of time!

Visio Breadcrumb Shape Features

The Visio Breadcrumbs Shape has a whole bevy of features that warrant explaining. The items fall into five categories:

  • Item text
  • Outline style of the breadcrumbs
  • Item width and sizing
  • Position
  • Margins

Below, we see four breadcrumb shapes, stacked on top of each other to contrast the different item outline styles. But the image also shows two ways to get at the features for configuring the shape.

You can get to most of the features by right-clicking the shape, but to get to all of them, use the Shape Data window. The Shape Data window can be toggled on and off from the main View menu.

item-outline-types

click to view larger image

Item Text

The most important feature of the shape is the text for each breadcrumb item, of course!

To specify the items in the breadcrumb shape, you enter a semi-colon list of items in the Items field. For our example here, I’ve just entered:

Kingdom;Phylum;Class;Order

The shape comes pre-configured with the items:

Item 1;Item 2;Item 3; Item 4

Four is the maximum number of breadcrumbs that the shape supports.

Outline Style

The shape has four outline styles: Box, Arrow, Divider, Divider-Arrow.

item-outline-types

click to view larger image

Box and Arrow draw completely around each segment, while Divder and Divider-Arrow only draw between the segments. You can see it more clearly in this close-up:

breadcrumb-outlines-close-up

Item and Sizing

The breadcrumbs shape has two styles of sizing, or Item Width:

  • Adjust-To-Text Spacing
  • Equal Spacing

If you select Adjust-To-Text Spacing, then you won’t be able to re-size the whole shape. This is because the items will automatically size to enclose the text. You don’t need to fuss with the width of the shape at all!

item-outline-adjust-to-text

With Equal Spacing, however, the item widths are all equal. If you have four items, then each item will be 1/4th the width of the shape. The shape is also freely resizable, so you can stretch it to be as wide as the page, for example:

item-outline-equal-spacing

Position

There are five options for setting the position of the breadcrumbs shape:

  • Freely Position
  • Anchor Top-Left
  • Anchor Top-Right
  • Anchor Bottom-Left
  • Anchor Bottom-Left

When you drop the shape on the page, it is set to Freely Position, which means that you can freely re-position it anywhere you want on the page.

But if you are designing a site with many pages, you might want to position similar shapes in exactly the same position on every page. If so, then select one of the Anchor options, and the shape will snap into position when you copy/paste it!

Here we see two breadcrumb shapes anchored top-left and bottom right. We can easily copy these shapes and paste them into other pages without having to worry about positioning them accurately. The shapes take care of that themselves, automatically!

breadcrumb-shape-positions

 

Here we can see several pages with the breadcrumb shapes aligned at the top-left of the page.

breadcrumb-postions-on-pages

click to view larger image

The shape was simply configured on Page-1 with the single item: “Home”. This shape was then copied and pasted to Page-2 and Page-3, and the items: “Level 1″ and “Level1;Level2″ were subsequently added.

Margins

If you are using the automatic positioning, you can specify the margins that effect where the shapes anchor:

  • Left Margin
  • Top Margin
  • Right Margin
  • Bottom Margin

Just enter a numeric value for the margins that you care about.

If you’ve gotten this far, then you know all the ins and outs of the Visio Breadcrumb Shape, so happy designing!

Information Architecture and Wireframe Links

If you’ve found this shape useful and exciting, check out our other related links and downloads!

Article: Pixel Unit Dimension Line Shape

Article: Lorem Ipsum – Visio IA Text Placeholder Shape

Category:Wireframes & IA

Download the Visio Breadcrumbs Shape

You can get the shape here:

Visio Breadcrumbs Shape (75.12 kB) - 827

If you find this shape useful, but need an expanded feature-set, or other customizations, please feel free to contact me at:

and we can discuss a possible commission for further work.

Graphically Related

If you are looking for a shape that is similar to the breadcrumbs shape, but intended more for depicting processes in management presentations, be sure to check out: Automatic Chevron Process Shape.

5 Comments »

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*