Post Image

Pages, Views and Navigation

by
Ben Gremillion
Ben Gremillion

Pages are individual designs that, when linked together, form a cohesive mockup. More than making distinct screens for sites and apps, you can use the sitemap to organize your work.

Managing pages in the sitemap

Pages can be created, nested, duplicated, and renamed in the Sitemap, a menu that contains a hierarchy of pages/views. You’ll find the Sitemap in the upper left corner of the editor.

Sitemap overview

To create a new page, click “new page” in the Sitemap. UXPin will immediately prompt you to give the page a name, then add the new page to the end of the Sitemap.

Page options: renaming, duplicating and deleting

Common functions appear when you hover over each page, turning it blue, in the Sitemap. You can rename a page by clicking its pencil icon, duplicate it by clicking the double-page icon, and permanently remove it by clicking the trashcan icon.

You can edit pages in the Sitemap

Build a hierarchy of nested pages

To keep your pages organized, you can drag and drop them into a hierarchy or logical structure for your reference. Push a page one level below another by dragging it into another page’s name. Remove a sub-page from its parent by dragging it out.

Nesting pages

Hierarchies do not affect links between pages, so you can rearrange pages at any time for your reference.

Linking pages

Any element in UXPin can become a clickable link to other pages. To make one so, click an element, and add a new interaction — the “lightning bolt” tab in the right-hand panel. Links are the default interactive type. Next, choose a page, then click “add,” and you’re done.

Adding a link

Copy/paste between pages

If you need to transfer certain elements from one page to another, you can do the obvious: copy them from one source and paste them in another.

Select the elements you want to copy, type cmd-C (Mac) or ctrl-C (Windows). Then choose another page and type cmd-V (Mac) or ctrl-V (Windows) to create the copy.

Of course, you can also use symbols to re-purpose elements for consistency’s sake.

Adaptive breakpoints

To practice responsive web design, each page can have a series of breakpoints in which you can change the page’s layout for differently-sized devices.

Making an adaptive version

Creating a new adaptive version will give each page its own new version — there’s no need to add, say, a wide website view for each page manually. And they’re not necessarily fixed. If you want to adjust a breakpoint after creating it, then edit “Canvas Properties” on the right when no elements are selected.

References

Ask a question







< User Guide table of contents

Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you