ESTUDIO DE DISEÑO
Ideas que se convierten en experiencias.
Diseñamos sitios claros para que tus visitantes encuentren lo que necesitan.
DISEÑO VISUAL · 01
Ordena lo que importa.
Una página comunica antes de que leas cada palabra. Aprende a dirigir la mirada con tamaño, espacio, alineación y estructura.
DISEÑO QUE PUEDES PROBAR
Con jerarquía. Sin jerarquía.
El contenido es el mismo. Cambia cómo reconoces la prioridad, el grupo y la acción.
ESTUDIO DE DISEÑO
Ideas que se convierten en experiencias.
Diseñamos sitios claros para que tus visitantes encuentren lo que necesitan.
Los botones son muestras visuales, no envían datos. La jerarquía visual no sustituye la jerarquía semántica: h1, h2 y h3 deben conservar un orden lógico.
Tamaño y peso
Un título relevante puede ser mayor y más pesado que el texto. Si todo grita, nada destaca.
Espacio y agrupación
Acerca una etiqueta a su campo y separa grupos distintos. El espacio crea relaciones.
Color y posición
Reserva el acento para prioridades. Coloca primero la información necesaria para actuar; el patrón de lectura depende del contenido y del idioma.
DISEÑO QUE PUEDES PROBAR
La retícula de 12 columnas.
12 se divide entre 2, 3, 4 y 6: permite mitades, tercios y cuartos. Es una herramienta de organización, no una obligación.
.reticula {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
}
.contenido { grid-column: span 8; }
.lateral { grid-column: span 4; }
@media (max-width: 700px) {
.contenido, .lateral { grid-column: 1 / -1; }
}Contenedor, columnas y gutters
El contenedor limita el ancho; las columnas definen las áreas; los gutters separan áreas. Los márgenes exteriores son otra decisión. En móvil puedes apilar el contenido: no necesitas comprimir doce columnas de texto.
DISEÑO QUE PUEDES PROBAR
Distribuciones de página completas.
Cada estructura resuelve una tarea distinta. Observa el recorrido antes de elegir la distribución.
Contenido principal
Textos, servicios o resultados.
Landing
Problema, propuesta, evidencia y acción. Una portada breve puede dar contexto; no tapes la tarea principal con un hero enorme.
Panel o catálogo
Controles y resultados visibles pronto. La navegación permanece clara y los filtros conservan contexto.
Editorial o documentación
Texto con medida cómoda, índice cuando haga falta y elementos secundarios que no interrumpan la lectura.
Cómo traducir la distribución a HTML
<header>Marca y navegación global</header>
<main>
<section aria-labelledby="titulo">
<h1 id="titulo">Contenido principal</h1>
<article>Una unidad independiente</article>
</section>
<aside>Información relacionada</aside>
</main>
<footer>Fuentes y enlaces</footer>La posición visual no determina la etiqueta: una columna no es automáticamente un aside. El significado del contenido decide.
DISEÑO QUE PUEDES PROBAR
Un sistema de 8 puntos.
Usa una escala de espacios repetible: 8, 16, 24, 32, 48 y 64 px. Mantiene un ritmo común entre componentes.
UN MISMO RITMO
Un poco de aire cambia la lectura.
El padding separa el contenido del borde. El gap separa los elementos entre sí.
8 puntos no significa que toda medida deba ser múltiplo de 8. Bordes de 1 px, ajustes ópticos e iconos pueden necesitar otras medidas. En web también puedes expresar la escala en rem para respetar ajustes de fuente.
DISEÑO QUE PUEDES PROBAR
C.R.A.P.: cuatro decisiones conectadas.
Contraste, repetición, alineación y proximidad ayudan a revisar una composición. Son principios de diseño, no una garantía porcentual ni un criterio automático de calidad.
Estos cuatro principios se popularizaron en The Non-Designer’s Design Book, de Robin Williams. Los ejemplos de este capítulo son propios.
Contraste
Haz distinguibles las prioridades con tamaño, peso, espacio y color. No basta cambiar dos tonos casi idénticos.
Repetición
Repite patrones de tipografía, botones, espacios y estados. Reutilizar un sistema permite reconocer acciones.
Alineación
Comparte bordes y ejes. La retícula aporta relaciones visibles sin tener que dibujar cada línea.
Proximidad
Acerca lo relacionado; separa lo que pertenece a grupos distintos. La distancia comunica estructura.
Tu próximo proyecto
Una idea clara necesita un diseño claro.
Diseño web
Estructura, estilo y comportamiento.
Identidad visual
Un sistema que se reconoce.
Antes de dar una página por terminada
- ¿Hay una prioridad clara en cada pantalla?
- ¿Lo relacionado se percibe como grupo?
- ¿Los bordes y espacios siguen un sistema?
- ¿Los estados tienen texto o iconos además de color?
- ¿La composición sigue siendo usable con teclado, zoom y móvil?
PIENSA ANTES DE APLICAR