Serie completa
30 tips
de diseño
La serie de reels de Feuxui en orden: treinta fundamentos de diseño gráfico, del contraste a romper las reglas. Cada tip tiene su página con explicación, animaciones interactivas, ejemplos de así no / así sí y una lista para aplicarlo hoy.
30
Contraste
Tip 01 · Reel · 3 demos
Brillo opuesto y ratio 4.5:1: la base para que tu texto se lea siempre.
Paleta de color
Tip 02 · Reel · 3 demos
Tres colores y la regla 60-30-10 para que tu diseño deje de verse ruidoso.
Grilla
Tip 03 · Reel · 3 demos
Columnas, márgenes y medianiles: el esqueleto que ordena todo.
Combinación tipográfica
Tip 04 · Reel · 3 demos
Una serif con carácter arriba y una sans simple para leer. Máximo dos.
Perspectiva
Tip 05 · Reel · 3 demos
Grande cerca, pequeño lejos: 4 herramientas para dar profundidad a un diseño plano.
Énfasis
Tip 06 · Reel · 3 demos
Tamaño, color o movimiento: haz que una sola cosa destaque.
Alineación
Tip 07 · Reel · 3 demos
Un eje y nada al azar: así tu diseño se ve intencional.
Proximidad
Tip 08 · Reel · 3 demos
Acerca lo que va junto, separa lo que no. Sin agregar líneas.
Lectura en Z
Tip 09 · Reel · 3 demos
Logo arriba, mensaje en la diagonal y botón al final del recorrido.
Jerarquía visual
Tip 10 · Reel · 3 demos
Tres niveles y una escala: así decides qué se ve primero.
Simetría y asimetría
Tip 11 · 3 demos
Simetría para calma, asimetría para energía. Nunca a medias.
Principio KISS
Tip 12 · 2 demos
Hazlo corto y simple: quita hasta que no sobre nada y el mensaje se lea en 3 segundos.
Regla de tercios
Tip 13 · 3 demos
Divide en 3 × 3 y pon lo importante en los cruces, no en el centro.
Tensión visual
Tip 14 · 3 demos
Acerca al borde, corta, gira un poco: un desequilibrio pequeño da vida.
Encuadre
Tip 15 · 3 demos
Rodea lo importante con formas, líneas o espacio y el ojo irá directo.
Tracking y espaciado entre letras
Tip 16 · 3 demos
Más grande, más cerrado. Los valores de tracking por tamaño.
Ojo de diseñador
Tip 17 · 2 demos
5 preguntas para entender por qué un diseño funciona y llevar la idea al tuyo.
Efectos
Tip 18 · 3 demos
Un efecto por diseño y con un motivo. Si no sabes para qué está, quítalo.
Márgenes
Tip 19 · 3 demos
El mismo margen en los cuatro lados: entre el 5 y el 10% del lado corto.
Sombras
Tip 20 · 2 demos
Una sola luz y sombras suaves: tres niveles para dar profundidad sin ensuciar.
Overlays y capas
Tip 21 · 3 demos
¿No se lee tu texto sobre la foto? Ponle una capa encima, no cambies la fuente.
Color y fondo
Tip 22 · 3 demos
El mismo color se lee o desaparece según su fondo. Aprende a ajustarlo.
Ruido y grano
Tip 23 · 3 demos
Un poco de grano rompe la perfección digital. Que se sienta, no que se vea.
Balance óptico
Tip 24 · 3 demos
La medida es el punto de partida. El ojo tiene la última palabra.
Eco de forma
Tip 25 · 2 demos
Repite una forma o un ángulo en 3 lugares y todo se ve de la misma familia.
Caída de luz
Tip 26 · 3 demos
Degradados suaves, no sombras duras: imita cómo cae la luz real.
Temperatura de color
Tip 27 · 3 demos
Cálidos adelante, fríos atrás: profundidad y foco solo con color.
Saturación
Tip 28 · 3 demos
Controla la intensidad: solo tu acento va a tope, lo demás con calma.
Interlineado
Tip 29 · 3 demos
Párrafos a 1.5, titulares casi a 1. Los valores para copiar.
Rompe las reglas
Tip 30 · 3 demos
Las 30 reglas en una página. Apréndelas, úsalas y rómpelas a propósito.
Sigue con la serie UX / UI
→
Tips
de UX
Cuando domines los fundamentos, pásalos a interfaces reales: tarjetas, íconos, menús, formularios y botones corregidos paso a paso.
Antes → después
Interfaces
¿Tienes un proyecto?
HABLEMOS
¿Tienes una marca, un producto o una campaña en mente? Cuéntame la idea y la aterrizamos juntos.