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.

OPEN UI-EDITOR-ANNOTATE:  THIS WILL LOAD THE DESIGN FILES AND BOXES CREATED IN THE WIREFRAME STAGE. YOU CAN ADD, DELETE, MOVE, AND RESIZE BOXES HERE, NAVIGATING USING ARROW KEYS. 

INSTRUCTIONS:

• PRESS “RIGHT / LEFT ” TO NAVIGATE AMONG CHILDREN BOXES
• PRESS "UP / DOWN" TO NAVIGATE THE PARENT CHILDREN BOXES
• PRESS "F5/F6" TO NAVIGATE AMONG LEAF BOXES.
• PRESS "F1" TO MARK A CONTENT
• PRESS "F2/F3" TO MARK USER NAVIGATION BETWEEN PAGES AND VARIANTS

CONGRATULATIONS ON MAKING IT THIS FAR! YOUR CURIOSITY, INTEREST, AND PERSISTENCE WILL HELP YOU ACHIEVE YOUR DESIRED OUTCOMES. 

DON'T FORGET TO SAVE YOUR CHANGES.

OPEN UI-EDITOR-DATA:  THIS WILL ALLOW YOU TO DEFINE DATA TYPES, FORMULAS, AND VALUES, CREATING A STRUCTURED DATA SYSTEM FOR THE APP

INSTRUCTIONS:

• PRESS "F1" TO CREATE OR MODIFIY EXISTING DATATYPE.
• PRESS "F2" TO CREATE OR MODIFY EXISTING FORMULA.
• PRESS "F3" TO CREATE OR MODIFY EXISTING VALUES.

INSTRUCTIONS TO APPLY CHANGES

• OPEN ANNOTATE
• NAVIGATE TO BOX
• PRESS "F1 "
• CONFIRM INPUT NAME TYPE

DON'T FORGET TO SAVE YOUR CHANGES.

OPEN UI-EDITOR-DESIGN:  THIS WILL ALLOW YOU TO DEFINE DESIGN PROPERTIES, VALUES, AND GROUP PROPERTIES.

INSTRUCTIONS:

• PRESS "F1" TO CREATE OR MODIFIY EXISTING PROPERTY NAME AND VALUES.
• PRESS "F2" TO CREATE OR MODIFY EXISTING PROPERTY GROUP AND ITS VALUES.

INSTRUCTION TO APPLY CHANGES

• OPEN ANNOTATE 
• NAVIGATE TO A BOX
• PRESS "F4"
• ENTER THE PROPERTY / GROUP INDEX VALUE

DON'T FORGET TO SAVE YOUR CHANGES.