Sobre esta plantilla
Blog Showcase se capturó a 640x478 y se conserva como especificación, no como imagen de galería. El esquema de color es blanco #FCFCFC de base y rojo #7D1A4A para la tipografía, y la página está compuesta en Outfit. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El movimiento se limita a transiciones de 0.5s y cubic-bezier(0.33, 1, 0.68, 1). Parte del brief capturado y ajusta la composición de sección de blog en lugar de empezar de cero.
Pensado para
- Pensado para un fundador en solitario que saca un único diseño de sección de blog para una agencia o un estudio y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de sección de blog a un modelo usará el prompt de 4.151 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección de blog cuyo titular tiene que seguir siendo tan largo como el de Blog Showcase.
Qué incluye
- Los tamaños están en el brief, no en una escala. El brief nombra las cifras: pasos de espaciado de 20px, transiciones de 0.5s y easing cubic-bezier(0.33, 1, 0.68, 1). Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo. Donde el brief calla, calla a propósito.
- El tipo hace el estilo. Con Outfit haciendo el trabajo, los tamaños bajan de golpe del titular al texto de apoyo y el interletraje se cierra a medida que crece el tamaño, así que la jerarquía la lleva el tipo y no el color. La tipografía display se usa a un solo tamaño, por eso nunca compite consigo misma. Una tipografía, papeles claros.
- El pie de página es una composición completa. Los enlaces se agrupan en columnas y la marca ocupa su propio bloque, lo que mantiene legible un pie de página largo en lugar de convertirlo en una lista. Las columnas se alinean a la misma cuadrícula que la página de arriba, así el pie de página parece el mismo diseño. La captura de la referencia es de 640x478.
- Valores que puedes comprobar. El espaciado se cita igual (pasos de espaciado de 20px, transiciones de 0.5s y easing cubic-bezier(0.33, 1, 0.68, 1)), no como una escala que crece sola.
Movimiento e interacción
Una duración para los controles
El brief fija la transición en 0.5s, así que una reconstrucción no puede colar un valor por defecto más lento. El easing se especifica junto a la duración (0.5s), así que una reconstrucción no puede colar otra sensación sin avisar. Mantén las duraciones cuando rehagas la piel de la página.
Estados de puntero, nada más
La interacción se queda en cada control (estados hover en los botones y los enlaces y no en todas las tarjetas), así que nada más de la página se mueve como efecto secundario. Un control que parece interactivo se comporta como tal, así que nada promete una acción que no existe. Si un estado no confirma una acción, quítalo.
El argumento de sección de blog
Donde una plantilla llena la primera pantalla de módulos, este tipo de sección de blog usa el titular, la insignia de anuncio, la cuadrícula de tarjetas, el clip de fondo y el pie de página y se detiene. La diferencia se ve en pasos de espaciado de 20px y transiciones de 0.5s: nada se rellena para ocupar espacio. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Cómo ordena Blog Showcase la primera lectura
La atención se dirige, no se deja al azar. La secuencia pasa por el titular, la insignia de anuncio, la cuadrícula de tarjetas, el clip de fondo y el pie de página, y cada parada se mide contra pasos de espaciado de 20px y transiciones de 0.5s para que nada llegue desordenado. Quien busca agencia recibe la oferta antes que las opciones.
El reflujo de sección de blog
Prueba este tipo de sección de blog a 640x478 y luego a ancho de móvil: el mismo orden aguanta, con la escala es fluida en lugar de escalonada. No se elimina nada importante en anchos estrechos.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Blog Showcase?
El brief capturado ocupa 4.151 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Cuánto de Blog Showcase depende de React y Tailwind CSS?
Blog Showcase se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Cuánto de Blog Showcase está animado?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 0.5s con la curva cubic-bezier(0.33, 1, 0.68, 1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
