ui-ux-design

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>