Structure and hierarchy

blog-image

Overview

The content and information in tutorials need to be clear and easy to find. This sample shows how to achieve this by naming and numbering steps, and editing to simplify the language.

Before

  1. From the insert menu, select Indigo-Components, then Navigation and Navbar positioning the Navbar at the top of the artboard and stretching it to take up the full witdth available. With the Navbar selected, fix its height and fix it to the left, top, and right from the resizing section in the right panel. Looking at the overrides section below we will change the Type to ~Title and type “Sign Up” for the Text override below. Now let’s drag to the artboard an image, which we will use as a background and make sure that it is positioned below the Navbar in the layers panel on the left, which should look like this:

Single step with no name. Hard to follow.

After

Add the Navbar.

  1. From the Insert menu, select Indigo-Components / Navigation / Navbar.
  2. Place it at the top of the artboard and stretch it to take up all the width available.
  3. In the Resizing section of the panel on the right, fix its width and its top border to the artboard.
  4. In the Overrides section, set the Type to ~Title and the Text to “Sign Up”.

Clear purpose with named step. Numbered steps with simple language.

image2