En esta página se agrupan guías de diseño de layouts DNP concretos, explicadas paso a paso y organizadas por capas, que pueden seguirse en vídeo y muestran cómo aplicar el sistema a casos reales como una portada simple o un bloque de categoría.
Guías de diseño de algunos layouts DNP
Estas guías no documentan todos los layouts disponibles. Usan algunos layouts como ejemplo para explicar cómo funciona el sistema DNP y poder crear otros por tu cuenta.
Cómo usar estas guías
Lee esta página en orden la primera vez. Después, vuelve solo a las secciones que necesites. No es necesario entenderlo todo desde el principio.
01 · El layout base DNP (1×4)
Un layout sencillo que sirve para entender toda la lógica de DNP: estructura, loops, contenido dinámico y orden visual. Si entiendes este layout, puedes construir muchos otros.
Esencial
Artes
Danza contemporánea con sensores corporales para crear coreografías en tiempo real
Un programa artístico ha desarrollado trajes equipados con sensores de movimiento que traducen la intensidad de cada gesto en proyecciones visuales durante la actuación. La […]
Explorar
Un equipo identifica un corredor subterráneo formado por lava sólida bajo una isla volcánica del Atlántico
Geólogos han cartografiado un túnel de lava que se extiende a lo largo de más de cinco kilómetros y que permanecía oculto desde erupciones antiguas. […]
Artes
Una tendencia emergente fusiona cerámica tradicional con técnicas de impresión 3D
Talleres artesanales están incorporando estructuras impresas en 3D para crear piezas híbridas que combinan precisión geométrica y acabado manual. La unión de ambas técnicas ha […]
Cosmos
Detectan un flujo de partículas energéticas procedente de una región desconocida del espacio profundo
Instrumentos de alta sensibilidad registraron variaciones en la llegada de partículas que no coinciden con fuentes conocidas como púlsares o remanentes de supernova. Los astrónomos […]
Guías por capas · Layout 1×4
Estas guías explican el layout 1x4 desde distintas capas. Cada capa desbloquea una parte del sistema.
Estructura del layout
Esencial
Qué se define aquíEn el layout base DNP 1×4, la estructura define una tarjeta única que se repite cuatro veces en una misma fila.
Antes de pensar en diseño o contenido, el layout necesita una estructura clara que permita esa repetición.
Elementos que intervienen en el 1×4
- Una Sección
- Una Fila (Row Flex) configurada para repetición
- Una sola Columna
- Un Loop aplicado a la column
- 4 entradas cargadas por el loop
Idea clave
El layout 1×4 no son cuatro columnas distintas.
Es una sola tarjeta bien construida que se repite cuatro veces.
Esta es la lógica que se reutiliza en todos los layouts DNP.
Error habitual
Crear cuatro columnas “a mano” en lugar de construir una tarjeta repetible.
Eso rompe el sistema y limita cualquier cambio posterior.
Resultado esperado
Un bloque 1×4 funcional:
cuatro tarjetas iguales, repetidas automáticamente, todavía sin afinar el diseño.
El loop
Clave
Qué se define aquí
En el layout base DNP 1×4, el loop es lo que convierte una tarjeta estática en cuatro tarjetas reales, cargadas desde las entradas del sitio.
Sin loop, no hay layout DNP.
Solo hay diseño vacío.
Qué controla el loop en el 1×4
- Qué tipo de contenido se muestra (entradas)
- Cuántas tarjetas aparecen (4)
- Qué entradas se cargan
- Qué entradas se excluyen
Idea clave
El loop no decide el diseño.
Decide qué contenido entra en la tarjeta.
El diseño se define después.
Decisiones habituales en el 1×4
- Número de entradas: 4
- Categoría: una sección concreta del periódico
- Offset: solo si ese contenido ya se ha usado antes
Error habitual
Tocar columnas, tamaños o estilos cuando el problema es el loop.
Si el loop está mal configurado, el layout parece roto aunque el diseño sea correcto.
Resultado esperado
Cuatro tarjetas visibles, con contenido real, aunque todavía sin jerarquía visual ni ajustes finos.
Contenido dinámico
Clave
Qué se define aquí
En el layout base DNP 1×4, el contenido dinámico conecta cada parte de la tarjeta con los datos reales de una entrada.
Aquí la tarjeta deja de ser una estructura repetida y pasa a mostrar información distinta en cada bloque.
Elementos dinámicos habituales en el 1×4
- Imagen destacada
- Título de la entrada
- Categoría (o términos)
- Extracto
Cada uno se inserta en su módulo correspondiente.
Idea clave
El contenido dinámico no se escribe.
Se extrae automáticamente de las entradas.
El layout no “contiene textos”.
Define dónde aparece cada dato.
Error habitual
Escribir texto manual dentro de los módulos y luego intentar repetirlo con un loop.
Eso rompe la lógica del sistema y obliga a rehacer el layout.
Resultado esperado
Cuatro tarjetas distintas:
cada una con su imagen, su título, su categoría y su extracto, cargados automáticamente.
Orden visual y grid
Diseño
Qué se define aquí
En el layout base DNP 1×4, el orden visual decide cómo se leen las cuatro tarjetas en conjunto.
Aquí no cambia el contenido ni el loop.
Cambia la forma en que el bloque se presenta.
Decisiones que se toman en el 1×4
- Número de columnas del grid (4 en escritorio)
- Espacios entre tarjetas (gaps)
- Relación visual entre imagen y texto
- Ritmo del bloque (compacto o aireado)
Idea clave
El grid no crea contenido.
Ordena la lectura.
Un mismo contenido puede:
- leerse como una lista
- o como un bloque editorial solo cambiando el orden visual.
Error habitual
Ajustar tamaños y espacios sin pensar en la lectura conjunta del bloque.
Eso genera layouts correctos técnicamente, pero confusos editorialmente.
Resultado esperado
Un bloque 1×4 claro y legible:
las cuatro tarjetas se perciben como una unidad coherente, no como elementos sueltos.
Ajuste avanzado DNP
Opcional
Qué se define aquí
En el layout base DNP 1×4, el ajuste avanzado permite afinar y escalar el bloque sin cambiar su lógica.
Nada de esto es necesario para que el layout funcione.
Sirve para controlar mejor el diseño cuando ya dominas las capas anteriores.
Herramientas que se usan en el 1×4
- Unidades fr para repartir el espacio
- Rules para comportamientos condicionales
- Presets para reutilizar configuraciones
- Variables para mantener coherencia global
Idea clave
El ajuste avanzado no crea el layout.
Solo lo hace más consistente y reutilizable.
Si no usas esta capa:
- el layout sigue funcionando
- el sistema no se rompe
Error habitual
Entrar aquí demasiado pronto.
Eso suele generar más confusión que control.
Resultado esperado
Un layout 1×4 más estable y fácil de mantener, especialmente cuando se repite en varias páginas o se combina con otros bloques.
Ver el proceso en pantalla 1
02 · Aplicar el sistema DNP a una portada simple (3 columnas)
Qué se muestra en este ejemplo
Cómo aplicar la lógica del layout base DNP a una portada más compleja, con jerarquía editorial y varias zonas de contenido.
No se introduce ningún concepto nuevo.
Cambian las decisiones editoriales, no el sistema.
Cuando el suelo se convierte en partitura de movimiento
Un equipo de coreógrafos ha desarrollado un escenario interactivo capaz de detectar la presión, la velocidad y la dirección de cada paso. Estas variaciones activan […]
Danza contemporánea con sensores corporales para crear coreografías en tiempo real
Artes
Un programa artístico ha desarrollado trajes equipados con sensores de movimiento que traducen la intensidad […]
Un equipo identifica un corredor subterráneo formado por lava sólida bajo una isla volcánica del Atlántico
Explorar
Geólogos han cartografiado un túnel de lava que se extiende a lo largo de más […]
Una tendencia emergente fusiona cerámica tradicional con técnicas de impresión 3D
Detectan un flujo de partículas energéticas procedente de una región desconocida del espacio profundo
Estructura general
La portada se construye a partir de una única sección con dos niveles claros:
Fila principal con dos columnas asimétricas:
- Columna izquierda: contenido principal
- .Columna derecha: contenido secundario
Dentro de la columna secundaria, una fila interna con dos columnas adicionales iguales
No se crean bloques independientes.
Se crean estructuras repetibles controladas por loops.
Lógica de loops y offsets
El orden editorial se define exclusivamente mediante el loop:
Loop principal
1 entrada
Offset 0
→ Noticia destacada
Loop secundario A
2 entradas
Offset 1
→ Noticias de apoyo
Loop secundario B
2 entradas
Offset 3
→ Noticias complementarias
Idea clave
El grid solo organiza el espacio.
El offset decide qué se muestra y en qué orden.
Qué se reutiliza del layout base
- Una sola tarjeta por grupo
- Repetición mediante loop
- Contenido dinámico en todos los módulos
- Enlaces aplicados desde el sistema, no manualmente
La lógica es exactamente la misma que en el layout 1×4.
Error habitual
Diseñar cada bloque a mano como si fueran piezas independientes.
Eso rompe:
- la escalabilidad
- el control editorial
- cualquier ajuste posterior
Resultado esperado
Una portada funcional con jerarquía clara, construida con el mismo sistema DNP y preparada para crecer o modificarse sin rehacer el diseño.
Ver el proceso en pantalla 2
03 · Bloque de categoría
Un layout sencillo pensado para mostrar contenido por categoría o bloques de noticias con reglas claras y sin sobrecargar el diseño.
Un ensayo internacional muestra que microhábitos digitales reducen la ansiedad tecnológica
Participantes de distintos países siguieron rutinas breves como desactivar notificaciones selectivas o limitar el acceso […]
Nuevos estudios vinculan la exposición diaria a espacios verdes con menor fatiga cognitiva
Investigadores han analizado la relación entre tiempo en parques urbanos y la mejora en la […]
Una investigación revela que caminar 15 minutos tras cada comida reduce los picos de glucosa
Un estudio clínico con más de 800 participantes confirma que paseos cortos tras las comidas […]
El consumo moderado de frutos secos mejora la memoria visual en adultos jóvenes
Un estudio internacional ha comprobado que la ingesta diaria de pequeñas raciones de frutos secos […]
Un estudio europeo alerta sobre el aumento del estrés térmico en ciudades mediterráneas
Investigadores de varias universidades han identificado un incremento sostenido de días extremos de calor en […]
Dormir 20 minutos más al día mejora la atención y la claridad mental
Investigadores de la Universidad de Groningen han seguido durante tres años a 1.200 personas y […]
Estructura del layout
Esencial
Qué se define aquí
Este layout parte de una estructura muy simple: una sola tarjeta que se repite mediante loop y se organiza después con reglas de grid. No se diseñan tarjetas distintas desde el inicio; la variación visual se introduce más tarde mediante rules.
Elementos que intervienen
- Una Sección
- Una Fila de una sola columna
- Una tarjeta base compuesta por:
- Imagen
- Texto
- Texto
- Un Loop aplicado a la columna
- Varias Grid Offset Rules aplicadas a tarjetas concretas
Idea clave
Todas las tarjetas son iguales por estructura.
El layout se construye alterando el tamaño y la posición de algunas tarjetas dentro del grid, no creando diseños distintos.
El loop
Esencial
Qué se define aquí
El loop determina cuántas tarjetas se cargan y en qué orden se muestran.
Configuración habitual
- Tipo de contenido: Entradas
- Entradas por página: 6
- Categoría: según el uso del layout
- Offset: según la posición del bloque o la portada
Este layout funciona incluso sin reglas, pero el loop es imprescindible para que el sistema tenga sentido.
Contenido dinámico
Qué se hace aquí
En los módulos de la tarjeta base se asignan los contenidos dinámicos:
- Imagen destacada
- Título
- Extracto o texto secundario
- Enlaces a la entrada
Aquí no se decide el diseño final, solo qué datos muestra cada tarjeta.
Orden visual y grid
Clave
Qué se define aquí
En la fila principal se activa el comportamiento de grid para organizar las tarjetas.
Configuración base
- Layout: Grid
- Número de columnas: 4
- Gap horizontal: 30
- Gap vertical: 40
(o los valores que mejor encajen en tu diseño)
Con esto se obtiene un grid regular sobre el que se aplicarán las rules.
Ajuste avanzado DNP (Grid Offset Rules)
Opcional
Qué se hace aquí
Las Grid Offset Rules permiten que algunas tarjetas ocupen más columnas que otras dentro del mismo grid.
Proceso
- Activar Grid Offset Rules en la fila
- Añadir una nueva regla
- Asignar un nombre a la regla (por ejemplo: “Regla 1”)
- Target Offset: Custom nth-child Rule
- Elegir la tarjeta a modificar (por ejemplo, la tarjeta 2)
- Offset Value: número de columnas que ocupará (por ejemplo: 2)
Después se puede añadir una segunda regla y aplicarla a otra tarjeta (por ejemplo, la tarjeta 5).
Resultado
Un layout dinámico, con ritmo visual, construido a partir de una sola tarjeta base.
Resultado esperado
Un bloque de portada funcional:
- 6 entradas cargadas por loop
- Grid de 4 columnas
- Algunas tarjetas destacadas por tamaño
- Sin duplicar estructuras
- Sin romper el sistema DNP
Ver el proceso en pantalla 3
Criterio editorial aplicado a layouts
En DNP los layouts se eligen por función editorial, no por estética. Este criterio es lo que permite construir portadas coherentes y escalables.
Con esto claro
Ya puedes construir layouts DNP y modificarlos con criterio. No necesitas aprender más herramientas para seguir avanzando.