# Criterion 5 Component Guide: Interface Mock-ups In VCE Software Development, a **mock-up** is a detailed diagram that illustrates how a software module’s user interface (UI) will look and function. It is a critical deliverable under Criterion 5. --- ## 1. Mock-up vs. Sketch: The Difference Many students lose marks because their mock-ups look like rough sketches. It is important to distinguish the two: * **Sketches (Criterion 4):** Unrefined, rough drawings used during brainstorming. They explore layout ideas quickly. Sizing is approximate, and annotations only identify elements. * **Mock-ups (Criterion 5 - High/Very High):** Detailed, precise, scale diagrams representing the exact design to be programmed. Sizing, fonts, colors, alignment, and spacing must be defined. Annotations must **describe and justify** the appearance, structure, and functionality. --- ## 2. Essential Components of a Mock-up For every key screen, popup, or dynamic state in your software solution, your mock-up must specify: 1. **Layout and Sizing:** Grid alignment, screen dimensions (e.g., `1280px x 720px`), and coordinate positions of elements where relevant. 2. **Typography (Text Formatting):** Font family (e.g., Arial, Inter), size (e.g., `14pt`, `24px`), style (bold, regular), and text enhancements. 3. **Color Palette:** Exact Hex or RGB values (e.g., Background: `#F8F9FA`, Primary Button: `#007BFF`). 4. **UI Controls:** Text boxes, labels, buttons, dropdown menus, sliders, and checkboxes. 5. **Media Assets:** Placement, dimensions, and descriptions of images, icons, or visual data representations. --- ## 3. Visual vs. Structural Annotations Your mock-up should be surrounded by detailed annotations divided into two categories: ### A. Appearance (Visual Annotations) Define the static visual properties of the UI. * *Example:* `"Primary Button: Font: Roboto Bold, size 16px, color #FFFFFF. Background color #2A9D8F. Rounded borders (5px radius). Centered horizontally within the container. Contrast is used here to draw focus to the main action button."` ### B. Structure & Functionality (Behavioral Annotations) Define how the user interacts with the control, validation rules, and logic execution. * *Example:* `"Register Button: When clicked, the system executes validation checks (existence and type checking on input fields). If validation passes, a new user object is initialized and saved to the CSV file, and the user is redirected to the dashboard screen. If validation fails, error messages are dynamically rendered in red font (#E76F51) below the relevant input fields."` --- ## 4. Annotating for Design Principles and UX (Scoring 9–10) To achieve a **Very High** score, you must **justify** your design choices by linking elements directly to **Design Principles** and **User Experience (UX) Characteristics**. ### Example Mock-up Annotations: ``` +-------------------------------------------------------------------+ | [Logo] Dashboard [Profile] | <-- Annotation A +-------------------------------------------------------------------+ | | | Welcome, Admin! | <-- Annotation B | | | +--------------------------+ +---------------------------+ | | | Recent Logs | | Quick Stats | | | | | | | | | | - User A logged in | | - Active Users: 142 | | | | - Database backup ok | | - Memory: Normal | | | +--------------------------+ +---------------------------+ | | | | [ Add User ] | <-- Annotation C +-------------------------------------------------------------------+ ``` #### Annotation A: Navigation Bar * **Appearance:** Background color `#1D3557` (Navy) with white text `#F1FAEE` for headers. Font is `16pt` Inter Bold. Logo is left-aligned with a `15px` margin; profile icon is right-aligned with a `15px` margin. * **Functionality:** Clicking `[Logo]` redirects to home; clicking `[Profile]` opens a dropdown menu containing logout options. * **Justification (Design Principle - Balance):** The symmetrical placement of the logo and profile icon on opposite ends of the navigation bar creates a visual balance, preventing the interface from feeling cluttered or lopsided. #### Annotation B: Welcome Message * **Appearance:** Font size `24px` Inter Semi-bold. Left-aligned, color `#1D3557`. * **Justification (Design Principle - Text Formatting):** Sizing the title at `24px` and using bold text establishes a clear typographic hierarchy, instantly guiding the user's eye to identify the current page context. #### Annotation C: Add User Button * **Appearance:** Background color `#2A9D8F` (Teal), text `#FFFFFF` (White). Sized `120px x 40px` with rounded borders. * **Functionality:** Hovering changes background to `#264653` (dark teal) and changes cursor to hand pointer. Clicking opens the "Add User" popup window. * **Justification (UX - Affordance):** The rounded corners, distinct color contrast, hover states, and hand pointer shape give the user strong visual clues (affordance) that this element is an interactive button designed to be clicked.