Join Jason Osder for an in-depth discussion in this video Using automatic layouts for sitemaps, part of OmniGraffle 5: Creating Web Sitemaps and Wireframes.
Alignment is definitely important for sitemaps, so that they look nice and clean and they communicate effectively. Do you want to try an advanced technique in OmniGraffle that allows you to align your diagram in one step? It also has some creative possibilities that I'd like to explore. This movie is about automatic layouts, which allows you to do both of these things. Let's take a look. I'm starting with a sitemap here, and it has a good deal of content, but it's not very neat-looking. Things that are on the same hierarchical level are all spread out and not really evenly aligned, and we've already seen how to deal with that using various Alignment tools, but now I want to deal with it using Automatic layout.
Watch closely, because this is going to happen quickly. Over here in the Inspectors, I've got my Diagram Layout Inspector, and I want to turn on Automatic layout. Did you see it? Look how quick it laid everything out and aligned. Now, you may not think all of this is perfect, but it is one step to neaten things up. You can now adjust from here if you prefer, say, the heading to be centered directly over the middle and adjust these lines and what have you. There's actually more going on with Automatic layouts though, because you can change, numerically, the Rank Separation.
That's the - in this case, the vertical hierarchy. So, if they're not too far apart, I can make it 1.5 inches and everything adjusts. Object Separation is about the lateral, or horizontal, separation of the items. So, if I take it down to zero, it squeezes together. Remember, each one of these is a group, which is why they're not actually touching. Zero is from the edge of the group to the edge of the group. There's other possibilities available with Automatic layout as well.
For starters, a hierarchical layout can be directional. So, it's traditional to go top-down, but if you want to see what bottom-up looks like, there it is. Now, obviously our line connections would need a little work to make this look good, but you get the idea. You can also go side-to-side, but top-down is standard. Just one more thing here, which is the other layouts available. I like these not because they frequently work for a final sitemap, but because they allow you to look at your content in different ways, which I think can be useful as part of your process.
So, look at these other layout types; Force-directed, and you have different controls with each, so I can make the line shorter and bring this in. This is what's called a Circular layout, and you can control the line length, and you also have a Radial layout. So as I said, these alternate looks are probably not as useful for sitemapping as the traditional hierarchical, but they are a way to play with your content and your sitemap to see if it looks better a different way, or even just teaches you something about the weight of your content.
Automatic layouts are a great way to make global layout tweaks. They don't give you as much fine control as alignment, but they interact with the entire diagram, setting up different layouts in one step. I find this extremely useful in my sitemap development process.
- Developing for interactive media
- Using shapes and lines for information architecture
- Working with text
- Using and customizing stencils
- Aligning, grouping, and locking objects
- Using automatic layouts for sitemaps
- Positioning content elements
- Iterating wireframes based on feedback
- Wireframing for mobile devices