El color: la herramienta más poderosa del diseño
Antes de hablar de emociones o significados, hay que entender la ciencia del color: cómo se estructura y por qué ciertas combinaciones funcionan mejor que otras. Esa ciencia tiene un mapa, y se llama círculo cromático.
El mapa de los colores
Primarios
Los colores base: rojo, verde y azul en las pantallas (RGB). No se obtienen mezclando.
Secundarios
Resultado de mezclar dos primarios.
Terciarios
Mezclas más específicas entre un primario y un secundario.
Las relaciones que siempre funcionan
Sobre ese mapa se dibujan combinaciones armónicas. No son arbitrarias: son el resultado de cómo el cerebro disfruta la información visual.
Complementarios
Opuestos en el círculo. Máximo contraste. Ideales como acento; en grandes áreas abruman.
Análogos
Vecinos en el círculo. Armonía y calma. Para sitios que buscan cohesión.
Tríada
Tres colores equidistantes. Equilibrio y dinamismo: variedad sin caos.
Semicomplementarios
Contraste, pero con menos tensión que los complementarios puros.
Tocá cualquier color del círculo: el panel te muestra al instante su complementario, sus análogos y su tríada, con las paletas listas para copiar. Todo se actualiza en tiempo real, sin botones de ejecutar.
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá las relaciones de color desde la de MAYOR contraste hasta la de MENOR contraste.
Arrastrá el nombre de la relación al hueco de la paleta que la describe. Hay nombres trampa.
Completá cada descripción con la palabra que falta.
Los colores están opuestos en el círculo y crean el máximo contraste. Los colores están uno al lado del otro y transmiten armonía. La usa tres colores equidistantes: equilibrio y dinamismo. Para que todas las personas puedan leer, el texto necesita buen con el fondo.
Elegí una opción por pregunta. Se bloquea al responder y acumulás puntaje.
Elegí UN color del círculo cromático de arriba y generá sus tres paletas (complementaria, análoga y tríada). Copialas con el botón 📋 y pegalas en tus apuntes. Marcá lo que hiciste:
Elegí uno de estos sitios ficticios: blog de viajes "Mochila Andina", tienda de ropa "Hilo Urbano" o portal educativo "AulaViva". Diseñá su paleta con la herramienta y escribí abajo qué relación de color elegiste y POR QUÉ esa relación le sirve a esa marca. No hay una única respuesta correcta: lo que vale es la justificación.
¿Por qué el rojo te pone alerta y el azul te calma?
¿Por qué las marcas de lujo usan dorado? ¿Por qué casi todos los bancos son azules? La respuesta está en la psicología del color: cómo el cerebro asocia emociones a los colores.
Cálidos, fríos y neutros
Cálidos
Rojo, naranja, amarillo: energía, pasión, urgencia. Dominan las llamadas a la acción y la comida rápida.
Fríos
Azul, verde, púrpura: calma, confianza, crecimiento. El azul es el más usado en la web por su profesionalismo.
Neutros
Blanco, gris, negro: dan respiro visual y dejan destacar a los demás colores.
🔍 ¿Por qué los cálidos nos "activan"?
Deslizá por el espectro: el panel cambia de color y te muestra en tiempo real qué emociones transmite, sus asociaciones culturales, marcas ficticias que lo usarían y si es cálido, neutro o frío. Después probá el selector de contexto.
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá los colores desde el MÁS energético hasta el MENOS energético.
Arrastrá la emoción al color que mejor la transmite. Hay emociones trampa.
Completá cada frase con la palabra que falta.
Los colores cálidos como el rojo evocan energía y . El color más usado en diseño web es el , porque comunica confianza. Los colores (blanco, gris, negro) dan respiro visual. En Occidente el blanco es pureza; en algunas culturas orientales es .
Elegí una opción por pregunta.
Usá el deslizador para elegir 3 colores y escribí por qué funcionarían juntos para un sitio web ficticio (vos elegís cuál). Apoyate en lo que te dice la herramienta.
Analizá la paleta de color de 3 sitios web que uses seguido (sin nombrarlos: describilos, por ejemplo "una app de mensajes verde"). Para cada uno escribí: qué emociones transmite su paleta y si creés que logra su objetivo de marca.
Comunicar sin palabras
Los elementos visuales comunican ideas sin texto. Una lupa dice "búsqueda". Una flecha dice "siguiente". La mitad de la comunicación de una página es visual, no escrita.
El alfabeto visual del diseño
Líneas
Horizontales: calma. Verticales: fuerza. Diagonales: movimiento. Curvas: suavidad.
Figuras
Círculos atraen, cuadrados dan confianza, triángulos dirigen la mirada.
Imágenes
Valen mil palabras, pero deben tener calidad y propósito. Una foto borrosa hunde la credibilidad.
Íconos
Lenguaje casi universal. La clave es la consistencia: un solo estilo en todo el sitio.
🔍 ¿Cómo sé si un ícono es bueno?
Tocá cada tarjeta para expandirla: encontrás la explicación, recomendaciones de uso y un control interactivo para experimentar en tiempo real.
📏Líneas
Las líneas dirigen la mirada. Un sitio ficticio de noticias usa líneas horizontales para separar artículos (estabilidad); un sitio deportivo usa diagonales en sus banners (movimiento).
Cuándo usarlas: separadores de secciones, subrayados de énfasis, guías visuales hacia el botón principal.
0° — horizontal: estabilidad, calma.
🔷Figuras geométricas
El círculo atrae (botón de reproducir), el cuadrado da confianza (tarjetas de producto), el triángulo dirige (flechas de "siguiente"). Las marcas los usan a propósito.
Cuándo usarlas: botones, avatares circulares, tarjetas cuadradas, flechas de navegación.
🌿Figuras orgánicas
Manchas, ondas y formas irregulares comunican naturalidad y calidez. Un sitio ficticio de yoga usa fondos con ondas suaves; uno de juguetes usa manchas de colores.
Cuándo usarlas: fondos decorativos, separadores con ondas, marcas amigables.
🖼️Imágenes
Uso correcto: una tienda ficticia muestra fotos nítidas del producto sobre fondo limpio. Uso incorrecto: la misma tienda con fotos borrosas y estiradas — la confianza se derrumba al instante.
Recomendación: calidad alta, propósito claro y siempre con texto alternativo para accesibilidad.
🔣Íconos
Consistencia ante todo: todos planos, o todos con línea, pero nunca mezclados. Si un ícono necesita texto al lado para entenderse, probablemente no es un buen ícono.
✅ mismo estilo
❌ estilos mezclados
🔤Tipografía
Serif (con remates) = clásico y formal: diarios, publicaciones académicas. Sans-serif (sin remates) = moderno y limpio: apps y sitios tech.
El diseño comunica antes que las palabras.
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá los elementos desde el de MAYOR impacto visual hasta el de MENOR.
Arrastrá la sensación al elemento que la transmite. Hay trampas.
Completá cada descripción con el elemento correcto.
Las líneas comunican movimiento y dinamismo. Las fuentes tienen remates decorativos: clásicas y formales. Si un necesita texto al lado para entenderse, no es bueno. Toda imagen debe tener un : ilustrar, demostrar o evocar.
Mirá esta página ficticia y anotá qué elementos gráficos usa y para qué: "GalaxiaGamer, tienda de videojuegos: banner con diagonales neón, botones redondeados verdes, separadores horizontales grises entre productos, íconos de línea consistentes, fotos nítidas de cada juego."
Escribí una página HTML simple que use correctamente líneas (<hr> o bordes), figuras (con CSS), tipografía coherente e íconos de un solo estilo (podés usar emojis). La vista previa se actualiza en tiempo real mientras escribís. El editor arranca vacío a propósito.
UX: cómo se siente usar tu sitio
La experiencia de usuario (UX) es cómo se siente usar un sitio: no solo cómo se ve, sino si es fácil, claro e intuitivo. Un sitio hermoso pero confuso tiene mala UX.
Los 5 pilares de una buena experiencia
Usabilidad
Que sea fácil de entender. Nunca debería surgir el "¿cómo hago para…?".
Accesibilidad
Que funcione para TODAS las personas: contraste, texto alternativo, teclado.
Feedback
El sistema responde a cada acción: el botón cambia, algo pasa.
Velocidad
Un sitio lento espanta. La paciencia del usuario es corta.
Evaluá estos 3 sitios ficticios. Marcá cada criterio que el sitio cumple: el puntaje UX (1 a 10) y la lista de mejoras se actualizan en tiempo real.
Sitio A · "CompráTodo" (e-commerce)
Auriculares Nova X
$ 1.990 — envío gratisAgregar al carrito
Sitio B · "AulaViva" (blog educativo)
Categorías: Ciencia · Historia · Arte
Leer artículo
Sitio C · "Conectar" (red social)
@leo.dev comentó tu estado
Ver más
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá los pilares en el orden en que los presentamos, del primero (la base de todo) al último.
Arrastrá el pilar UX que falla en cada problema. Hay pilares trampa.
UX es cómo se usar un sitio; no es solo visual. El texto alternativo en imágenes es un requisito de . Cuando el sistema responde a tus acciones, eso se llama . Un sitio que tarda mucho en cargar falla en de carga.
Usá el Analizador de arriba con los 3 sitios y documentá los resultados: ¿qué score sacó cada uno? ¿Cuál fue el mejor y por qué?
Diseñá la página de inicio de un sitio ficticio aplicando los pilares: título que explique qué hace el sitio, menú claro, botón con feedback (:hover), buen contraste y una imagen con alt. Vista previa en vivo; el editor arranca vacío.
UI: cómo se ve tu sitio
Si la UX es cómo se SIENTE, la UI es cómo se VE. Son complementarias: lo ideal es un sitio que se vea bien Y se sienta bien de usar.
Los ingredientes de una buena interfaz
Tipografía
Serif = clásica; sans-serif = moderna. Regla de oro: máximo 2 o 3 familias por sitio.
Cohesión de color
Todos los botones principales del mismo color. La consistencia da profesionalismo.
Botones y formularios
Botones que parezcan presionables, con texto de acción: "Comprar", no "OK".
Whitespace
El espacio en blanco no es vacío: deja respirar y destaca lo importante.
🔍 ¿Por qué "máximo 2 o 3 fuentes"?
Mové los controles y mirá cómo el botón, la tarjeta y el formulario cambian en tiempo real. El botón "Ver CSS" te muestra el código real generado, listo para copiar — así conectás el diseño con lo que aprendiste de CSS.
🎛️ Botón
🃏 Tarjeta (card)
🎨 Paleta de la marca
Auriculares Nova X
Sonido envolvente y batería para toda la semana.
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá los elementos de UI desde el que el ojo percibe PRIMERO hasta el que percibe ÚLTIMO al abrir una página.
Arrastrá la propiedad de diseño al componente donde más importa. Hay trampas.
Las fuentes sin remates se llaman y comunican modernidad. El texto de un botón debe ser una clara: "Comprar", "Enviar". El espacio en blanco se llama y es un elemento de diseño. La regla de oro: máximo familias de fuentes por sitio.
Inventá una marca ficticia y usá el Constructor de arriba para crear su set: botón, tarjeta y paleta de 5 colores coherentes. Copiá el CSS generado y pegalo abajo como registro de tu kit.
Elegí: blog, e-commerce o red social (ficticios). Escribí su interfaz con coherencia total: misma paleta en todos los botones, máximo 2 familias tipográficas, whitespace generoso y formulario limpio. Vista previa en vivo; el editor arranca vacío.
¿Por qué algunos sitios se ven equilibrados y otros caóticos?
La respuesta es la composición: cómo se organizan los elementos en el espacio. La herramienta central es el grid, una estructura invisible que alinea todo.
Las claves de una composición que funciona
Jerarquía visual
Lo importante, más grande y vibrante. El título manda; el cuerpo acompaña.
Regla de los tercios
Dividí la pantalla en 9 y ubicá lo importante en las intersecciones.
Contraste y énfasis
Destacá con color, tamaño o tipografía: lo distinto salta a la vista.
Simetría / asimetría
Simétrica: orden y formalidad. Asimétrica: dinamismo y modernidad.
Este es un grid de 12 columnas, el estándar del diseño web. Arrastrá cada bloque al grid y elegí cuántas columnas ocupa. Mientras arrastrás, el borde te avisa en tiempo real: verde = la fila cierra en 12 columnas, rojo = quedó desalineada. El panel de abajo lee la "emoción" de tu composición.
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá los elementos del MÁS grande/importante al MÁS chico según una jerarquía visual clara.
Arrastrá la sensación que produce cada composición. Hay trampas.
Completá las propiedades de un layout estándar de 12 columnas.
El grid estándar del diseño web tiene columnas. Un contenido de 8 columnas + barra lateral de columnas cierran la fila. La regla de los divide la pantalla en 9 secciones (3×3). La composición comunica dinamismo y modernidad.
Usá la herramienta de grid para recrear este layout descrito: "Encabezado a lo ancho (12), debajo contenido principal (8) con barra lateral (4), y un pie de página a lo ancho (12)." Lográ que el borde quede verde.
Diseñá un sitio completo con CSS Grid: usá display: grid, jerarquía visual clara (tamaños de título escalonados) y composición equilibrada. Podés apoyarte en el CSS que genera la herramienta. Vista previa en vivo; el editor arranca vacío.
¡Es hora de diseñar! 🎨
Aplicás todos los principios en un proyecto real.
🎯 MISIÓN: Rediseño de un Sitio Web
Te damos un sitio web mal diseñado (está en la pestaña "Original"). Tu tarea: analizarlo, identificar todos los problemas de diseño — color, tipografía, espaciado, jerarquía, accesibilidad, UX — y proponer un rediseño completo con todo lo aprendido.
- Tu análisis del sitio original: qué problemas tiene y cómo afectan al usuario
- Tu propuesta: qué paleta usarías, qué tipografía, qué layout
- El rediseño completo en HTML/CSS aplicando todos los principios
- El checklist de principios de diseño implementados
👀 Analizá el sitio original: anotá todos los problemas de diseño.
🎨 Diseñá la solución: colores, tipografía, layout, componentes.
🖌️ Creá un mood board mental: qué emociones transmite tu diseño.
💻 Codeá el rediseño en HTML/CSS con todos los principios.
✅ Revisá tu checklist de principios de diseño.
📥 Descargá tu trabajo.
📝 Tu análisis y propuesta
Antes de tocar código: ¿qué está mal en el original y qué vas a hacer al respecto?
💻 Simulador: Original vs. Rediseño
📖 Glosario interactivo del recurso
Tocá cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.
No encontramos resultados para tu búsqueda. Probá con otra palabra. 🔎