Aprende con Feuxui
Aprende
diseño
Los conceptos que explico en mis reels, organizados por tema y no por número de video. Cada uno con su explicación, ejemplos de así no / así sí, animaciones que puedes tocar y una lista para aplicarlo hoy.
38
conceptos
6
temas
109
demos interactivas
13
reels
Entra a los conceptos
Elige por
dónde empezar
Serie · 30 conceptos
→
30 tips
de diseño
Contraste, paleta, grilla, tipografía, jerarquía y 25 más. Los fundamentos que uso todos los días, explicados con animaciones que puedes tocar.
Color
Tipografía
Composición
Profundidad
Criterio
Serie · UX / UI
→
Tips
de UX
Interfaces reales corregidas paso a paso: del antes al después. Tarjetas, íconos, menús, heros, enlaces, formularios y botones.
Antes → después
Interfaces
Reels
Los reels
Mira, toca,
aplica
Cada reel dura un minuto. Abajo de cada uno está su página con todo el detalle.
6 conceptos
El color comunica antes que las palabras. Aquí está lo que necesitas para que tu texto se lea, tu paleta tenga orden y tus imágenes se sientan reales: contraste, paletas cortas, fondo, temperatura, saturación y luz.
Contraste
Reel · 3 demos
Brillo opuesto y ratio 4.5:1: la base para que tu texto se lea siempre.
Paleta de color
Reel · 3 demos
Tres colores y la regla 60-30-10 para que tu diseño deje de verse ruidoso.
Color y fondo
3 demos
El mismo color se lee o desaparece según su fondo. Aprende a ajustarlo.
Temperatura de color
3 demos
Cálidos adelante, fríos atrás: profundidad y foco solo con color.
Saturación
3 demos
Controla la intensidad: solo tu acento va a tope, lo demás con calma.
Caída de luz
3 demos
Degradados suaves, no sombras duras: imita cómo cae la luz real.
5 conceptos
La tipografía es la voz de tu diseño. Jerarquía para guiar la mirada, combinaciones que no se pelean, énfasis con intención y el espaciado fino que separa lo amateur de lo profesional.
Jerarquía visual
Reel · 3 demos
Tres niveles y una escala: así decides qué se ve primero.
Combinación tipográfica
Reel · 3 demos
Una serif con carácter arriba y una sans simple para leer. Máximo dos.
Énfasis
Reel · 3 demos
Tamaño, color o movimiento: haz que una sola cosa destaque.
Tracking y espaciado entre letras
3 demos
Más grande, más cerrado. Los valores de tracking por tamaño.
Interlineado
3 demos
Párrafos a 1.5, titulares casi a 1. Los valores para copiar.
12 conceptos
Dónde va cada cosa. Grillas, alineación, proximidad, patrones de lectura, márgenes y equilibrio: las reglas invisibles que hacen que un diseño se sienta ordenado sin que nadie sepa por qué.
Grilla
Reel · 3 demos
Columnas, márgenes y medianiles: el esqueleto que ordena todo.
Alineación
Reel · 3 demos
Un eje y nada al azar: así tu diseño se ve intencional.
Proximidad
Reel · 3 demos
Acerca lo que va junto, separa lo que no. Sin agregar líneas.
Lectura en Z
Reel · 3 demos
Logo arriba, mensaje en la diagonal y botón al final del recorrido.
Regla de tercios
3 demos
Divide en 3 × 3 y pon lo importante en los cruces, no en el centro.
Simetría y asimetría
3 demos
Simetría para calma, asimetría para energía. Nunca a medias.
Tensión visual
3 demos
Acerca al borde, corta, gira un poco: un desequilibrio pequeño da vida.
Encuadre
3 demos
Rodea lo importante con formas, líneas o espacio y el ojo irá directo.
Márgenes
3 demos
El mismo margen en los cuatro lados: entre el 5 y el 10% del lado corto.
Balance óptico
3 demos
La medida es el punto de partida. El ojo tiene la última palabra.
Eco de forma
2 demos
Repite una forma o un ángulo en 3 lugares y todo se ve de la misma familia.
Perspectiva
Reel · 3 demos
Grande cerca, pequeño lejos: 4 herramientas para dar profundidad a un diseño plano.
4 conceptos
Sombras, capas, grano y efectos. Herramientas poderosas que bien usadas dan profundidad y textura, y mal usadas hacen que todo se vea barato.
Sombras
2 demos
Una sola luz y sombras suaves: tres niveles para dar profundidad sin ensuciar.
Overlays y capas
3 demos
¿No se lee tu texto sobre la foto? Ponle una capa encima, no cambies la fuente.
Ruido y grano
3 demos
Un poco de grano rompe la perfección digital. Que se sienta, no que se vea.
Efectos
3 demos
Un efecto por diseño y con un motivo. Si no sabes para qué está, quítalo.
3 conceptos
Lo que no está en ningún manual: simplificar, aprender a mirar como diseñador y saber cuándo romper las reglas a propósito.
Principio KISS
2 demos
Hazlo corto y simple: quita hasta que no sobre nada y el mensaje se lea en 3 segundos.
Ojo de diseñador
2 demos
5 preguntas para entender por qué un diseño funciona y llevar la idea al tuyo.
Rompe las reglas
3 demos
Las 30 reglas en una página. Apréndelas, úsalas y rómpelas a propósito.
8 conceptos
Interfaces reales corregidas paso a paso, del antes al después. Tarjetas, íconos, menús, heros, enlaces, formularios y botones que la gente entiende sin pensar.
Texto centrado
——→ UX / UI
Texto centrado
Reel · 3 demos
Por qué el texto centrado cansa y cómo arreglar una tarjeta en 3 pasos.
Íconos con texto
Reel · 3 demos
Por qué tus íconos necesitan una palabra y cómo armar una barra clara.
Menú hamburguesa
Reel · 3 demos
Cuándo usar el menú hamburguesa y cómo armar un menú de escritorio que sí se usa.
Hero sin carrusel
——→ UX / UI
Hero sin carrusel
2 demos
Por qué tu carrusel no comunica y cómo armar un hero con un mensaje y una acción.
Enlaces descriptivos
——→ UX / UI
Enlaces descriptivos
3 demos
Por qué «haz clic aquí» no funciona y cómo escribir enlaces que se entienden solos.
Zona del pulgar
——→ UX / UI
Zona del pulgar
3 demos
Dónde poner los botones en el celular para que se toquen sin estirarse.
Etiquetas de formulario
——→ UX / UI
Etiquetas de formulario
3 demos
Por qué el placeholder no reemplaza la etiqueta y cómo armar un formulario claro.
Jerarquía de botones
——→ UX / UI
Jerarquía de botones
3 demos
Cómo diferenciar el botón principal del secundario y nombrar bien cada acción.
¿Tienes un proyecto?
¿Y TU MARCA?
Si además de aprender quieres que diseñemos juntos tu marca, sitio o producto, escríbeme.