Ideas for indicating content outside of viewports (browser windows, iPhone screens, etc.)

UPDATE: Mockups now supports several controls with a breakline. You can learn more about breaklines in this release announcement.

Sometimes you want to mock up a box, but show it at a fixed size, or the content of the box gets too long to fit in your wireframe. But you may still want to show what the overflowed content is outside of the visible area or viewport. The typical case that we get asked about is how to show a fixed browser container or iPhone, but show that there's content that's not visible, that must be scrolled into view.

I typically use a breakline if I want to indicate continuation on a fixed box. The technique is to show one end of the box with a jagged edge.

If you want to do this using another container, for instance a web browser or mobile device you can also crop the container like I've done in this Custom iPhone symbol library:

To change the screen area, you'd then edit the group and resize the geometric shapes used there.

Hope this helps someone. Click the images above to go to the Mockups to Go pages and download the symbols libraries for these examples.

Mike for the Balsamiq Team


Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.