Creating a user interface sketch

You can create a user interface sketch by selecting drawing elements in the sketching palette and dragging them to the sketching canvas. You can add reusable groups or elements, called "parts," to the sketch. You can also add existing images and sketches to the sketch.

About this task

To watch a movie that shows you how to create a sketch, click here.

Procedure

  1. Select a project and click File > New > User Interface Sketch.
  2. In the New User Interface Sketch window, type a name for the sketch.
  3. Browse to a project and a folder for the new sketch.
  4. (Optional) Add a tag to the new sketch.
  5. (Optional) Select a template for initial content for the new sketch.
  6. (Optional) Click Next and select the attribute groups that you want to apply to the sketch.
  7. Click Finish. The sketching editor opens.
  8. To add a drawing element to the sketch, in the palette, select the element and click a position for the element in the sketching canvas. You can "size and drop" by selecting an element in the palette, and then dragging a size for it on the canvas. Some elements, such as text areas, are enlarged to fill the size you draw; other elements, such as labels and text fields, are copied in multiple to fill the size.
  9. Right-click an element in the canvas to view a menu of actions that you can perform on the element, such as cut, copy, delete, edit text, or modify its properties and appearance.
  10. To add an image, a part, or a sketch, drag it from the Project Explorer to the editor or add it from the palette. When you add an image, part, or sketch from the palette, the Select window opens. In this window, search for and select the element. This creates an instance of the element in the sketch. You can modify parts and sketches globally or locally in the current sketch:
    • To change the original part or sketch, click the icon above a selected element in the sketch. The original part or sketch opens. Any changes that you make to the part or sketch, such as the content, format or location, are reflected in all instances of the part or sketch in other sketches, provided that the original element has not been overridden in another sketch.
    • You can change an element in the local instance of the part or sketch. This local instance overrides the inherited element in this sketch; for example, if your sketch includes a part that displays a menu, you could change the format of one command in the menu to show that it is selected. The original part remains unchanged. If you want to revert to the original content of the element, you can select the element and click the Revert Changes icon above the element.
  11. Click File > Save.

    You can create a user interface sketch from within a business process sketch. Right-click a business process element and click Elaborate With New Sketch. The new user interface sketch is added as a link at the process element.

    You can create a user interface sketch from within a screen flow. In a generic element, click the New Sketch icon, or right-click the element and click Associate > New Sketch.

    You can add your user interface sketch to the frame of a storyboard by dragging the sketch element from the palette to the storyboard frame editor. You can also add it to a screen flow by dragging it to a generic element or anywhere in the screen flow editor.


Feedback