Web Builder

UI Design

Project: School Management Website
✓ Document Approved
This document has been approved and is currently locked.
Document Title
Status
Document Content
# UI DESIGN DOCUMENT

**Project Name:** School Management Website
**Document Version:** 1.0.0
**Stage:** UI Design
**Author:** Software Project Architect
**Status:** Under Review

---

## 1. Overview & Objectives

### 1.1 Purpose

This document defines the pages, layouts, sections, components, navigation, and responsive UI structure for the **School Management Website**, based strictly on the Confirmed Requirements and the approved content of previous stages.

The UI Design translates the confirmed functional scope (Add, View, Edit, Delete, Search, Filter) into a screen-level blueprint that will guide the Coding Structure stage.

### 1.2 Governance Rules Applied in This Document

All items in this document are categorized as:

- **Confirmed UI Requirements:** UI structures that directly serve confirmed requirements (FR-1 to FR-6).
- **AI Recommendations:** Layout, component, and usability suggestions proposed by the architect.
- **Open Decisions:** Unresolved choices that this document must NOT silently resolve. UI alternatives may be shown, but no Open Decision is finalized here.

Per the Verification governance flow, no Open Decision may be converted into a Confirmed Decision within this stage:

```text
Open Decision
      ↓
AI Recommendation / Alternatives
      ↓
User Approval
      ↓
Confirmed Decision
```

---

## 2. UI Scope Alignment

### 2.1 Confirmed Features Covered by UI

| Feature ID | Feature | UI Surface |
| :--- | :--- | :--- |
| CF-01 | Add Student | Student Form Page (create mode) |
| CF-02 | View Student Directory | Student Directory Page |
| CF-03 | Edit Student | Student Form Page (edit mode) |
| CF-04 | Delete Student | Delete action on Directory + optional confirmation |
| CF-05 | Search Student List | Search control on Directory Page |
| CF-06 | Filter Student List | Filter controls on Directory Page |

### 2.2 Confirmed Data Fields to Display

`name`, `email`, `phone`, `course`, `admission_date`

### 2.3 Items Not Finalized in This Stage

The following remain Open Decisions and are treated in this document as alternative UI options, not finalized layouts:

- Authentication screen presence (OD-2)
- Course input widget type (OD-5)
- Search target fields (OD-3)
- Filter target fields and behavior (OD-4)
- Delete strategy — Hard vs Soft (OD-6)
- Pagination presence (OD-8)
- Email uniqueness feedback (OD-7)
- Technology stack and database engine (OD-1, OD-9) — not UI-facing, out of scope for this document.

---

## 3. Page List

The confirmed functional scope maps to a minimal set of pages/surfaces:

| # | Page / Surface | Purpose | Confirmed Feature | Status |
| :- | :--- | :--- | :--- | :--- |
| P-1 | Student Directory Page | List students, provide search & filter, expose Add/Edit/Delete actions | CF-02, CF-04, CF-05, CF-06 | Confirmed UI Requirement |
| P-2 | Student Form Page (Add mode) | Create a new student record | CF-01 | Confirmed UI Requirement |
| P-3 | Student Form Page (Edit mode) | Modify an existing student record | CF-03 | Confirmed UI Requirement |
| P-4 | Delete Confirmation Modal | Confirm before deleting a student | CF-04 | AI Recommendation (REC-01) |
| P-5 | Empty State / No Results View | Shown when directory has no records or no matches | CF-02, CF-05, CF-06 | AI Recommendation |
| P-6 | Success / Error Notification (Flash) | Feedback after create/update/delete | CF-01, CF-03, CF-04 | AI Recommendation |
| P-7 | Login / Access Gate (Conditional) | Only if OD-2 resolves to requiring authentication | OD-2 | Conditional — Open Decision |

**Note:** P-7 is shown as a placeholder only. It is not part of the Confirmed UI scope and must not be designed in detail until OD-2 is resolved through the governance flow.

---

## 4. Global Layout & Navigation

### 4.1 Layout Shell

| Region | Content | Status |
| :--- | :--- | :--- |
| Header | Application title ("School Management"), primary navigation | AI Recommendation |
| Primary Navigation | Link to Student Directory; optional link to Add Student | AI Recommendation |
| Content Area | Page-specific content (directory, form, etc.) | Confirmed UI Requirement |
| Footer | Lightweight footer (app name/version) | AI Recommendation |
| Flash Message Area | Success / error banners near top of content | AI Recommendation |

### 4.2 Navigation Model

- Simple top-level navigation with the Directory as the primary destination.
- "Add Student" reachable from the Directory via a primary button (rather than a top-level nav item), keeping navigation minimal.
- No multi-tier navigation is introduced, keeping the navigation aligned with the currently confirmed functional scope.

**Classification:** AI Recommendation (pattern), consistent with confirmed scope.

### 4.3 Access Control Surface

The layout may optionally wrap in an authentication gate. This remains an **Open Decision (OD-2)** and is not designed in detail here.

---

## 5. Page Layouts

### 5.1 Student Directory Page (P-1)

**Purpose:** Central view for CF-02, CF-04, CF-05, CF-06.

#### Layout Structure

```text
┌─────────────────────────────────────────────────────────┐
│ Header / Navigation                                      │
├─────────────────────────────────────────────────────────┤
│ Page Title: Students        [ + Add Student ] (button)  │
├─────────────────────────────────────────────────────────┤
│ Directory Controls                                       │
│  [ Search input ]   [ Filter: Course ]  [ Filter: Date ] │
│                     [ Reset Filters ]                    │
├─────────────────────────────────────────────────────────┤
│ Student Directory Table                                  │
│ ┌────┬────────┬──────────┬────────┬───────┬──────┬─────┐ │
│ │ #  │ Name   │ Email    │ Phone  │Course │ Adm. │ Acts│ │
│ ├────┼────────┼──────────┼────────┼───────┼──────┼─────┤ │
│ │ .. │ ...    │ ...      │ ...    │ ...   │ ...  │E D  │ │
│ └────┴────────┴──────────┴────────┴───────┴──────┴─────┘ │
├─────────────────────────────────────────────────────────┤
│ Pagination Controls  (Conditional – OD-8)                │
└─────────────────────────────────────────────────────────┘
```

#### Sections

| Section | Contents | Status |
| :--- | :--- | :--- |
| Page Header | Title + Add Student button | Confirmed UI Requirement (entry to CF-01) |
| Directory Controls | Search input, filter controls, reset | Search & Filter controls — Confirmed UI Requirement; specific field selection is Open Decision (OD-3, OD-4) |
| Directory Table | Columns: Name, Email, Phone, Course, Admission Date, Actions | Confirmed UI Requirement |
| Actions column | Edit action; Delete action | Confirmed UI Requirement (CF-03, CF-04) |
| Pagination | Page controls | AI Recommendation (OD-8) |
| Empty State | Message when no records/no matches | AI Recommendation |

#### Filter Controls — Alternatives (OD-3, OD-4, OD-5)

| Control | Alternative A | Alternative B | Status |
| :--- | :--- | :--- | :--- |
| Search bar | Single input | — | Confirmed control presence; exact target fields pending (OD-3) |
| Course filter | Free-text input | Dropdown of courses | Alternatives only (OD-4, OD-5) |
| Admission date filter | Exact-date input | Date-range inputs | Alternatives only (OD-4) |

The layout must reserve space for filter controls without locking in a specific variant.

---

### 5.2 Student Form Page — Add Mode (P-2)

**Purpose:** Create a new student record (CF-01).

#### Layout Structure

```text
┌─────────────────────────────────────────────────────────┐
│ Header / Navigation                                      │
├─────────────────────────────────────────────────────────┤
│ Page Title: Add Student                                  │
├─────────────────────────────────────────────────────────┤
│ Student Form                                             │
│  Name            [____________________]                  │
│  Email           [____________________]                  │
│  Phone           [____________________]                  │
│  Course          [____________________]   ← variant OD-5 │
│  Admission Date  [____________________]                  │
│                                                          │
│  [ Save ]   [ Cancel ]                                   │
└─────────────────────────────────────────────────────────┘
```

#### Field Widgets

| Field | Widget | Status | Notes |
| :--- | :--- | :--- | :--- |
| Name | Text input | Confirmed UI Requirement | Trim / length rules are AI Recommendation |
| Email | Text/email input | Confirmed UI Requirement | Format & uniqueness validation pending (OD-7) |
| Phone | Tel/text input | Confirmed UI Requirement | Format rules AI Recommendation |
| Course | Text input **or** Dropdown | Confirmed field; widget Open Decision (OD-5) | Layout must accommodate either |
| Admission Date | Date input | Confirmed UI Requirement | Date picker is AI Recommendation |
| Save | Primary button | Confirmed UI Requirement | — |
| Cancel | Secondary button / link back to Directory | AI Recommendation | — |

#### Inline Validation Display (AI Recommendation)

- Reserve space below each field for a validation error message.
- Reserve a top-of-form area for overall error summary (AI Recommendation).
- Actual validation rules remain AI Recommendations and Open Decisions (OD-7 for email uniqueness).

---

### 5.3 Student Form Page — Edit Mode (P-3)

**Purpose:** Modify an existing student record (CF-03).

- Same field structure as P-2. Existing values may be displayed in the fields as an AI-recommended edit pattern.
- Page title changes to "Edit Student".
- "Save" updates record; "Cancel" returns to Directory.
- Record-identifier handling (via `{id}`) is consistent with Functional Logic recommendations.

**Classification:** Confirmed UI Requirement (surface); pre-population pattern is AI Recommendation.

---

### 5.4 Delete Confirmation Modal (P-4)

**Purpose:** Confirm the delete action before executing (CF-04).

```text
┌───────────────────────────────────────────┐
│ Delete Student                            │
│                                           │
│ Are you sure you want to delete this      │
│ student record?                           │
│                                           │
│         [ Cancel ]   [ Delete ]           │
└───────────────────────────────────────────┘
```

**Classification:** AI Recommendation (REC-01).

**Note:** The wording of the confirmation must remain neutral with respect to Hard vs. Soft Delete until OD-6 is resolved.

---

### 5.5 Empty State / No Results View (P-5)

**Purpose:** Provide clear feedback when no records or no search/filter matches exist (CF-02, CF-05, CF-06).

| Scenario | Message | Classification |
| :--- | :--- | :--- |
| Directory has no students at all | "No students have been added yet." | AI Recommendation |
| Search/Filter returns no matches | "No students match the current search or filter." | AI Recommendation |

Actions offered in empty state:
- Add Student button (when directory is empty).
- Clear Filters action (when filters produce no results) — AI Recommendation (REC-04).

---

### 5.6 Success / Error Notification (P-6)

| Event | Notification Type | Classification |
| :--- | :--- | :--- |
| Student added | Success banner | AI Recommendation |
| Student updated | Success banner | AI Recommendation |
| Student deleted | Success banner | AI Recommendation |
| Validation failure | Error banner + inline errors | AI Recommendation |
| Unexpected error | Error banner | AI Recommendation |

---

## 6. Component Inventory

Reusable UI components used across pages:

| Component ID | Component | Used In | Classification |
| :--- | :--- | :--- | :--- |
| C-01 | App Header / Nav | All pages | AI Recommendation |
| C-02 | Flash Message Banner | All pages | AI Recommendation |
| C-03 | Page Title Bar | P-1, P-2, P-3 | AI Recommendation |
| C-04 | Primary / Secondary Buttons | P-1, P-2, P-3, P-4 | Confirmed UI Requirement (for actions tied to CFs) |
| C-05 | Text Input | P-2, P-3, P-1 (search) | Confirmed UI Requirement |
| C-06 | Date Input | P-2, P-3, P-1 (filter — conditional) | Confirmed UI Requirement for form; conditional for filter |
| C-07 | Select / Dropdown | P-2, P-3 (course — conditional), P-1 (filter — conditional) | Conditional on OD-5 / OD-4 |
| C-08 | Data Table | P-1 | Confirmed UI Requirement |
| C-09 | Pagination Bar | P-1 (conditional) | AI Recommendation (OD-8) |
| C-10 | Confirmation Modal | P-4 | AI Recommendation |
| C-11 | Empty State Panel | P-5 | AI Recommendation |
| C-12 | Inline Field Error | P-2, P-3 | AI Recommendation |

---

## 7. Responsive UI Structure

### 7.1 Breakpoints (AI Recommendation)

Standard responsive breakpoints are recommended (e.g., mobile, tablet, desktop). Exact pixel values are an implementation detail for the Coding Structure stage.

### 7.2 Directory Page Responsiveness

| Viewport | Table Behavior | Classification |
| :--- | :--- | :--- |
| Desktop | Full table with all columns | AI Recommendation |
| Tablet | Table retained; controls wrap | AI Recommendation |
| Mobile | Table may switch to card/stacked layout OR horizontal scroll | AI Recommendation |

### 7.3 Form Page Responsiveness

| Viewport | Form Behavior | Classification |
| :--- | :--- | :--- |
| Desktop | Single-column form, comfortable spacing | AI Recommendation |
| Tablet | Single-column form | AI Recommendation |
| Mobile | Single-column stacked fields | AI Recommendation |

### 7.4 Navigation Responsiveness

- Header collapses into a minimal menu on small screens.
- Primary navigation remains a single level.
- **Classification:** AI Recommendation.

---

## 8. UI States

Each page must define the following states.

### 8.1 Directory Page States

| State | Description | Classification |
| :--- | :--- | :--- |
| Default (with records) | Full or paginated table | Confirmed UI Requirement |
| Default (no records) | Empty state with Add prompt | AI Recommendation |
| Search active | Table shows matching rows or empty state | Confirmed UI Requirement (behavioral); matching fields Open Decision (OD-3) |
| Filter active | Table shows narrowed rows or empty state | Confirmed UI Requirement (behavioral); filter scope Open Decision (OD-4) |
| Search + Filter combined | Table reflects both | Confirmed UI Requirement |
| Loading | Placeholder / spinner | AI Recommendation |
| Error (data load failed) | Error banner and retry | AI Recommendation |

### 8.2 Form Page States

| State | Description | Classification |
| :--- | :--- | :--- |
| Empty (Add) | No fields filled | Confirmed UI Requirement |
| Pre-populated (Edit) | Fields filled from record | Confirmed UI Requirement |
| Validation errors | Inline + summary errors shown | AI Recommendation |
| Submitting | Save button disabled/loading | AI Recommendation |
| Success | Redirect to Directory + success banner | AI Recommendation |
| Failure | Error summary; form values preserved | AI Recommendation |

### 8.3 Delete Flow States

| State | Description | Classification |
| :--- | :--- | :--- |
| Confirmation shown | Modal visible | AI Recommendation |
| Cancelled | Modal closes; directory unchanged | AI Recommendation |
| Confirmed | Deletion executed per OD-6; success banner | Confirmed UI Requirement (execution); strategy is OD-6 |
| Failure | Error message; directory unchanged | AI Recommendation |

---

## 9. Open Decisions Affecting UI Design

This UI Design document does not resolve any Open Decision. The following decisions will directly affect UI layouts and are preserved from the Verification document:

| OD | Decision | UI Impact | Status |
| :--- | :--- | :--- | :--- |
| OD-2 | Admin authentication approach | Whether P-7 (Login/Access Gate) is required | Open Decision |
| OD-3 | Search target fields | Search placeholder/label wording and behavior | Open Decision |
| OD-4 | Filter target fields & behavior | Which filter controls appear; exact date vs range | Open Decision |
| OD-5 | Course input method | Free-text input vs dropdown in form and filter | Open Decision |
| OD-6 | Deletion strategy (Hard/Soft) | Wording of confirmation and any "archived" indicators | Open Decision |
| OD-7 | Email uniqueness constraint | Whether duplicate-email inline error UI is needed | Open Decision |
| OD-8 | Pagination requirement | Whether pagination bar (C-09) is rendered | Open Decision |
| OD-1 | Technology stack (language & framework) | Not UI-facing in this stage | Open Decision |
| OD-9 | Database engine selection | Not UI-facing in this stage | Open Decision |

Per the governance flow, these decisions require User Approval before they can be treated as Confirmed UI Requirements.

---

## 10. Confirmed UI Requirements Summary

| UI Requirement ID | Description | Traces To |
| :--- | :--- | :--- |
| UI-CR-01 | Directory page displaying student records with all five confirmed fields | CF-02 |
| UI-CR-02 | Add Student form with fields for all five confirmed data fields | CF-01 |
| UI-CR-03 | Edit Student form pre-populated with the record's existing values | CF-03 |
| UI-CR-04 | Delete action exposed per record, with execution of the chosen delete strategy | CF-04 |
| UI-CR-05 | Search control on directory | CF-05 |
| UI-CR-06 | Filter control(s) on directory | CF-06 |

---

## 11. AI Recommendations Summary

| REC ID | Recommendation | Related Prior Recommendation |
| :--- | :--- | :--- |
| UI-REC-01 | Delete confirmation modal before executing deletion | REC-01 |
| UI-REC-02 | Inline + summary validation feedback on forms | REC-02 |
| UI-REC-03 | Pagination bar on directory (conditional on OD-8) | REC-03 |
| UI-REC-04 | Reset Filters button on directory | REC-04 |
| UI-REC-05 | Empty state panels for no records and no results | — |
| UI-REC-06 | Success / error flash banners | — |
| UI-REC-07 | Responsive layout with breakpoint-specific table/form behavior | — |
| UI-REC-08 | Consistent component inventory (buttons, inputs, table, modal) | — |

---

## 12. Web Builder Workflow & Next Steps

### 12.1 Workflow Position

```text
Project Understanding
        ↓
Project Proposal
        ↓
Logical Roadmap
        ↓
Database Design
        ↓
Functional Logic
        ↓
Verification
        ↓
UI Design         ◄ [CURRENT STAGE]
        ↓
Coding Structure  ◄ [NEXT STAGE]
```

### 12.2 Next Steps

1. Review and approve this **UI Design Document**.
2. Resolve or formally defer the Open Decisions listed in Section 9 as they affect UI layout and interaction. Open Decisions that directly affect implementation should be resolved or explicitly deferred before Coding Structure finalizes the affected implementation areas. In particular, OD-2, OD-3, OD-4, OD-5, OD-6, and OD-8 should be reviewed before finalizing their corresponding code structures.
3. Proceed to the next stage: **Coding Structure**, where the file/project structure, module organization, and code-level scaffolding will be defined based on the approved UI Design, Functional Logic, and Database Design.

### 12.3 Governance Note

- This document does not convert any Open Decision into a Confirmed Decision.
- If any Open Decision is resolved after this document is produced, the affected sections of this UI Design document must be updated to reflect the confirmed choice before Coding Structure proceeds.

---

## Final UI Design Status

**UI Design Status:** Under Review

The UI Design reflects the confirmed functional scope (Add, View, Edit, Delete, Search, Filter) and confirmed data fields (name, email, phone, course, admission_date). All optional UI surfaces (delete confirmation, pagination, empty states, flash notifications) are labeled as AI Recommendations. All unresolved choices (authentication screen, search/filter scope, course widget, deletion strategy wording, pagination presence) remain Open Decisions and are preserved without silent resolution.
✓ Approved & Locked Cancel
Stage Information
UI Design

Project ke pages aur user interface ka structure plan karna.
Expected Output

Page list, layouts, sections, components, navigation and responsive UI structure.
Previous Stages
Project Understanding
✓ Available
Functional Logic
✓ Available
Verification
✓ Available
AI Generation
Stage Ready
All required previous stages are approved.
✓ This document is approved and locked.
Rework with AI
✓ Document Approved
Rework is disabled because this document has been approved.