Double Diamond Develop Phase graphic

Develop: Interactive Wireframes

Now that you have described the various aspects of the ritual, you will create interactive wireframes for a mobile app.

The app should aid in the performance of your ritual. The app does not need to solve your subject's problems all by itself; it should act as a guide, instructional manual, supplemental tool, or other component of the ritual. The ritual can involve physical actions that take place outside of the app, in the real world, with other people, or in the user's mind.

Wireframes are informal sketches that help designers test their ideas so they can quickly iterate the design and gather feedback.

This process is important because it helps product designers make decisions before wasting resources on a final product that solves the wrong problem. Your wireframes should not include aesthetic decoration, complex color palettes, or final typography — those concerns of visual design would happen in the next phase of an app’s development, a high-fidelity mockup that finalizes the exact appearance before being given to developers to code the actual app.

You will create simple app screens using paper templates or simple digital designs. The sequence or collection of screen designs will then be placed into a digital tool to make them interactive — letting us click buttons and interact with the prototype as if it were a real app. The purpose of these wireframes is to quickly communicate to your peers how you intend to use a mobile device application to facilitate, generate, or expand upon a ritual.

Tools and Materials

  1. Pen or marker
  2. Assorted paper
  3. Scissors
  4. Ruler
  5. Cellphone Camera
  6. Figma Education account (free)
  7. Paper Prototyping PDF: PDF Download

Technical resources

Cropping images

You will be able to crop and adjust the color of your images in Figma (which you’ll use anyway for assembling your prototype), but you may wish to prepare your images beforehand. Here are some quick tutorials for cropping images.

💁 Figma tutorials are provided on the next page.**

Instructions**

A. Creating wireframes

  1. In your journal, you can list the parts of the storyboard that can translate into mobile application functions. For instance, if the ritual has a timer component, you can make a note that you'll need a visual (or audio) cue for the timer.
  2. Look at wireframing inspiration:
    1. Gallery of sketched wireframe images
    2. PageFlows (documentation of real app interaction flows)
    3. Laudable Apps (curated iOS app images)
    4. Dribbble (search for “wireframe” or “mobile app”)
  3. Create the app's interface screens using either of the following options:
    1. Method 1: Paper
      1. If you prefer to use pencil and paper, you can either draw the wireframes or download and print the Paper Prototyping PDF.
      2. Draw and cut out interface elements including buttons, images, icons, navigation, text, and other elements needed to prototype your app interface.
      3. Cut out reusable interface elements so they can be rearranged for each application screen.
      4. Arrange the components for each screen and take a picture with your phone's camera.
    2. Method 2: Digital designs
      1. Alternatively, you may create your screen designs digitally. Since the visual design is not complex, you could use any number of apps for this, but since we’ll be using Figma to add interactivity to the screens, I recommend simply using that, as Figma is a popular and capable UI design tool. Guidance on this will be provided on the next page.
      2. Note that digital designs should be mostly or entirely grayscale. They are still wireframes and should not feature aesthetic decoration.
  4. Crop any photographs to the crop marks.

B. Making an interactive prototype

Once you have your screen images prepared, download them onto your computer in a dedicated folder. Backup to cloud storage for extra security, such as your PSU OneDrive storage.

👉 Continue to the next page for guidance on using Figma to make your images interactive.

Submissions

Prototype Description

  • Start your description with the following: "This is a prototype for an app that..." To complete the sentence, synthesize your brainstorming and storyboard ideas.
  • Describe the ritual in detail and how the prototype app is intended to work. How does it support the ritual?
  • Write clearly, and check for grammar and spelling errors.

Instructions

  1. Create interactive wireframes using the prototyping instructions on the next page.
  2. Open the Presentation View of your app and click Share to get a public sharable link. Do not use the share-link for your main design file.
  3. Write a prototype description according to the requirements and include your public share link. (Check the link in a private-browsing window to ensure it works for other people.)

results matching ""

    No results matching ""