Step 1 of 3: Research & Design Requirements for "Training Course Builder"

Project Title: Training Course Builder Application

Step Description: This document outlines the comprehensive design specifications, wireframe descriptions, color palette, and UX recommendations for the "Training Course Builder" application. This application will empower users to create complete, structured training courses across any subject, incorporating modules, lesson plans, quizzes, hands-on exercises, and certification criteria.

1. Detailed Design Specifications

This section details the functional and technical requirements for the "Training Course Builder" application, focusing on core features and system capabilities.

1.1. Core Functional Requirements

• Course Creation & Management:

* Ability to create new courses with a unique title, description, subject category, and target audience.

* Edit, duplicate, archive, and delete existing courses.

* Set course status (Draft, Published, Archived).

* Upload a course thumbnail/banner image.

• Module Management:

* Create, rename, reorder, and delete modules within a course.

* Add module descriptions and learning objectives.

* Set module prerequisites (optional).

• Lesson Plan Editor:

* Rich Text Editor (WYSIWYG) for lesson content (text, images, embedded videos, audio).

* Ability to upload various file types (PDFs, PPTs, DOCs) as lesson resources.

* Structured content blocks (e.g., Introduction, Key Concepts, Examples, Summary).

* Support for code snippets with syntax highlighting (for technical subjects).

* Link external resources.

* Set lesson duration estimates.

• Quiz Builder:

* Multiple question types: Multiple Choice (single/multiple answer), True/False, Short Answer, Matching, Fill-in-the-Blank.

* Add explanations/feedback for correct and incorrect answers.

* Set passing scores for quizzes.

* Randomize question order and answer options.

* Question banking for reuse across courses/modules.

* Time limits for quizzes (optional).

• Hands-on Exercise Builder:

* Description field for exercise instructions.

* Upload starter files or templates.

* Define submission requirements (e.g., file upload, text input).

* Provide rubric/grading criteria for evaluators.

* Support for peer review setup (optional).

• Certification Criteria Definition:

* Define conditions for certification:

* Completion of all modules/lessons.

* Minimum aggregate quiz score.

* Successful completion/passing of specific hands-on exercises.

* Minimum time spent in course (optional).

* Design and upload custom certificate templates.

* Automated certificate generation upon criteria fulfillment.

• Content Library/Asset Management:

* Centralized repository for uploaded files, images, and videos.

* Categorization and search functionality for assets.

* Reuse assets across multiple lessons/courses.

• Course Preview:

* Real-time preview mode to view the course as a learner would experience it.

* Ability to preview individual lessons, quizzes, and exercises.

• User & Role Management (Basic):

* Administrator (full access to course builder and settings).

* Course Creator (access to create, edit, and publish courses).

• Save & Autosave Functionality:

* Automatic saving of progress while editing.

* Manual save option.

• Version Control (Basic):

* Ability to revert to previous saved versions of a lesson or course (optional, but highly recommended for content integrity).

• Publishing Workflow:

* Clear steps to publish a course, including a final review checklist.

* Unpublish option.

1.2. Technical Considerations

• Responsive Design: The application must be fully responsive, accessible on desktops, tablets, and mobile devices.
• Scalability: Architecture designed to handle a growing number of courses, users, and content.
• Security: Robust authentication, authorization, and data encryption to protect course content and user data.
• Accessibility (WCAG 2.1 AA): Adherence to Web Content Accessibility Guidelines for inclusive design.
• Performance: Optimized for fast loading times and smooth interactions, especially with rich media content.
• API Integration (Future-proofing): Design with a clear API layer to facilitate potential integrations with LMS platforms, analytics tools, or external content repositories.

1.3. Data Model Considerations (High-Level)

• Course: ID, Title, Description, Subject, Target Audience, Thumbnail, Status, CreatedBy, CreatedDate, LastModifiedDate.
• Module: ID, CourseID (FK), Title, Description, LearningObjectives, Order, Prerequisites.
• Lesson: ID, ModuleID (FK), Title, Content (JSON/HTML), Resources (Array of AssetIDs), EstimatedDuration, Order.
• Quiz: ID, ModuleID/LessonID (FK), Title, Description, PassingScore, TimeLimit, IsRandomized, Questions (Array of QuestionIDs).
• Question: ID, QuizID (FK), Type, Text, Options (for MCQs), CorrectAnswer, Explanation, Points.
• Exercise: ID, ModuleID/LessonID (FK), Title, Instructions, SubmissionType, StarterFiles (Array of AssetIDs), Rubric.
• Asset: ID, Filename, URL, Type (image, video, pdf), UploadedBy, UploadDate.
• Certification: ID, CourseID (FK), Title, Description, Criteria (JSON), TemplateID (FK).
• CertificateTemplate: ID, Name, HTML/SVG Template.

2. Wireframe Descriptions

This section describes the key screens and user flows within the "Training Course Builder" application, outlining their layout and primary components.

2.1. Dashboard / Course List View

• Layout: Grid or list view of all created courses.
• Header: Application Logo, User Profile/Settings, "Create New Course" button.
• Sidebar (Optional): Navigation to "All Courses," "Drafts," "Published," "Archived," "Content Library," "Settings."
• Main Content Area:

* Search bar and filters (by subject, status, last modified).

* Course cards/rows: Course Title, Thumbnail, Status (Draft/Published), Last Modified Date, Actions (Edit, Preview, Duplicate, Publish/Unpublish, Archive, Delete).

• Empty State: Prominent "Create Your First Course" call-to-action.

2.2. Course Editor (Main View)

• Layout: Two-panel or three-panel design for efficient course structuring.
• Header: Course Title (editable), "Save" button, "Preview" button, "Publish/Unpublish" button, "Exit Editor" button.
• Left Panel (Course Outline):

* Tree-view or collapsible list of Modules and their nested Lessons, Quizzes, and Exercises.

* Drag-and-drop functionality to reorder modules and content items.

* Context menu (right-click or ellipsis icon) for each item: "Add Module," "Add Lesson," "Add Quiz," "Add Exercise," "Rename," "Duplicate," "Delete."

* "Course Settings" link/button at the top of the panel.

• Central Panel (Content Editor):

* Contextual editor based on the selected item in the Left Panel.

* Course Settings: Fields for Course Title, Description, Subject, Target Audience, Thumbnail Upload, Certification Criteria.

* Module Settings: Fields for Module Title, Description, Learning Objectives, Prerequisites.

* Lesson Editor: WYSIWYG editor, content blocks, resource upload area.

* Quiz Editor: Question list, "Add Question" button, question type selector, question details editor (text, options, answers, feedback).

* Exercise Editor: Instructions field, file upload for starter files, submission requirements, rubric definition.

• Right Panel (Optional - Contextual Help/Properties):

* Displays properties of the selected element (e.g., Lesson word count, Quiz question count).

* Provides contextual tips or help articles.

* Version history (if implemented).

2.3. Asset Library Modal

• Layout: Full-screen modal overlay.
• Header: "Asset Library," Search bar, "Upload New Asset" button, "Close" button.
• Main Content Area: Grid or list of uploaded assets (images, videos, documents).
• Asset Card/Row: Thumbnail/icon, Filename, Type, Size, Date Uploaded, Actions (Insert, Preview, Delete).
• Filters: By asset type (images, videos, documents).

2.4. Certification Criteria Configuration

• Layout: Dedicated section within Course Settings or a separate modal.
• Main Content Area:

* Checkboxes/toggles for "Require all modules completed," "Require all lessons completed."

* Input field for "Minimum aggregate quiz score (%)".

* List of hands-on exercises with checkboxes to "Require passing."

* "Upload Certificate Template" section with preview.

* Fields for Certificate Title, Issuer Name, Date Format.

2.5. Course Preview Mode

• Layout: Simulates the learner's view of the course.
• Header: "Preview Mode" indicator, "Exit Preview" button.
• Sidebar: Course navigation (Modules, Lessons, Quizzes, Exercises) with progress indicators.
• Main Content Area: Renders the selected lesson, quiz, or exercise content as it would appear to a learner.
• Interactive Elements: Quizzes and exercises should be clickable/interactable to test flow, but not save progress or submit.

3. Color Palettes

A professional, clean, and inviting color palette will enhance usability and reduce cognitive load for course creators.

3.1. Primary Palette

• Deep Teal / Dark Blue (#004D40 / #1A237E): For primary branding elements, main headers, active states, and calls-to-action. Conveys professionalism and stability.
• Light Grey (#F5F5F5): Background for main content areas, providing a clean canvas.
• Medium Grey (#EEEEEE): Secondary backgrounds, card borders, subtle separators.
• Dark Grey (#424242): Primary text color for readability.
• Light Blue / Sky Blue (#BBDEFB / #90CAF9): Hover states, selected items, progress indicators. Provides a gentle contrast and indicates interactivity.

3.2. Accent & Feedback Colors

• Vibrant Green (#4CAF50): Success messages, "Published" status, positive feedback.
• Warm Orange (#FF9800): Warning messages, "Draft" status, pending actions.
• Deep Red (#F44336): Error messages, "Delete" actions, critical alerts.
• Soft Purple (#B39DDB): For specific interactive elements or to differentiate module types (optional).

3.3. Typography

• Primary Font: A clean, modern sans-serif font like "Inter," "Roboto," or "Open Sans" for all text.
• Headings: Bold, slightly larger variations of the primary font for clear hierarchy.
• Content: Standard weight and size for readability.

4. UX Recommendations

These recommendations aim to create an intuitive, efficient, and enjoyable experience for users building training courses.

4.1. Intuitive Navigation & Information Architecture

• Clear Hierarchy: Use a consistent left-hand navigation for course structure (modules, lessons) and a top-bar for global actions (save, publish, preview).
• Breadcrumbs: Implement breadcrumbs in the content editor to show the user's current location within the course structure (e.g., "Course Title > Module 1 > Lesson 3").
• Expandable/Collapsible Sections: Allow users to collapse modules or content sections in the outline to manage complexity in large courses.

4.2. Streamlined Content Creation

• Drag-and-Drop: Essential for reordering modules, lessons, questions, and assets.
• In-line Editing: Allow direct editing of titles and short descriptions without needing to open a separate modal.
• Template Library (Future): Provide pre-designed lesson templates or quiz structures to speed up content creation.
• Contextual Add Buttons: Place "Add Lesson," "Add Quiz," "Add Exercise" buttons directly within module sections or next to the item they would follow.
• Rich Text Editor Enhancements:

* Provide common formatting options readily available.

* Support markdown input for power users.

* Easy embedding of media (drag-and-drop files, paste video URLs).

4.3. Feedback & Guidance

• Autosave Notifications: Provide subtle, non-intrusive messages indicating when content has been automatically saved.
• Progress Indicators: Visually show progress when uploading files or publishing courses.
• Validation Feedback: Clear and immediate feedback on form inputs (e.g., required fields, invalid formats).
• Tooltips & Onboarding: Use tooltips for complex features and consider a brief onboarding tour for first-time users.
• Confirmation Dialogs: For destructive actions (e.g., deleting a module, unpublishing a course).

4.4. Efficiency & Productivity

• Keyboard Shortcuts: Implement common keyboard shortcuts for saving, undo/redo, and formatting.
• Bulk Actions: Allow selecting multiple items (e.g., lessons, questions) for bulk editing or deletion.
• Search & Filter: Robust search and filtering capabilities for courses, content library assets, and questions within the quiz builder.
• "Duplicate" Functionality: For modules, lessons, quizzes, questions, and exercises to rapidly build similar content.

4.5. Accessibility & Responsiveness

• Keyboard Navigable: Ensure all interactive elements are accessible via keyboard.
• High Contrast: Maintain sufficient color contrast for text and interactive elements.
• Alt Text for Images: Prompt users to add descriptive alt text for accessibility.
• Mobile-First Considerations: Design critical workflows to be fully functional and user-friendly on smaller screens, even if the primary use case is desktop.

4.6. Visual Consistency

• Component Library: Utilize a consistent design system and component library for all UI elements (buttons, forms, modals, notifications) to ensure a cohesive user experience.
• Iconography: Use a clear, consistent icon set that intuitively represents actions and content types.

By adhering to these detailed design specifications, wireframe concepts, color palette, and UX recommendations, the "Training Course Builder" application will be a powerful, user-friendly, and efficient tool for creating high-quality training content.

Training Course Builder: Design Specifications & UX Recommendations

This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Training Course Builder" platform. The goal is to create an intuitive, powerful, and aesthetically pleasing tool that empowers users to effortlessly design, build, and deploy comprehensive training courses.

1. Design Goals

Our primary design goals for the Training Course Builder are:

• Intuitive & Efficient: Enable users, regardless of technical proficiency, to quickly understand and utilize the platform's features for course creation. Minimize clicks and cognitive load.
• Flexible & Robust: Provide a wide array of tools and options to accommodate diverse course structures, content types, and assessment methods.
• Consistent & Predictable: Maintain a unified design language and interaction patterns across all modules to foster familiarity and reduce learning curves.
• Engaging & Professional: Present a clean, modern, and visually appealing interface that reflects the professional nature of educational content.
• Scalable: Design with future enhancements and integrations in mind, ensuring the architecture can support growth.
• Accessible: Adhere to accessibility best practices (WCAG 2.1 AA) to ensure the platform is usable by individuals with diverse abilities.

2. Detailed Design Specifications

2.1 Functional Requirements (Design Perspective)

The design will support the following core functionalities:

1. Course Creation & Management:

* New Course Workflow: A guided process for creating a new course, prompting for basic details (Title, Description, Category, Target Audience).

* Course Dashboard: An overview of all created courses with status indicators (Draft, Published, Archived), progress, and quick actions (Edit, Preview, Publish, Duplicate, Delete).

* Course Settings: Comprehensive settings for each course including:

* General Info (Title, Description, Thumbnail, Category, Tags).

* Access Control (Public, Private, Invitation-only).

* Pricing/Monetization (if applicable, placeholder for future integration).

* Branding (Course-specific logo, color accents).

* Completion Rules.

* Versioning: Ability to save drafts and publish distinct versions of a course.

1. Module Management:

* Module Creation: Easy addition of new modules within a course.

* Module Settings: Title, Description, Optional learning objectives, prerequisite modules.

* Reordering: Drag-and-drop functionality to reorder modules within a course.

* Status Indicators: Visual cues for module completion status (e.g., number of lessons complete).

1. Lesson Management:

* Lesson Creation: Adding new lessons within modules.

* Lesson Types: Support for various content types: Text, Video, Audio, Image Gallery, Document (PDF, PPT), External Embed (e.g., YouTube, Vimeo, interactive tools).

* Rich Content Editor (WYSIWYG):

* Standard text formatting (bold, italic, underline, headings, lists, quotes).

* Image upload and embedding with alt-text options.

* Video/Audio upload and embedding with caption/transcript options.

* Link insertion.

* Code block formatting.

* Table creation.

* Media Library: A central repository for uploaded media assets (images, videos, documents) for reuse across lessons/courses.

* Lesson Settings: Title, Description, Estimated completion time, Optional prerequisites, Drip-feed options (e.g., available after X days).

* Reordering: Drag-and-drop functionality to reorder lessons within a module.

1. Quiz Builder:

* Question Types:

* Multiple Choice (single/multiple correct answers).

* True/False.

* Short Answer (text input).

* Matching.

* Fill-in-the-Blank.

* Question Settings:

* Points/Weighting for each question.

* Optional feedback for correct/incorrect answers.

* Time limits per question or per quiz.

* Randomize question order.

* Question banks for reuse.

* Quiz Settings:

* Overall passing score.

* Number of attempts allowed.

* Review options (show answers immediately, after completion, never).

* Optional prerequisite lessons.

1. Hands-on Exercises/Assignments:

* Exercise Description: Rich text editor for detailed instructions, scenarios, and requirements.

* Submission Types: File upload (multiple formats), text input, external link.

* Evaluation Criteria: Rubric builder with customizable criteria and scoring.

* Peer Review: Optional setting for peer-to-peer assessment.

* Instructor Feedback: Dedicated section for instructors to provide feedback and grades.

* Due Dates: Set and manage deadlines.

1. Certification Criteria & Management:

* Criteria Definition: Define conditions for course completion and certification (e.g., complete all modules, pass all quizzes, submit all assignments).

* Certificate Template Designer:

* Placeholder for learner name, course title, completion date.

* Option to upload custom logo and background image.

* Customizable text fields and font choices.

* Digital signature/seal integration.

* Preview Certificate: Ability to see how the certificate will look.

1. Preview & Publishing:

* Live Preview: A dynamic preview mode that accurately simulates the learner experience for the entire course or specific modules/lessons.

* Publishing Workflow: Clear steps to publish a course, including confirmation and status updates.

* Unpublish/Archive: Options to remove a course from public view or archive it.

2.2 Non-Functional Requirements (Design Perspective)

1. Responsiveness: The user interface will be fully responsive, adapting seamlessly to various screen sizes (desktop, tablet, mobile) for both the builder and the learner experience.
2. Performance: The platform will be optimized for fast loading times and smooth interactions, even with media-rich content.
3. Accessibility: Adherence to WCAG 2.1 AA guidelines, including:

* Semantic HTML.

* Keyboard navigation support.

* Adequate color contrast.

* Screen reader compatibility (alt-text for images, ARIA attributes).

* Focus indicators.

1. Security: While backend, the design will consider secure input handling, appropriate data display, and clear user permissions.
2. Scalability: The design architecture will allow for easy integration of new features and handling of a growing number of courses and users.

3. Wireframe Descriptions

The following descriptions outline the key screens and their primary components.

3.1 Course Dashboard

• Header: Logo, User Profile (avatar, name, dropdown for settings/logout), "Create New Course" button.
• Sidebar Navigation (Left): "Dashboard", "My Courses", "Analytics" (placeholder), "Settings".
• Main Content Area:

* "My Courses" Section:

* Search bar and filters (Category, Status, Date Created).

* Card-based or list-based display of courses. Each card/row includes:

* Course Title, Thumbnail.

* Brief Description.

* Status (Draft, Published, Archived).

* Progress Bar (e.g., "7/10 Modules Complete").

* Last Edited Date.

* Action buttons/ellipsis menu (Edit, Preview, Publish/Unpublish, Duplicate, Delete).

* "Quick Stats" (Optional): Number of published courses, learners enrolled (placeholder).

3.2 Course Editor (Main Layout)

This is the primary interface for building a course.

• Top Bar: Course Title (editable), "Save Draft" button, "Preview Course" button, "Publish Course" button, "Settings" icon.
• Left Sidebar (Course Structure Navigator):

* Course Overview: Link back to overall course settings.

* Module List: Each module is a collapsible/expandable section.

* Module Title (editable inline).

* "Add Lesson" button within each module.

* Drag-and-drop handles for reordering modules.

* Context menu (edit module settings, duplicate, delete).

* Lesson List (under each module):

* Lesson Title (editable inline).

* Icon indicating lesson type (text, video, quiz, exercise).

* Drag-and-drop handles for reordering lessons.

* Context menu (edit lesson settings, duplicate, delete).

* "Add Module" button at the bottom of the sidebar.

* "Certification Criteria" link at the bottom of the sidebar.

• Main Content Area (Dynamic based on selection): This area changes based on what is selected in the left sidebar (Course Settings, Module Settings, Lesson Content Editor, Quiz Builder, Exercise Builder, Certification Settings).

3.3 Lesson Content Editor

• Header: Lesson Title, "Lesson Settings" button.
• Main Content Area:

* Rich Text Editor (WYSIWYG): A robust editor with a full toolbar (headings, bold, italic, lists, links, image upload, video embed, code blocks, tables).

* Media Insertion: Dedicated buttons for "Insert Image", "Embed Video", "Upload Document".

* Content Blocks: Ability to add distinct content blocks (e.g., text block, image gallery block, video block) for better structuring.

* "Add Quiz" / "Add Exercise" / "Add New Content Block" buttons: Allows seamless integration of different content types within a lesson.

3.4 Quiz Builder

• Header: Quiz Title, "Quiz Settings" button.
• Question List (Left Panel - Optional, for long quizzes): A navigable list of questions.
• Main Content Area:

* "Add New Question" button: Prompts for question type selection.

* Question Card (for each question):

* Question Type selector (dropdown).

* Question Text input (rich text editor for formatting).

* Options based on question type (e.g., radio buttons for multiple choice, checkboxes for multiple select).

* "Add Option" button, "Remove Option" button.

* Correct Answer selection.

* Feedback fields (for correct/incorrect answers).

* Points/Weighting input.

* "Duplicate Question", "Delete Question" buttons.

* Drag-and-drop reordering for questions.

3.5 Exercise Builder

• Header: Exercise Title, "Exercise Settings" button.
• Main Content Area:

* "Exercise Description" (Rich Text Editor): Detailed instructions, learning objectives, resources.

* "Submission Type" Selector: Dropdown (File Upload, Text Input, External Link).

* "File Upload Settings" (if selected): Allowed file types, max file size.

* "Evaluation Criteria" Builder:

* "Add Criterion" button.

* Each criterion includes: Title, Description, Max Points.

* Drag-and-drop reordering for criteria.

* Total points calculation.

* "Due Date" Selector.

* Optional "Peer Review" toggle.

3.6 Certification Criteria & Template Designer

• Header: "Certification Settings."
• Main Content Area:

* "Completion Requirements":

* Checkboxes: "Complete all modules", "Pass all quizzes", "Submit all assignments".

* Numerical input for minimum score if applicable (e.g., "Overall minimum score of X%").

* "Certificate Template Designer":

* Preview Area: A live preview of the certificate.

* Customization Options (Right Panel):

* "Upload Background Image".

* "Upload Logo".

* Text Fields: Editable placeholders for Course Title, Learner Name, Completion Date, Instructor Signature.

* Font Selection (pre-defined professional fonts).

* Color Picker for text.

* "Add Digital Signature/Seal" option (upload image).

* "Download Sample" button.

4. Color Palettes

A professional, clean, and accessible color palette is crucial for an effective learning platform.

Primary Palette (Brand Colors):

These colors establish the brand identity and should be used for primary actions, headings, and key UI elements.

• Primary Blue: #1A73E8 (Google Blue-like)

Usage:* Buttons (primary actions), active states, progress indicators, main headings, links.

Rationale:* Conveys trust, professionalism, reliability, and intelligence. Highly recognizable.

• Accent Green: #34A853 (Google Green-like)

Usage:* Success messages, "Publish" buttons, positive feedback, completion indicators.

Rationale:* Signifies completion, success, and positive affirmation.

Secondary Palette (Supporting Colors):

Used for secondary actions, alerts, and visual differentiation.

• Secondary Orange: #FBBC04 (Google Yellow-like)

Usage:* Warning messages, "Draft" status, highlights, less critical alerts.

Rationale:* Draws attention without being overly aggressive; indicates caution or pending status

This deliverable outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Training Course Builder" output. The goal is to create a professional, engaging, and highly intuitive learning interface that optimizes the user's educational journey.

Finalized Design Assets: Training Course Interface

This document details the complete design framework for the generated training course, ensuring a consistent, user-friendly, and visually appealing experience across all modules, lessons, and interactive elements.

1. Overall Design Philosophy

Our design approach prioritizes clarity, engagement, and accessibility. The interface will be clean, modern, and intuitive, minimizing distractions to allow learners to focus on content. Key principles include:

• User-Centric Design: Every element is designed with the learner's journey in mind, from navigation to content consumption.
• Minimalist Aesthetic: Clean layouts, ample white space, and a focused visual hierarchy to enhance readability.
• Consistency: Uniformity in design elements, typography, and interaction patterns across all course components.
• Responsiveness: Seamless experience across desktops, tablets, and mobile devices.
• Accessibility: Adherence to WCAG guidelines for color contrast, keyboard navigation, and semantic HTML.

2. Detailed Design Specifications

2.1. Typography

• Primary Font Family (Headings & UI Elements): Montserrat (or similar modern sans-serif like Lato, Open Sans)

* Rationale: Modern, clean, highly readable at various sizes, professional.

• Secondary Font Family (Body Text & Long-form Content): Merriweather (or similar serif like PT Serif, Lora)

* Rationale: Excellent readability for extended text, provides a subtle contrast to headings, enhancing content structure.

• Code Snippets: Fira Code (or similar monospace like Source Code Pro, Roboto Mono)

* Rationale: Clear distinction for code, includes ligatures for improved readability of common programming symbols.

| Element | Font Family | Weight | Size (Desktop) | Size (Mobile) | Color (HEX) |

| :-------------- | :------------ | :--------- | :------------- | :------------ | :---------- |

| H1 (Course Title) | Montserrat | Bold (700) | 48px | 32px | #2C3E50 |

| H2 (Module Title) | Montserrat | SemiBold (600) | 36px | 28px | #2C3E50 |

| H3 (Lesson Title) | Montserrat | Medium (500) | 28px | 22px | #2C3E50 |

| H4 (Section Header) | Montserrat | Regular (400) | 20px | 18px | #2C3E50 |

| Body Text | Merriweather | Regular (400) | 16px | 14px | #34495E |

| Small Text | Merriweather | Regular (400) | 14px | 12px | #7F8C8D |

| Link Text | Montserrat | Medium (500) | 16px | 14px | #3498DB |

| Button Text | Montserrat | SemiBold (600) | 16px | 14px | #FFFFFF |

| Code Block | Fira Code | Regular (400) | 14px | 12px | #2C3E50 |

2.2. Iconography

• Style: Line-based, consistent stroke weight, modern and recognizable. (e.g., material design icons, Font Awesome Pro).
• Common Icons:

* Navigation: arrow-left, arrow-right, home, menu, close

* Content: play, pause, file-text, video, image, code

* Interaction: check-circle, times-circle, info-circle, question-circle, download, share

* Progress: circle-notch (loading), check (completed), dot (uncompleted)

• Color: Typically #7F8C8D for general use, #3498DB for interactive, and semantic colors for status.

2.3. Component Library

• Buttons:

* Primary: Solid fill with Primary Brand Color, white text. border-radius: 4px;

* Secondary: Transparent background, Primary Brand Color border and text. border-radius: 4px;

* Ghost/Tertiary: Transparent background, dark gray text. Used for less prominent actions.

* States: Hover, Active, Disabled (lighter background/text for primary, faded for secondary).

• Input Fields:

* Clean, minimal design. Light gray border, white background. border-radius: 4px;

* Focus state: Primary Brand Color border.

* Error state: Red border.

• Progress Bars:

* Thin, horizontal bar. Background: Light Gray. Fill: Primary Brand Color.

* Clear percentage or step indication.

• Cards:

* Used for module summaries, quiz questions, exercise descriptions.

* Subtle box-shadow for depth, white background, border-radius: 8px;

• Alerts/Notifications:

* Success: Green background, white text.

* Warning: Orange background, white text.

* Error: Red background, white text.

* Info: Blue background, white text.

* Small icon on the left matching the semantic color.

• Modals/Pop-ups:

* Centered, slightly translucent overlay background.

* Clean white card-like structure with clear title, content, and action buttons.

* border-radius: 8px;

2.4. Responsive Design

• Breakpoints:

* xs: 0 - 575px (Mobile portrait)

* sm: 576px - 767px (Mobile landscape, small tablets)

* md: 768px - 991px (Tablets)

* lg: 992px - 1199px (Desktops)

* xl: 1200px+ (Large Desktops)

• Layout Adjustments:

* Sidebar navigation collapses into a hamburger menu on md and smaller.

* Content columns stack vertically on smaller screens.

* Font sizes and padding adjust dynamically.

* Images and videos scale fluidly.

2.5. Accessibility (WCAG 2.1 AA Compliance Target)

• Color Contrast: All text and interactive elements meet minimum contrast ratios (e.g., 4.5:1 for small text, 3:1 for large text/UI components).
• Keyboard Navigation: All interactive elements (buttons, links, form fields) are navigable via keyboard (Tab, Enter, Space). Clear focus indicators (outline).
• Semantic HTML: Proper use of h1-h6, nav, main, aside, footer, button, a, img with alt attributes.
• ARIA Attributes: Strategic use of ARIA roles and properties for dynamic content and complex widgets.
• Screen Reader Compatibility: Content order makes sense, interactive elements are clearly labeled.

3. Wireframe Descriptions

3.1. Course Landing Page

• Header:

* Top-left: Course Builder Logo/Brand.

* Top-right: User profile/dashboard link (if applicable).

• Hero Section:

* Large, engaging image or video background relevant to the course subject.

* H1 Course Title (e.g., "Mastering Modern Web Development").

* Concise, compelling course tagline/description.

* "Start Course" / "Enroll Now" Primary Button.

* Key statistics: Duration, number of modules, skill level.

• "What You'll Learn" Section:

* Bullet points or icon-list of key learning objectives.

• Course Overview Section:

* Detailed description of the course content and structure.

* Target audience.

* Prerequisites.

• Modules at a Glance:

* Card-like display for each module, showing title, brief description, and estimated time.

* "View All Modules" secondary button.

• Instructor Profile (Optional):

* Instructor photo, name, bio, social links.

• Footer:

* Copyright, privacy policy, terms of service.

3.2. Module Overview & Navigation

• Layout: Two-column layout (Desktop/Tablet), single-column (Mobile).

* Left Sidebar (Persistent on Desktop, Collapsible on Mobile):

* Course Title (smaller, linked to Course Landing).

* List of Modules: Each module is a clickable header.

* Under each module, a nested list of lessons.

* Visual Progress Indicator: Checkmark for completed, dot for incomplete, current lesson highlighted.

* Expand/Collapse functionality for modules.

* Main Content Area:

* H2 Module Title.

* Module description, learning objectives for the module.

* List of lessons within the module (clickable cards with lesson title, status, duration).

* "Start Module" / "Resume Module" Primary Button.

3.3. Lesson Page (Content Consumption)

• Header:

* Top-left: Course Builder Logo/Brand.

* Top-center: Course Title.

* Top-right: User profile/dashboard link.

• Layout: Two-column (Desktop/Tablet), single-column (Mobile).

* Left Sidebar (Persistent on Desktop, Collapsible on Mobile):

* Same as Module Overview, but with the current lesson clearly highlighted.

* Overall course progress bar.

* Main Content Area:

* H3 Lesson Title.

* Breadcrumbs: Course > Module > Lesson.

* Content Display:

* Rich text editor output: Paragraphs, ordered/unordered lists, blockquotes.

* Embedded multimedia: Videos (responsive player), images (with captions, alt text).

* Code blocks: Syntax highlighted, scrollable.

* Interactive elements: Accordions for FAQs, tabs for different perspectives.

* "Mark as Complete" / "Next Lesson" Primary Button: Located at the bottom of the content.

* "Previous Lesson" Secondary Button: Located next to the next button.

* Discussion Section (Optional): Comments, Q&A.

3.4. Quiz Page

• Header & Sidebar: Consistent with Lesson Page.
• Main Content Area:

* H3 Quiz Title (e.g., "Module 1 Assessment").

* Instructions and time limit (if applicable).

* Question Card (for each question):

* Question Number (e.g., "Question 1 of 5").

* Question Text (H4).

* Answer Options: Radio buttons (single choice), checkboxes (multiple choice), text input (short answer).

* Clear labels for all options.

* Navigation: "Previous Question", "Next Question" buttons. "Submit Quiz" Primary Button on the last question.

* Progress Indicator: Small dots or numbers at the bottom indicating quiz progress.

* Feedback (after submission):

* Result summary (score, pass/fail).

* Per-question feedback (correct answer, explanation).

* "Retake Quiz" / "Review Answers" / "Continue to Next Lesson" buttons.

3.5. Hands-on Exercise Page

• Header & Sidebar: Consistent with Lesson Page.
• Main Content Area:

* H3 Exercise Title.

* Instructions: Clear, step-by-step guidance. Markdown-formatted text, code snippets for setup.

* Requirements/Goals: What the learner needs to achieve.

* Resources: Links to documentation, starter files, external tools.

* Interactive Workspace (if applicable):

* Embedded code editor (e.g., Monaco Editor, CodeMirror) with syntax highlighting.

* Terminal/console