Portfolio About Agencias y estudios Página sobre nosotros design preview

Esta entrada es un diseño estático, así que la vista previa muestra el fotograma capturado en lugar de un clip.

Sobre esta plantilla

Portfolio About muestra una forma de construir este tipo de página sobre nosotros para una agencia o un estudio y publica las instrucciones que lo generaron. La paleta se queda en negro #0C0C0C de base y blanco #D7E2EA para la tipografía, y el tipo es Kanit. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El brief gasta su presupuesto de movimiento en transiciones de 200ms. Toma prestada la estructura, no el tema: las cifras y el orden de página sobre nosotros pasan a tu marca sin cambios.

Pensado para

  • Toma prestada la estructura de página sobre nosotros entera y sustituye los textos línea a línea cotejando con un marco de 640x468.
  • Pensado para un fundador en solitario que saca un único diseño de página sobre nosotros para una agencia o un estudio y no tiene ningún sistema de diseño detrás.
  • Quien le pase el brief de página sobre nosotros a un modelo usará el prompt de 5.431 caracteres como punto de partida.

Qué incluye

  • Una escala para tipo y marco. El brief fija pasos de espaciado de 160px y transiciones de 200ms y deja el resto a la disposición, que es lo contrario de una escala que crece sola. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
  • Insignia sobre el pliegue. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Kanit al paso más pequeño, y nada más compite por ese hueco. Solo hay un anuncio, y eso es lo que hace que la insignia se sienta como una novedad.
  • Cifras como tipografía. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de página sobre nosotros se convierta en una lista de funciones. No hay divisores dentro de la fila; el espaciado por sí solo separa las cifras.
  • La composición es el contenido. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 640x468, y por eso se sostiene cuando cambia el texto. El brief es la especificación.

Movimiento e interacción

Rápido, pero deliberado

El movimiento de los controles es corto y repetible: 200ms en cada cambio de estado. Las duraciones son tan cortas que la respuesta se lee como reacción y no como animación.

Un solo comportamiento de scroll

El scroll actúa como disparador y no como línea de tiempo: un elemento fijo mantiene la posición mientras el contenido pasa por debajo, y el ritmo lo marca el lector. El efecto se limita a los elementos que nombra el brief y no a toda la página. La captura de la referencia es de 640x468.

Qué cambiar primero en Portfolio About

Una plantilla te pide que aceptes su maquetación; esta referencia te pide que la conserves y cambies todo lo de dentro. La diferencia es que pasos de espaciado de 160px y transiciones de 200ms se quedan fijos mientras el tema se mueve. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.

Cómo ordena Portfolio About la primera lectura

Aquí nada compite con la primera decisión. El material de apoyo espera por debajo, y la insignia de anuncio, la fila de cifras y la lista de funciones se bastan para sostener la parte alta de la página. Quien busca agencia recibe la oferta antes que las opciones.

Por qué esta composición funciona para agencia

En esta página hay una sola promesa, y pasos de espaciado de 160px y transiciones de 200ms la sostienen en su sitio. Nada por debajo de la primera pantalla tiene que cargar también con la oferta. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.

Preguntas frecuentes

¿El prompt de Portfolio About es una especificación cerrada o un punto de partida?

El brief capturado ocupa 5.431 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.

¿Puedo reconstruir este diseño de página sobre nosotros de Portfolio About con otro stack?

Portfolio About 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.

¿Qué gobierna el movimiento en Portfolio About?

El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 200ms. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.

Créalo en Studio

Empieza por la referencia y adapta el contenido y los detalles visuales en Studio.