Modern Web Design

Modern Web Design

Overview

Modern web design in 2024-2025 emphasizes performance, accessibility, and meaningful interactions. This skill provides comprehensive guidance on current design trends, implementation patterns, and best practices for creating engaging, accessible, and performant web experiences.

This meta-skill synthesizes knowledge from all animation, interaction, and 3D skills in this repository to provide holistic design guidance.

Core Design Principles (2024-2025)

1. Performance-First Design

Philosophy: Design decisions should prioritize Core Web Vitals and user experience on all devices.

Key Metrics:

• Largest Contentful Paint (LCP): < 2.5s
• First Input Delay (FID): < 100ms
• Cumulative Layout Shift (CLS): < 0.1
• Interaction to Next Paint (INP): < 200ms

Implementation Guidelines:

• Defer non-critical animations until after page load
• Use CSS transforms/opacity for animations (GPU-accelerated)
• Implement lazy loading for images, videos, and 3D content
• Progressive enhancement: core content without JavaScript

Related Skills: gsap-scrolltrigger, motion-framer, lottie-animations for optimized animations

2. Bold Minimalism

Characteristics:

• Large, impactful typography (clamp() for fluid sizing)
• Ample white space (negative space as design element)
• Limited color palettes (3-5 primary colors)
• Intentional use of bold accent colors
• Geometric shapes and clean lines

Typography Scale (Modern fluid system):

/* Fluid typography using clamp() */
--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--font-size-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
--font-size-2xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
--font-size-3xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);

Color System (Accessibility-first):

/* WCAG AAA compliant color system */
--color-primary: oklch(50% 0.2 250); /* Blue */
--color-accent: oklch(65% 0.25 30);  /* Coral */
--color-neutral-50: oklch(98% 0 0);
--color-neutral-900: oklch(20% 0 0);
/* Contrast ratio: minimum 7:1 for text */

Related Skills: animated-component-libraries for UI components

3. Micro-Interactions

Definition: Small, purposeful animations that provide feedback, guide users, and enhance perceived performance.

Categories:

a) Hover States (Desktop):

• Scale transformations (1.05-1.1x)
• Color transitions (200-300ms)
• Shadow depth changes
• Cursor transformations

b) Loading States:

• Skeleton screens (better than spinners)
• Progressive image loading (blur-up technique)
• Optimistic UI updates
• Staggered content reveals

c) Interactive Feedback:

• Button press states (scale down 0.95x)
• Toggle switches with spring physics
• Form field validation (immediate, kind feedback)
• Success/error states with motion

Implementation Example (Framer Motion):

// Button with micro-interaction
<motion.button
  whileHover={{ scale: 1.05, y: -2 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Click me
</motion.button>

Related Skills: motion-framer, react-spring-physics, animejs for micro-interactions

4. Scrollytelling

Definition: Narrative-driven experiences where content reveals and transforms as the user scrolls.

Patterns:

a) Scroll-Triggered Reveals:

• Fade-in on scroll entry (with offset)
• Slide-in from sides with stagger
• Scale + opacity transitions
• Clip-path reveals

b) Scroll-Linked Animations:

• Parallax layers (different scroll speeds)
• Horizontal scrolling sections
• Pinned sections with scrubbing animations
• 3D object rotation tied to scroll

c) Progress Indicators:

• Reading progress bars
• Step-by-step visual guides
• Animated SVG paths following scroll

Implementation Example (GSAP ScrollTrigger):

// Scroll-linked 3D rotation
gsap.to(".cube", {
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    scrub: 1, // Smooth scrubbing
  },
  rotationY: 360,
  ease: "none"
});

Related Skills: gsap-scrolltrigger, locomotive-scroll, scroll-reveal-libraries, react-three-fiber for 3D scrollytelling

5. Cursor UX

Evolution: Custom cursors that enhance interaction and provide contextual feedback.

Patterns:

a) Custom Cursor Shapes:

• Circle/dot followers (delayed with easing)
• Text-based cursors ("View", "Drag", "Click")
• Blend modes for visual interest
• Scale/morph on hover

b) Contextual Transformations:

• Expand on links/buttons
• Magnetic attraction to interactive elements
• Color inversion over images
• Custom icons for actions (play, zoom, expand)

c) Performance Considerations:

• Use CSS transforms only (no top/left)
• RequestAnimationFrame for JS cursors
• Disable on mobile/touch devices
• Respect prefers-reduced-motion

Implementation Example:

// Simple smooth cursor follower
const cursor = document.querySelector('.cursor');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;

document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

function updateCursor() {
  // Smooth easing
  cursorX += (mouseX - cursorX) * 0.1;
  cursorY += (mouseY - cursorY) * 0.1;

  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
  requestAnimationFrame(updateCursor);
}
updateCursor();

Related Skills: gsap-scrolltrigger (for easing), motion-framer (for React cursor components)

6. Glassmorphism & Depth

Characteristics:

• Frosted glass effect (backdrop-filter)
• Layered UI with depth hierarchy
• Subtle shadows and borders
• Translucent backgrounds

Modern Glassmorphism (2024):

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

Depth System (Layering):

/* Elevation scale */
--elevation-1: 0 1px 3px rgba(0,0,0,0.12);
--elevation-2: 0 4px 8px rgba(0,0,0,0.15);
--elevation-3: 0 8px 16px rgba(0,0,0,0.18);
--elevation-4: 0 16px 32px rgba(0,0,0,0.2);

Related Skills: animated-component-libraries for glassmorphic components

7. AI-Enhanced Personalization

Patterns:

a) Adaptive Content:

• Dynamic layout based on user behavior
• Personalized content recommendations
• Adaptive color schemes (system preference + user history)
• Smart defaults based on context

b) Intelligent Interactions:

• Predictive search with instant results
• Smart form completion
• Context-aware suggestions
• Progressive disclosure based on usage

c) Performance + Privacy:

• Client-side personalization (localStorage, IndexedDB)
• Edge computing for fast personalization
• Privacy-preserving analytics
• Transparent data usage

Implementation Considerations:

• Fallback to default experience
• No layout shift from personalization
• Respect "Do Not Track"
• GDPR/CCPA compliance

Common Design Patterns

Pattern 1: Immersive Hero Section

Use Case: Landing pages, product launches, portfolio sites

Characteristics:

• Full viewport height
• Subtle 3D background or animated gradient
• Large headline with fluid typography
• Smooth scroll indicator
• Parallax on scroll exit

Implementation (Combined approach):

HTML Structure:

<section class="hero">
  <div id="bg-canvas"></div>
  <div class="hero__content">
    <h1 class="hero__title">Modern Design</h1>
    <p class="hero__subtitle">Performance meets beauty</p>
    <button class="hero__cta">Explore</button>
  </div>
  <div class="scroll-indicator">
    <span>Scroll</span>
  </div>
</section>

Technologies:

• Background: Vanta.js WAVES effect (lightweight-3d-effects)
• Text animation: GSAP SplitText with stagger (gsap-scrolltrigger)
• Button: Framer Motion hover states (motion-framer)
• Scroll indicator: CSS animation + GSAP fade out on scroll

Related Skills: lightweight-3d-effects, gsap-scrolltrigger, motion-framer

Pattern 2: Horizontal Scroll Gallery

Use Case: Portfolio work, product showcases, case studies

Implementation (GSAP ScrollTrigger):

gsap.to(".gallery__track", {
  x: () => -(document.querySelector(".gallery__track").scrollWidth - window.innerWidth),
  ease: "none",
  scrollTrigger: {
    trigger: ".gallery",
    pin: true,
    scrub: 1,
    end: () => "+=" + document.querySelector(".gallery__track").scrollWidth
  }
});

Enhancements:

• Lazy load images as they scroll into view
• Parallax within cards
• Scale transformation on active card
• Smooth momentum scrolling with Locomotive

Related Skills: gsap-scrolltrigger, locomotive-scroll

Pattern 3: 3D Product Viewer

Use Case: E-commerce, product marketing, showcases

Implementation (React Three Fiber):

import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'

function ProductViewer() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} />
      <Product />
      <OrbitControls
        enableZoom={false}
        autoRotate
        autoRotateSpeed={2}
      />
    </Canvas>
  )
}

Enhancements:

• Material variants (color picker)
• Hotspots with annotations
• AR mode on mobile
• Screenshot/share functionality

Related Skills: react-three-fiber, threejs-webgl, model-viewer-component

Pattern 4: Animated Data Visualization

Use Case: Dashboards, analytics, infographics

Patterns:

• Count-up animations on scroll into view
• Animated chart reveals (progress bars, pie charts)
• Staggered grid animations
• Particle backgrounds representing data

Implementation (Framer Motion + IntersectionObserver):

function AnimatedStat({ end, label }) {
  const [count, setCount] = useState(0);
  const ref = useRef();
  const isInView = useInView(ref, { once: true });

  useEffect(() => {
    if (isInView) {
      // Count up animation
      const duration = 2000;
      const steps = 60;
      const increment = end / steps;
      let current = 0;

      const timer = setInterval(() => {
        current += increment;
        if (current >= end) {
          setCount(end);
          clearInterval(timer);
        } else {
          setCount(Math.floor(current));
        }
      }, duration / steps);
    }
  }, [isInView, end]);

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6 }}
    >
      <h2>{count}+</h2>
      <p>{label}</p>
    </motion.div>
  );
}

Related Skills: motion-framer, pixijs-2d for canvas-based visualizations

Pattern 5: Page Transitions

Use Case: Multi-page apps, portfolio sites, storytelling experiences

Implementation (Barba.js + GSAP):

barba.init({
  transitions: [{
    name: 'slide',
    leave(data) {
      return gsap.to(data.current.container, {
        xPercent: -100,
        duration: 0.5
      });
    },
    enter(data) {
      return gsap.from(data.next.container, {
        xPercent: 100,
        duration: 0.5
      });
    }
  }]
});

Modern Alternatives:

• View Transitions API (Chrome 111+, progressive enhancement)
• Framer Motion's AnimatePresence for React SPAs
• Shared element transitions

Related Skills: barba-js, gsap-scrolltrigger, motion-framer

Pattern 6: Interactive Cursor Effects

Use Case: Creative agencies, portfolios, interactive experiences

Patterns:

• Text cursor that follows with delay
• Magnetic buttons (cursor attracted to elements)
• Blend mode cursor (inverts colors)
• Cursor that reveals content

Implementation (Vanilla JS + GSAP):

const links = document.querySelectorAll('a');
const cursor = document.querySelector('.cursor');

links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    gsap.to(cursor, {
      scale: 2,
      duration: 0.3,
      ease: "power2.out"
    });
  });

  link.addEventListener('mouseleave', () => {
    gsap.to(cursor, {
      scale: 1,
      duration: 0.3,
      ease: "power2.out"
    });
  });
});

Related Skills: gsap-scrolltrigger, motion-framer

Pattern 7: Staggered Content Reveals

Use Case: Feature sections, testimonials, team grids

Implementation (Framer Motion variants):

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

function FeatureGrid() {
  return (
    <motion.div
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.3 }}
      className="grid"
    >
      {features.map((feature, i) => (
        <motion.div key={i} variants={item}>
          {feature}
        </motion.div>
      ))}
    </motion.div>
  );
}

Related Skills: motion-framer, gsap-scrolltrigger, scroll-reveal-libraries

Integration with Other Skills

Animation Skills Integration

GSAP ScrollTrigger (gsap-scrolltrigger):

• Use for scroll-driven storytelling
• Pin sections for multi-step reveals
• Scrub animations tied to scroll position
• Batch animations for performance

Framer Motion (motion-framer):

• React component animations
• Page transitions with AnimatePresence
• Gesture-based interactions (drag, hover, tap)
• Layout animations (shared element transitions)

React Spring (react-spring-physics):

• Physics-based animations (more natural feel)
• Interactive springs (drag, pull)
• Trail animations (sequential reveals)
• Use for UI feedback that feels "real"

Anime.js (animejs):

• SVG path animations (line drawing)
• SVG morphing transitions
• Stagger grid animations
• Timeline-based sequences

Lottie (lottie-animations):

• Complex designer-created animations
• Icon animations and micro-interactions
• Loading states
• Scroll-driven playback

3D Skills Integration

Three.js (threejs-webgl):

• Custom 3D scenes and experiences
• Shader effects and post-processing
• WebGL-based particle systems
• Advanced lighting and materials

React Three Fiber (react-three-fiber):

• 3D in React applications
• Product viewers and configurators
• Interactive 3D UI components
• Scroll-driven 3D animations

Babylon.js (babylonjs-engine):

• Physics-based 3D experiences
• VR/XR applications
• Game-like interactions
• PBR materials for realism

Lightweight 3D (lightweight-3d-effects):

• Background effects (Vanta.js)
• Subtle 3D illustrations (Zdog)
• Tilt effects (Vanilla-Tilt)
• Performance-friendly 3D accents

Component Libraries

Animated Components (animated-component-libraries):

• Magic UI components (backgrounds, text effects)
• Pre-built interactive components
• Design system foundations
• Rapid prototyping

Scroll Reveals (scroll-reveal-libraries):

• Simple fade/slide on scroll
• AOS library integration
• Lightweight alternative to ScrollTrigger
• Quick implementation for basic reveals