Skip to content

DESIGN.md

Latest commit

 

History

History
237 lines (150 loc) · 5.12 KB

DESIGN.md

File metadata and controls

237 lines (150 loc) · 5.12 KB

UI Design & Layout Guidelines

Design References

The following screenshots illustrate the desired visual style and layout patterns for this application:

Landing Page

Landing Page Design Reference Reference for hero sections, initial user experience, and onboarding flow

Learning Journey View

Learning Journey Design Reference Reference for course listing, progress visualization, and navigation patterns

Course Details Page

Course Details Design Reference Reference for content hierarchy, resource organization, and action placement

Chat/Assistant Interface

Chatbot Interface Design Reference Reference for conversational UI, message styling, and interactive elements

These guidelines define how the AI should improve visual design, layout, and overall feel of the product without changing core functionality, information architecture, or user flows. Treat this as a design-refinement brief, not a product rewrite.

1. Design Goals

  • Preserve existing structure, copy, and navigation logic
  • Elevate perceived quality, clarity, and focus
  • Maintain a calm, premium, learning-first aesthetic
  • Reduce cognitive load while increasing visual hierarchy
  • Feel modern, technical, and trustworthy (career/learning platform)

2. Overall Look & Feel

Mood

  • Dark, atmospheric, and focused
  • Subtle gradients and depth over flat surfaces
  • Calm confidence, not playful or loud

Inspiration keywords

  • "Guided journey"
  • "Professional cockpit"
  • "Quietly powerful"

3. Color & Contrast

  • Base: deep navy / charcoal backgrounds

  • Accent: soft purple / indigo for progress, CTAs, highlights

  • Text hierarchy:

    • Primary: high-contrast off-white
    • Secondary: muted gray-blue
    • Tertiary/meta: low-contrast cool gray

Guidelines:

  • Never rely on color alone to convey state (use icons, labels)
  • Gradients should be subtle and slow (top-left → bottom-right)
  • Avoid pure black or pure white

4. Typography

Hierarchy is critical

  • Page titles: large, airy, confident
  • Section headers: clearly separated with spacing, not lines
  • Body text: compact but readable
  • Meta text (durations, progress, labels): smaller + muted

Rules:

  • Use weight and size more than color to signal importance
  • Avoid overusing uppercase
  • Let text breathe — increase line-height slightly

5. Layout & Spacing

  • Prefer vertical rhythm over dense stacking
  • Use generous padding inside cards
  • Separate sections with space, not dividers

Alignment

  • Strong left alignment for content-heavy areas
  • Center alignment only for onboarding / hero moments

Scanning behavior

  • Assume users skim first, read second
  • Key information should be visible without interaction

6. Cards & Containers

Cards are the primary UI building block.

Card design principles:

  • Soft radius (consistent across app)
  • Subtle elevation via shadow or gradient edge
  • Clear internal hierarchy (title → description → meta → action)

Avoid:

  • Hard borders
  • Heavy outlines
  • Overlapping cards unless intentionally layered

7. Progress & Status Indicators

Progress should feel motivating, not overwhelming.

  • Progress bars: smooth, rounded, animated subtly

  • Percentages should be readable at a glance

  • Status labels (e.g., Not Started, In Progress):

    • Muted pills
    • Calm language
    • Never alarming colors

8. CTAs & Interaction

Primary actions:

  • Visually distinct but not loud
  • Rounded, solid, confident

Secondary actions:

  • Lower contrast
  • Outline or soft fill

Rules:

  • One primary CTA per view
  • Actions should feel intentional, not cluttered

9. Learning Journey Views

  • Reinforce the idea of a path, not a list
  • Visually show sequence and momentum
  • Current focus should stand out clearly

Encourage:

  • "This week’s focus" or "Next up" patterns
  • Gentle guidance over choice overload

10. Course / Module Detail Pages

  • Clear entry point (title, duration, status)

  • One obvious next action

  • Resources should be scannable:

    • Icon → title → format → time

Avoid:

  • Long unbroken lists
  • Equal visual weight for all resources

11. Micro‑Interactions & Motion

  • Motion should feel supportive, not decorative

  • Use for:

    • Progress updates
    • State changes
    • Hover / focus clarity

Guidelines:

  • Short, smooth easing
  • No bouncing or playful effects
  • Animation should never block progress

12. Accessibility & Clarity

  • Maintain sufficient contrast in dark mode
  • Text should remain readable at smaller sizes
  • Click targets must feel generous

Clarity > cleverness at all times.

13. What NOT to Change

  • Core user flow
  • Feature set
  • Learning structure
  • Terminology
  • Navigation logic

This document is about refinement, not reinvention.

14. Success Criteria

A successful design pass should feel:

  • Cleaner
  • More focused
  • Easier to navigate
  • More premium
  • Less mentally taxing

If something looks simpler but feels more powerful, it’s working.