Creating Your First Screen

Designing with Screens

Teaser

At the end of this topic you will have a screen with an interaction. When the user hovers the mouse cursor over a region of the screen, a menu is displayed to the right of the screen.

The image below shows an example screen, available in the RecipeLater prototype, which you can find on cloud.indigo.design.

In Brief

These are the main steps of the procedure:

  1. Creating a new screen.
  2. Adding elements to the screen.
  3. Adding an interaction.
  4. Making changes to the new state.
  5. Saving your screen.
  6. Running the screen preview.

Step by step

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

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

  2. Select the Screen option.

    Indigo creates a new blank screen for you. By default, the viewport is set to Generic, but you can choose any of the other options in the Platform Picker.

    Once you've selected the viewport, you can change the canvas size and background color using the Platform Properties Panel. For this example, use the default, Generic viewport.

    You can also resize the canvas by dragging from its bottom right corner.

    For more information on choosing a viewport and resizing the canvas, see Targeting Platforms and Screen Sizes.

(a-2) 2. Add elements to the screen.

  1. Click on the designer and press the Alt key at the same time.

    A textbox appears prompting you to type the name of an element.

  2. Type the word rectangle in the textbox.

    As soon as you start typing, several options will be displayed. You can continue typing to narrow your search. The highlighted option is the one selected when you hit Enter.

    You can also add an element to the screen by dragging it from the Toolbox.

  3. Drag to resize the rectangle.

    The number of pixels displays on the sides of the rectangle as you drag it. Drag until it's the same height as the screen and 86 pixels wide.

  4. Change the background color.

    As soon as you stop dragging the Properties Panel appears. Use the color picker to change the background color of the rectangle to black.

  5. Move the rectangle.

    Use the snap lines to center the shape and to place it to the right, outside of the screen canvas. This way, it won't be visible at first.

  6. Add icons and text.

    You need some icons or images with text beneath them to complete the menu. If you want high visual fidelity, you can use an image of the whole menu with hotspots like the one in the example prototype. But if you are looking for quick results, the icons available in Indigo may come in handy.

  7. Group the elements.

    Select the rectangle, the icons and text and press CMD/CTRL+G, or use the Group These action in the Properties Panel.

    Your menu is ready!

To select a single element within a group you can use double click or Space+click.

(a-3) 3. Add an interaction.

  1. Add a square hotspot in the bottom right corner of the screen.

    Hotspots are screen elements used to define special interactions. To see hotspots with defined interactions in the prototype viewer, toggle highlighting interactions.

  2. Select the hotspot and click the Add Interaction button in the Properties Panel.

  3. Select the Hovers Over option from the When User selection list.

  4. Click the Change this Screen button.

  5. Click the To New State button.

A new state is created for your screen. For more on this, see Adding Your First Interaction.

(a-4) 4. Make changes to the new state.

Move the menu group. Use the snap lines to make sure it's centered and aligned with the right side of the screen.

(a-5) 5. Save your work

  1. Right-click the Document Tab.

    The context menu appears.

  2. Select the Save option.

    The Save dialog appears.

  3. Select the project folder or create one.

  4. Click the Save button.

    You can choose to change the name of the screen at this point.

(a-6) 6. Run the screen preview.

Click on the Run Screen button at the top of the designer.

The preview opens in a new window. When you hover the mouse cursor over the bottom right corner of the screen, the menu appears. You can leave the preview window open and hit refresh to update changes as you make them in the designer.

You can use the toolbar on the left of the Prototype Viewer to restart the prototype, highlight interactions, and show or hide annotations. By default, interactions are not highlighted and notes are displayed. For more, see Viewing Your Prototypes.

The RecipeLater sample shows this as an animated change. To learn about how to animate an interaction, see Adding Animations to Your Interactions.

Learn More

Here are some suggested topics: