Practicum Vol. 7: The Mobile Guide Wireframe Kit |

Use the PowerPoint version to create wireframes with drag & drop elements

Use the PDF version to import into design software or to print out

SOOO….WHAT ARE WIREFRAMES?

Wireframes are a tool used by designers to understand the basic structure and function of an app. Wireframes are often constructed using simple black and white shapes.

WHY DO WE USE WIREFRAMES?

Wireframing is a great way to figure out high-level page layouts and user flows, like a storyboard. As a way to help you wireframe quickly and simply, without getting too hung up on the visuals, we’ve created some assets for you to pull from for your next wireframe exercise.

EXAMPLE WIREFRAMES & FINAL PAGES

When designing a digital interactive (or website of any kind) it’s tempting to consider look & feel, layouts, and storytelling all at the same time. But this can be distracting and overwhelming. Putting aesthetic and granular detail aside, wireframes help stakeholders focus on high-level layouts and information flow (a.k.a. Information Architecture).

Below are some examples of CultureConnect Mobile Guide applications to illustrate what a wireframe looks like and how it can ultimately translate into a final page in an application.

TOUR AND STOP LIST

This example showcases the Stop List page. The top image shows a list of audio tours, once selected a user is taken to a list of stops on the audio tour. The wireframe does NOT discuss content – the actual images used or fonts or words.

DETAIL PAGES

Detail pages are our content-rich pages. They offer users a deeper dive into the mobile guide’s story. The above shows an example of a detail page from an Impressionist gallery, with an image carousel as well as a bookmarking feature. The wireframe does NOT discuss content (which objects, what text) or the look & feel.

IMAGE MOSAIC AND VOTING MODULES

Mobile guides offer many different engaging and interactive modules. The top image shows our image mosaic feature, which displays an array of images that scroll left to right and are populated via tagging. A user can quickly scan images to find one they’re interested in learning more about. The bottom image shows both the image mosaic and one of our scoring modules: the voting module which features a question prompt and image containers users tap to vote on. Once they vote, users can see the trending responses of others.

MENU PAGES

Menu pages are simple, but an essential part to any wireframe and user interface. Including a menu and supplementary pages in a sitemap, create a better understanding of how users will navigate through the application. The top image tells us that there will be several supplementary pages, including an “About” (which is displayed below).

GET YOUR WIREFRAME STARTER KIT (PPT)

GET YOUR WIREFRAME STARTER KIT (PDF)

3 EASY STEPS FOR CREATING WIREFRAMES

Step 1

Determine which pages you plan to include in your application. Commonly used application pages are homepages, tour lists, stop lists, and content detail pages.

Pro tip: Create a site map or a diagram listing all your application’s pages before you start to wireframe.

Step 2

Next, think about the elements on each page: Titles, subtitles, body text, media, buttons, navigation etc. Now arrange these elements on the page.

The Wireframe Starter Kit includes several wireframe examples aligned to some CultureConnect mobile guide pages to help you create apps for our platform, or use these as inspiration for your own apps.

While this Wireframe Starter Kit includes examples of Mobile Guides – check out our previous post on Advanced Interactive Wireframes!

Step 3

Assemble your wireframe with the elements in Wireframe Starter Kit. You can do this a few ways:

Drag and drop elements in the Powerpoint version.
Open the PDF version in your preferred design program (such as Adobe Illustrator).
Print out and cut out the shapes for an analog process.

Pro tip: Try several different wireframes for the same page. Moving the elements around may inspire you to tell the story in a new and exciting way.

GET YOUR WIREFRAME STARTER KIT (PPT)

GET YOUR WIREFRAME STARTER KIT (PDF)

SHARE YOUR WIREFRAMES WITH US!

Contact us here at hello [at] cultureconnectme.com or on Twitter