Join Jason Osder for an in-depth discussion in this video Wireframing for mobile devices, part of OmniGraffle 5: Creating Web Sitemaps and Wireframes.
These days a lot of people don't use a computer at all to surf the web. They just use their phone or their mobile device. So for wireframing, we need to think about diagramming for these new devices, and that's what this movie is about. I'm starting here with a blank canvas. All I've done is changed it to landscape mode, a little wider than it is high. That will give me the space I need to do this type of wireframing in the way I like to do it. The next step is to shop for the stencil I need.
I'm going to do that in the Stencils palette and the search box. I need to make sure that this is set to Graffletopia, which is where I shop for stencils. Now I'm going to pick a search term, and I could pick mobile, but I actually think I'll get more results if I use the term iPhone. So now I've searched online, and I have several choices for an iPhone stencil. I'm going to try this one. I can only see it really small, so I'm going to go ahead and download it to get a better look.
That looks good to me. It has all the pieces and parts that I think I'll need to do this wireframe. Because I want to use it, I'm going to go ahead and install, but in no way am I might paint it into a corner. If there's something I need down the road that's not here, I can either build it myself or look at additional stencils. There's no problem mixing and matching. Now to get started, I'm going to drag this iPhone frame out onto the canvas. It's a little big to me. Now what I'm going to do is scale it down, because I like to actually fit two on this page.
I think that it's a little silly to make a mobile wireframe a whole page big, because in the real-world, it's not that big. I think that's going to be mis-informative. So I need to make two. I'm going to Option+Drag to create the other. If I hold Shift, it won't move up and down, and I'll keep them vertically aligned. There we go. Two frames, which will let me have plenty of space around them if I need any notations, or things of that sort. Now I actually want to give them two separate names, so I know what I'm wireframing at each place.
In the first instance, I'm going to wireframe Home. That's a little small to be a title, so keyboard commands, Command+Plus and Command+B for bold. That's looking like a good title. I'm going to Option+Drag it over here. If you see the way I'm using this snapping, nothing even comes out of alignment, and so I don't even have to worry about aligning it later. This one is called Choose City.
These are going to be the first two wireframes for my mobile application to order flowers online. My Home state is really just going to have the logo of the flower store, so I need to import that. That's easy: File > Place Image, find the image that I want, open it, then I always hold Shift when I scale something, especially a logo, because we want it to look all perfect.
That's step 1 of my wireframe. Step 2 of my wireframe - and we do need to keep in mind that that with less screen real estate, we need more separate screens, and therefore more separate wireframes. For Choose City, I just need to get a picker out of my stencil. I'm going to allow this box to resize pretty liberally, so it fits in there.
Then I'm going to put some cities in here, so it makes a little more sense. The text is a little big, but that's no problem. Now we have our next wireframe. Remember, unlike a web page, it's really typical to only have one function per screen on a mobile device. From here, we just continue the process.
We're going to need more pages, and each page will have two screens. When wireframing for mobile devices, a lot is similar, but there is a few things to keep in mind. First, shop for a good stencil that's really going to fit the look of what you're doing. It's going to make everything about your wireframe just look and feel more realistic. Second, be liberal with multiple wireframes. A mobile device has less screen real estate than a computer, and designing for mobile devices requires thinking about all of the steps and stages that are going to reach your interactive goal.
- 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