Creating Your First Prototype

Teaser

At the end of this topic you'll have a prototype for a mobile app sign-up experience. After the user signs up, a success message appears. The user can then navigate to the content area of the app.

The image below shows an image from the Experience Flow prototype, which you can find on cloud.indigo.design. Also, check out our video on how to build this prototype!

In Brief

These are the main steps:

1. Creating a new project and screen.
2. Adding the sign up interaction.
3. Adding the submit interaction.
4. Adding navigation to another screen.
5. Sharing the prototype.

Step by step

(a-1) 1. Create a new project and screen.

1. In the Application menu click the Start a new Project button in the Open/New pane.

   

   Indigo creates a new empty project and takes you to the Project Home.

2. Select the Screen option from the dialog.

   

   Indigo creates a new blank screen for you. By default, the viewport is set to Generic.

3. Choose the iPhone 6 option from the Platform Picker.

   

4. Add elements to the screen.

   Use the Toolbox to drag and drop elements or Alt + click on the designer and then type the name of the element you want to add in the textbox.

   To follow this example, add Sign up and Sign in using Twitter buttons and an image.

   

   Use **Alt + click** or **Alt + drag** to quickly add elements. This way you can hide the toolbox and have even more design space!

(a-2) 2. Add the sign up interaction.

1. Select the Sign up button and click Add Interaction in the Properties Panel.

   

   Leave the default Taps option from the When User selection list.

   

2. Click on Change this Screen and then on To new State.

   

   You've created a new state for your screen. Now you need to make the changes that the user action causes in the screen.

3. In the new state, add a Container Box for the sign up form. Place it so that it covers the sign up and sign in buttons.

   

4. Double click the container to edit its content and add the form elements.

   To make it like the one in the example add a close icon, 3 textboxes for the account details, a button, and a text.

   

5. Add transparency to the image. You need to exit the container edit mode first.

   

6. Animate the changes.

   In the Timeline, drag the Add and Set opacity actions to give them a duration.

   

   Both actions, the dialog appearing and the image becoming more transparent, will happen gradually.

(a-3) 3. Add the submit interaction.

1. Add a tap interaction to a new state on the Sign up button in the container. This creates another state for this screen.

2. Move or remove elements to make room for the success message. Anything outside the canvas area won't be visible when you run the prototype.

3. Add some elements to communicate the success of the sign up process and a Continue button.

4. Add duration to some of the actions using the Timeline.

   

(a-4) 4. Add navigation to another screen.

Add an interaction on the Continue button. This time, instead of creating a new state, choose Navigate to Screen in project.

If the other screen doesn't exist, you can create it now, from inside the picker. This screen will show the app content, what the user sees after signing in.

(a-5) 5. Share the prototype.

1. Click on the Share prototype button in the Project Home to publish on cloud.indigo.design.

   

2. Share the generated link with your reviewers. They can view the prototype from device, no need for installs!

Learn More

Here are some suggested topics:

• Screens Overview and Key Concepts
• What Are Screens Good For?
• Creating Your First Storyboard