Join Jason Osder for an in-depth discussion in this video Wireframing a navigation bar, part of OmniGraffle 5: Creating Web Sitemaps and Wireframes.
We are making some real progress on our wireframe, and we have reached a crucial stage. It's time to build the persistent Navigation bar, and navigation is a really important part of information architecture, and it manifests for the first time on the wireframe. Now there is plenty to think about and talk about when it comes to navigation, but if we build this carefully in OmniGraffle, it is going to help our process later, because it is going to be flexible and easy to change. So anything that comes up, we should be able to deal with it, if we just build this smart.
I am starting with a diagram that's already been started, and we have a background layer that's locked in place, plus a number of content elements that have sort of just been thrown out there to work with later. They are not really placed yet. I need to add the Navigation bar as the final element that will let me place these things, and I am going to build it starting with a simple shape. I like that rectangle with the curved corners, and I am going to double-click it and write my first navigation term, which is FLOWERS.
Now Command+Minus will take the size of the text down until it's comfortable, and I just wanted to get this basically to sort of button dimensions. I might take down the Corner Radius to about 5, and that looks like one button. Now what I need is five buttons, and I know that from referring to the sitemap, and the way I am going to achieve that is with a table in OmniGraffle. So select the button and then Arrange > Make Table.
Tables in OmniGraffle are really useful for navigation, because it builds in that flexibility for later. So you will notice now that it's a table, I have got a different looking handle on the edges than the corners. This is a table handle, and if I drag it, I don't resize; I add rows to my table, to a total of five. Now, I can just double-click on each one and add the proper navigation word. That is pretty close.
I am going to work on the visual elements a little bit, because I feel like this is visually heavy right now, and I don't really want to imply these hard edges; it's really just structural. So I'd like to just knock the thickness of the rule down. There we go. You see how it seems lighter on the page now that I am not implying anything about the design? And from here, if I need to add more buttons, I can do that with our table handle, but I can also use the corners and adjust the size of the entire Navigation bar.
For now, I am going to make it take up the space between the logo and the edge. Now this isn't final navigation. That's a big point, because this can be massaged quite a bit. But for my first sort of stab at the navigation here, I'm going to go for something like this, and my thinking is as follows: I want the logo to be the Home button. I don't think we need to say Home on any of these buttons. I think it's convention these days that if you click the logo, you'll go Home. But I also want that logo as Home button to be in line with the rest of the navigation so it can sort of be part of the navigation, but also a design element, the logo, and that's sort of a theory on my part, something I am going to take to the team and say, do you like this as my first rendition of the wireframe? Well, navigation is truly at the heart of wireframing.
It's incredibly important to make these decisions as good as possible now, because changing something like the number of buttons on your persistent navigation later in the design or coding phase is going to be much more expensive, and deciding things ahead of time is the key to architecture, so that you have a smooth 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