Accesibilidad Accessibility
La accesibilidad ayuda a las personas con diferentes habilidades a entender y usar un producto.
↗Diseño
Aprende cómo hacer pantallas claras, consistentes, fáciles de usar y accesibles para todos.
01 / Atlas
Todos los términos de Diseño
Abrir un término para un significado simple, un ejemplo, cuándo usarlo, cuán oficial es y su nombre en código.
-
01 · Núcleo -
02 · Más detalle Affordance Affordance
Un Affordance es una pista visible o que se siente, que muestra cómo se puede usar un objeto.
↗ -
03 · Núcleo Anillo de enfoque Focus Ring
Una línea visible o un resaltado alrededor del control que ahora recibe la entrada del teclado.
↗ -
04 · Más detalle Aqua Aqua
Aqua es un estilo de interfaz brillante de los primeros macOS. Usa controles que brillan, profundidad como de gel, rayas finas y detalles en azul brillante.
↗ -
05 · Más detalle Border Radius & Squircle — Paquete de aprendizaje Border Radius & Squircle — Learning Bundle
Esta guía separa tres ideas. Son el border-radius estándar de CSS, la forma de esquina en borrador: squircle, y otras formas similares a squircles o máscaras de plataforma. El paquete no es un término de diseño estándar único.
↗ -
06 · Más detalle Brutalismo Web Web Brutalism
El brutalismo web es un estilo web crudo. Muestra la estructura, los valores predeterminados del navegador, la tipografía simple y la aspereza planeada en lugar del pulido habitual.
↗ -
07 · Más detalle Claymorphism Claymorphism
Claymorphism es un estilo divertido con formas hinchadas y esquinas redondas. Las sombras suaves y los colores pastel hacen que parezca arcilla.
↗ -
08 · Núcleo Componente Component
Un Componente es una pieza reutilizable de una interfaz con estructura, comportamiento, estados y límites claros.
↗ -
09 · Núcleo Contraste de color Color Contrast
El contraste de color es la diferencia de luz medida entre el contenido y el fondo cercano. Muestra si los textos y bordes importantes son fáciles de ver.
↗ -
10 · Núcleo Design Token Design Token
Un Design Token le da nombre a una decisión de diseño. Por ejemplo: un color, un espacio, una fuente o la velocidad de una animación.
↗ -
11 · Más detalle Directrices de Interfaz Humana de Apple Apple Human Interface Guidelines
Las Directrices de Interfaz Humana de Apple explican el diseño para sus plataformas. Cubren acciones, visuales, controles, entrada, accesibilidad y las diferencias entre plataformas.
↗ -
12 · Núcleo Diseño Adaptable Responsive Design
El Diseño Adaptable permite que la disposición, el contenido y los controles cambien para adaptarse al espacio y dispositivo disponibles.
↗ -
13 · Núcleo Diseño editorial Editorial Design
El diseño editorial organiza una historia a través del ritmo de lectura, tipografía, imágenes, subtítulos y patrones de página que se repiten.
↗ -
14 · Núcleo Diseño Material Material Design
Diseño Material es un sistema para componentes e interacciones. Utiliza superficies en capas, movimiento con propósito, diseños flexibles y tokens de diseño compartidos.
↗ -
15 · Núcleo Diseño Orgánico Organic Design
El Diseño Orgánico sigue formas encontradas en la naturaleza. Usa curvas irregulares, texturas táctiles, colores naturales y distribuciones menos mecánicas.
↗ -
16 · Núcleo Diseño Plano Flat Design
El diseño plano usa formas simples, colores sólidos y áreas planas claras, con poca profundidad falsa.
↗ -
17 · Más detalle Divulgación progresiva Progressive Disclosure
La Divulgación Progresiva muestra primero las opciones necesarias y revela opciones más difíciles solo cuando importan.
↗ -
18 · Núcleo Escala de espaciado Spacing Scale
Una Spacing Scale es un conjunto pequeño de tamaños de separación. Agrupa cosas y mantiene un ritmo visual constante.
↗ -
19 · Más detalle Escriba Escala Type Scale
Un Type Scale es un pequeño conjunto planeado de tamaños de texto y alturas de línea.
↗ -
20 · Núcleo Espacio de trabajo estilo Notion Notion-style Workspace
Un Workspace estilo Notion usa un aspecto de documento tranquilo. Favorece el texto legible, los bloques de contenido, controles discretos y espacio abierto.
↗ -
21 · Más detalle Esquina Squircle de CSS CSS Squircle Corner
En el borrador de CSS Borders Nivel 4, squircle es un valor de forma de esquina para una superelipse convexa entre redonda y cuadrada. Equivale a superelipse(2), necesita un radio de borde distinto de cero y aún requiere verificar compatibilidad con el navegador.
↗ -
22 · Núcleo Estado de Interacción Interaction State
Un estado de interacción muestra cómo está un control ahora. Ejemplos: normal, al pasar el mouse, con foco, al presionar, desactivado, cargando, error y éxito.
↗ -
23 · Núcleo Estética del terminal Terminal Aesthetic
La estética de terminal toma prestado de las pantallas de línea de comandos. Utiliza texto monoespaciado, jerarquía ajustada, marcas de aviso, pocos colores y estado claro.
↗ -
24 · Más detalle Estética Digital Y2K Y2K Digital Aesthetic
Esta estética digital es un estilo retro-futuro de finales de los años 1990 y principios de los 2000 de la cultura digital. A menudo utiliza cromo, píxeles, degradados brillantes y detalles de computadora juguetones.
↗ -
25 · Más detalle Estilo Memphis Memphis Style
El estilo Memphis es un aspecto postmoderno audaz. Utiliza formas fuertes, colores que chocan, patrones, equilibrio desigual y energía juguetona.
↗ -
26 · Más detalle Estilo suizo Swiss Style
El estilo suizo utiliza rejillas claras y diseños desequilibrados pero balanceados. También usa tipografía sans-serif, fotos y un orden visual estricto.
↗ -
27 · Más detalle Frutiger Aero Frutiger Aero
Frutiger Aero es un estilo esperanzador de mediados de los 2000. Mezcla interfaces brillantes con cielos azules, agua, plantas verdes, burbujas y tecnología de aspecto amigable.
↗ -
28 · Más detalle Glassmorfismo Glassmorphism
El glassmorfismo es un estilo visual con superficies claras en capas. Utiliza desenfoque, bordes claros y una pequeña sensación de profundidad.
↗ -
29 · Núcleo Gradiente Gradient
Un degradado es un cambio suave entre colores o transparencia. Puede seguir una línea, un círculo, un ángulo o una malla.
↗ -
30 · Más detalle Iconografía Iconography
La iconografía es un conjunto de símbolos compartido con apariencia uniforme y significados claros para acciones e ideas.
↗ -
31 · Núcleo Ilustración Juguetona Playful Illustration
La Ilustración Juguetona usa personajes, formas, colores y bromas visuales animadas. Puede añadir calidez, significado o carácter de marca.
↗ -
32 · Núcleo Jerarquía Visual Visual Hierarchy
La Jerarquía Visual guía lo que las personas notan primero, después y al final mediante tamaño, contraste, posición y espacio.
↗ -
33 · Núcleo Minimalismo Minimalism
El minimalismo elimina lo que un diseño no necesita. Aun así mantiene el producto claro, útil y distinto.
↗ -
34 · Núcleo Modo oscuro Dark Mode
El Modo oscuro cambia superficies, texto, bordes, medios y estados para un entorno oscuro.
↗ -
35 · Más detalle Neobrutalismo Neobrutalism
El neobrutalismo es un estilo digital audaz y de alto contraste. Utiliza formas simples, bordes gruesos, colores directos y un diseño mecánico claro.
↗ -
36 · Más detalle Neumorfismo Neumorphism
El neumorfismo es un estilo suave y de bajo contraste. Las sombras claras y oscuras hacen que los controles parezcan elevados o presionados sobre una superficie de un solo color.
↗ -
37 · Núcleo Paleta de colores Color Palette
Una paleta de colores es un conjunto de colores planificado. Cada color tiene un rol, estado o superficie claros.
↗ -
38 · Núcleo Radio de borde en CSS CSS Border Radius
El border-radius de CSS hace que las esquinas del cuadro sean de cuartos de elipse usando radios horizontales y verticales. Cambia la pintura y el recorte, pero no el tamaño del cuadro en el diseño, y no crea un squircle matemático.
↗ -
39 · Núcleo Sistema de diseño Design System
Un Design System es un conjunto de reglas, design tokens, componentes, patrones y guías que se mantiene y se comparte.
↗ -
40 · Núcleo Sitio corporativo B2B B2B Corporate Site
Un sitio corporativo B2B ayuda a las empresas a evaluar las habilidades, reglas, confianza y compatibilidad de otra empresa. También facilita la compra o las alianzas.
↗ -
41 · Núcleo Sitio de Marketing de SaaS SaaS Marketing Site
Un SaaS Marketing Site explica un problema y un servicio de software a una audiencia. Ayuda a los visitantes a juzgar si encaja y a elegir el siguiente paso.
↗ -
42 · Más detalle Skeuomorfismo Skeuomorphism
El skeuomorfismo copia objetos reales familiares para explicar un control digital. También puede copiar sus materiales.
↗ -
43 · Núcleo Sombra y Elevación Shadow & Elevation
Una sombra es un efecto visual. La elevación es la relación de profundidad entre superficies que la sombra ayuda a explicar.
↗ -
44 · Núcleo Tipografía Typography
La tipografía es cómo se eligen y organizan los estilos de texto para que las palabras sean legibles, ordenadas y coherentes con la marca.
↗ -
45 · Núcleo Variante Variant
Un Variant es una versión aprobada de un componente para un tamaño, fuerza o configuración diferente.
↗ -
46 · Núcleo Venta directa al consumidor (E-commerce) DTC E-commerce
El E-commerce DTC permite a una marca vender directamente al consumidor. Abarca el descubrimiento, las opciones de producto, el pago, la entrega y el soporte postventa.
↗ -
47 · Más detalle Vidrio Líquido Liquid Glass
Vidrio Líquido es un estilo de material claro y en movimiento. Utiliza flexión similar a una lente, reflejos y formas que parecen unirse o flexionarse.
↗ -
48 · Más detalle Wabi-sabi Wabi-sabi
Wabi-sabi es una visión japonesa de la belleza. Valora los límites, el cambio, la forma irregular, la edad y los materiales honestos por encima del pulido perfecto.
↗ -
49 · Más detalle Web vernácula Vernacular Web
Web vernácula copia los sitios cotidianos que crean las comunidades. Se diferencia de los sistemas pulidos fabricados por grandes grupos.
↗ -
50 · Más detalle Windows Aero Windows Aero
Windows Aero es un estilo de escritorio de finales de la década de 2000. Usa marcos de ventana transparentes, vidrio difuminado, brillo suave y bordes en capas.
↗