⚖️ Módulo 6: Minimalismo vs. Maximalismo

Usando el Sistema de Diseño de Bootstrap para Ambos Enfoques

Bootstrap 5.3 Clases Utilitarias Sistemas de Diseño

Diseño Minimalista

Limpio y Simple

Espaciado generoso, colores limitados y tipografía simple crean una experiencia tranquila y enfocada.

Utilidades Bootstrap: py-5, fw-light, border-light, shadow-sm, text-secondary

Utilidades Bootstrap para Minimalismo

  • py-5, px-4 – Espaciado generoso
  • fw-light, fw-normal – Tipografía ligera
  • bg-white, bg-light – Fondos limpios
  • text-secondary, text-muted – Colores apagados
  • border-light, shadow-sm – Bordes y sombras sutiles
  • lh-lg – Altura de línea generosa
  • mx-auto, container – Ancho centrado y restringido

Diseño Maximalista

Audaz, Denso, Colorido

Card 1

Contenido denso, espaciado ajustado

Card 2

Múltiples colores audaces

Card 3

Espectro completo

Card 4

Alta densidad visual

Utilidades Bootstrap para Maximalismo

  • container-fluid – Layout de ancho completo
  • g-3 – Márgenes de grid ajustados
  • bg-primary, bg-danger, etc. – Colores audaces de Bootstrap
  • fw-bold, display-* – Tipografía audaz
  • p-3 – Padding compacto
  • col-md-6 col-lg-3 – Layouts de grid densos
  • small – Texto más pequeño para densidad

Diferencias Clave

Aspecto Minimalismo (Bootstrap) Maximalismo (Bootstrap)
Espaciado py-5, px-4 (generoso) p-3, g-3 (compacto)
Colores bg-white, text-secondary bg-primary, bg-danger, etc.
Tipografía fw-light, lh-lg fw-bold, display-*
Layout container, mx-auto container-fluid, ancho completo
Bordes border-light, shadow-sm Múltiples colores, sin bordes/audaces
Grid Pocas columnas, más espacio en blanco col-lg-3, muchas columnas