UI/UX Design for DevOps LMS
Activation Triggers
- Designing new pages or layouts
- Creating navigation structures
- Working on user flows
- Building responsive designs
- Implementing accessibility features
- Designing progress visualization
Design System
Color Palette (Dark Mode)
/* Backgrounds */
--bg-base: #111827; /* gray-900 - Main background */
--bg-elevated: #1f2937; /* gray-800 - Cards, sidebars */
--bg-hover: #374151; /* gray-700 - Hover states */
/* Text */
--text-primary: #f9fafb; /* gray-50 - Headings */
--text-secondary: #e5e7eb; /* gray-200 - Body text */
--text-muted: #9ca3af; /* gray-400 - Secondary info */
--text-disabled: #6b7280; /* gray-500 - Disabled */
/* Accent Colors */
--primary: #6366f1; /* indigo-500 - Primary actions */
--success: #22c55e; /* green-500 - Completed */
--warning: #f59e0b; /* amber-500 - In progress */
--error: #ef4444; /* red-500 - Failed/errors */
/* Borders */
--border: #374151; /* gray-700 */
Typography Scale
/* Headings */
.text-4xl /* 36px - Page titles */
.text-2xl /* 24px - Section headers */
.text-xl /* 20px - Card titles */
.text-lg /* 18px - Subsection headers */
.text-base /* 16px - Body text */
.text-sm /* 14px - Secondary text */
.text-xs /* 12px - Badges, labels */
/* Font Weights */
.font-bold /* 700 - Headings */
.font-semibold /* 600 - Subheadings */
.font-medium /* 500 - Emphasis */
.font-normal /* 400 - Body */
Spacing System
/* Use consistent spacing */
.space-y-2 /* 8px - Tight grouping */
.space-y-4 /* 16px - Related items */
.space-y-6 /* 24px - Sections */
.space-y-8 /* 32px - Major sections */
/* Padding */
.p-4 /* 16px - Card content */
.p-6 /* 24px - Large cards */
.px-4 /* Horizontal padding */
.py-2 /* Vertical padding for buttons */
Page Layouts
Dashboard Layout (Home Page)
┌─────────────────────────────────────────────────────────────┐
│ Header: Logo + Navigation + Progress Summary │
├─────────────────────────────────────────────────────────────┤
│ │
│ Hero Section │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Overall Progress: 45/527 lessons (8.5%) │ │
│ │ [████████░░░░░░░░░░░░░░░░░░░░░░░░░░] 8.5% │ │
│ │ [Continue Learning] [View Certificate] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ Phase Grid (2-3 columns) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Phase 1 │ │ Phase 2 │ │ Phase 3 │ │
│ │ SDLC │ │ Foundations │ │ Cloud │ │
│ │ ████░░ 80% │ │ ██░░░░ 33% │ │ ░░░░░░ 0% │ │
│ │ 4/5 topics │ │ 2/6 topics │ │ 0/9 topics │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Lesson Layout
┌─────────────────────────────────────────────────────────────┐
│ Breadcrumb: Home > Phase 1 > SDLC Models > Waterfall │
├──────────────┬──────────────────────────────────────────────┤
│ │ │
│ Sidebar │ Lesson Content │
│ (240px) │ │
│ │ ┌────────────────────────────────────────┐ │
│ Phase 1 ▼ │ │ Waterfall Model │ │
│ ├ SDLC │ │ ⏱ 15 min • 🟢 Beginner │ │
│ │ Models ▼ │ └────────────────────────────────────────┘ │
│ │ ├ ✓ Water │ │
│ │ ├ ○ Agile │ ## What is Waterfall? │
│ │ └ ○ Scrum │ The Waterfall model is a linear... │
│ └ Phases │ │
│ │ ## Key Phases │
│ Phase 2 │ 1. Requirements │
│ Phase 3 │ 2. Design │
│ │ ... │
│ │ │
│ │ ┌────────────────────────────────────────┐ │
│ │ │ [Mark Complete] [← Prev] [Next →] │ │
│ │ └────────────────────────────────────────┘ │
│ │ │
│ │ Quiz Section (collapsible) │
│ │ ┌────────────────────────────────────────┐ │
│ │ │ Question 1 of 4 │ │
│ │ │ What is the main characteristic... │ │
│ │ │ ○ Option A │ │
│ │ │ ○ Option B │ │
│ │ │ ● Option C ✓ │ │
│ │ │ ○ Option D │ │
│ │ └────────────────────────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────┘
Progress Page Layout
┌─────────────────────────────────────────────────────────────┐
│ Your Learning Progress │
├─────────────────────────────────────────────────────────────┤
│ │
│ Stats Cards (4 columns) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 45 │ │ 8.5% │ │ 12h 30m │ │ 3 │ │
│ │ Completed│ │ Progress │ │ Time │ │ Quizzes │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Phase Progress (Accordion) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ▼ Phase 1: SDLC 80% ████░ │ │
│ │ ├ SDLC Models 100% ████ │ │
│ │ ├ SDLC Phases 60% ███░ │ │
│ │ └ Development Workflows 0% ░░░░ │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ ▶ Phase 2: Foundations 33% ██░░░ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Component Patterns
Phase Card
<UCard class="hover:ring-2 hover:ring-primary-500 transition-all cursor-pointer">
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-primary-500/20 flex items-center justify-center">
<UIcon name="i-heroicons-academic-cap" class="w-5 h-5 text-primary-500" />
</div>
<div>
<h3 class="font-semibold">Phase 1: SDLC</h3>
<p class="text-sm text-gray-400">4 topics • 20 lessons</p>
</div>
</div>
<UBadge :color="progress === 100 ? 'success' : 'warning'">
{{ progress }}%
</UBadge>
</div>
<UProgress :value="progress" :color="progress === 100 ? 'success' : 'primary'" />
<div class="mt-4 flex justify-between items-center">
<span class="text-sm text-gray-400">Est. 2h 30m</span>
<UButton size="sm" variant="soft">
{{ progress > 0 ? 'Continue' : 'Start' }}
</UButton>
</div>
</UCard>
Lesson Sidebar Item
<div
class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors"
:class="[
isActive ? 'bg-primary-500/20 text-primary-400' : 'hover:bg-gray-700',
isCompleted ? 'text-gray-400' : 'text-gray-200'
]"
>
<UIcon
:name="isCompleted ? 'i-heroicons-check-circle-solid' : 'i-heroicons-circle'"
:class="isCompleted ? 'text-success-500' : 'text-gray-500'"
class="w-5 h-5 flex-shrink-0"
/>
<span class="truncate">{{ title }}</span>
<UBadge v-if="isActive" size="xs" color="primary">Current</UBadge>
</div>
Quiz Question Card
<UCard>
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-400">Question {{ current }} of {{ total }}</span>
<UBadge>{{ difficulty }}</UBadge>
</div>
<h3 class="text-lg font-medium mb-6">{{ question }}</h3>
<div class="space-y-3">
<div
v-for="option in options"
:key="option"
class="flex items-center gap-3 p-4 rounded-lg border cursor-pointer transition-all"
:class="[
selected === option
? 'border-primary-500 bg-primary-500/10'
: 'border-gray-700 hover:border-gray-600'
]"
@click="select(option)"
>
<div
class="w-5 h-5 rounded-full border-2 flex items-center justify-center"
:class="selected === option ? 'border-primary-500' : 'border-gray-600'"
>
<div
v-if="selected === option"
class="w-2.5 h-2.5 rounded-full bg-primary-500"
/>
</div>
<span>{{ option }}</span>
</div>
</div>
<div class="flex justify-between mt-6">
<UButton variant="outline" @click="prev" :disabled="current === 1">
Previous
</UButton>
<UButton @click="next">
{{ current === total ? 'Finish' : 'Next' }}
</UButton>
</div>
</UCard>
Responsive Design
Breakpoints
sm: 640px /* Mobile landscape */
md: 768px /* Tablet */
lg: 1024px /* Desktop */
xl: 1280px /* Large desktop */
Mobile Patterns
<!-- Sidebar: Hidden on mobile, drawer on tablet, visible on desktop -->
<div class="hidden lg:block w-64">
<LessonSidebar />
</div>
<!-- Mobile menu button -->
<UButton
class="lg:hidden"
icon="i-heroicons-bars-3"
variant="ghost"
@click="showMobileMenu = true"
/>
<!-- Mobile drawer -->
<USlideover v-model:open="showMobileMenu">
<LessonSidebar @close="showMobileMenu = false" />
</USlideover>
<!-- Grid: 1 column mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<PhaseCard v-for="phase in phases" :key="phase.id" :phase="phase" />
</div>
Accessibility
Focus States
<!-- All interactive elements need visible focus -->
<UButton class="focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-gray-900">
Click me
</UButton>
<!-- Custom focusable elements -->
<div
tabindex="0"
class="focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-lg"
@keydown.enter="handleClick"
@keydown.space.prevent="handleClick"
>
Clickable content
</div>
Screen Reader Support
<!-- Always add aria labels -->
<UButton aria-label="Mark lesson as complete">
<UIcon name="i-heroicons-check" />
</UButton>
<!-- Progress announcements -->
<div role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
<UProgress :value="progress" />
</div>
<!-- Navigation landmarks -->
<nav aria-label="Lesson navigation">
<LessonSidebar />
</nav>
Animation & Transitions
<!-- Hover effects -->
<div class="transition-all duration-200 hover:scale-[1.02] hover:shadow-lg">
<!-- Content transitions -->
<Transition name="fade" mode="out-in">
<component :is="currentComponent" />
</Transition>
<!-- CSS -->
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
<!-- List transitions -->
<TransitionGroup name="list" tag="div">
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
</TransitionGroup>
Empty & Error States
Empty State
<div class="flex flex-col items-center justify-center py-16 text-center">
<div class="w-16 h-16 rounded-full bg-gray-800 flex items-center justify-center mb-4">
<UIcon name="i-heroicons-document-text" class="w-8 h-8 text-gray-500" />
</div>
<h3 class="text-lg font-medium mb-2">No lessons found</h3>
<p class="text-gray-400 mb-6 max-w-sm">
Start exploring the roadmap to begin your DevOps learning journey.
</p>
<UButton to="/">Explore Roadmap</UButton>
</div>
Error State
<UCard class="border-error-500/50 bg-error-500/10">
<div class="flex items-start gap-4">
<UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-error-500 flex-shrink-0" />
<div>
<h3 class="font-medium text-error-400">Failed to load lesson</h3>
<p class="text-sm text-gray-400 mt-1">{{ error.message }}</p>
<UButton size="sm" variant="soft" color="error" class="mt-3" @click="retry">
Try Again
</UButton>
</div>
</div>
</UCard>
fawzymohamed