1. WIREFRAME

---

• OPEN UI-EDITOR-WIREFRAME: THIS PROVIDES A LARGE CANVAS THAT ALLOWS YOU TO CREATE, MOVE, DELETE, AND RESIZE BOXES. THE BASIC UNIT IN UI-EDITOR IS A BOX (RECTANGLE).

• START A SIMPLE EXERCISE: REBUILD THE UI-EDITOR.COM SITE USING UI-EDITOR. THIS EXAMPLE SERVES AS A MINIMAL COMPOSITE OF A WEB APPLICATION.

STEPS TO FOLLOW:

1. PRESS “SPACE” TO CREATE A BOX.
2. MOVE FOCUS USING ARROW KEYS AND PRESS “SPACE” AGAIN TO CREATE ANOTHER BOX.
3. USE SHIFT AND THE ARROW KEYS TO MOVE THE BOX.
4. USE ALT AND THE ARROW KEYS TO RESIZE THE BOX.
5. PRESS "ENTER" TO PROVIDE A PATH TO DESIGN FILE. FROM A PUBLIC DOMAIN.

AFTER ADDING DESING IMAGE FILE, PERFORM STEP 1, STEP 2, STEP 3 AND STEP 4 TILL YOU HAVE CAPTURED ADDING BOUNDING BOXES ON THE DESIGN.

DON'T FORGET TO SAVE YOUR CHANGES.