Sobre esta plantilla
Digital Director muestra una forma de construir este tipo de página de portafolio para una agencia o un estudio y publica las instrucciones que lo generaron. “Adam Roberts - Design & Engineering” es la línea que la maquetación está pensada para sostener. La paleta es negro #000000 de base y blanco #FFFFFF para la tipografía, con la tipografía Inter. Se entrega como React y Tailwind CSS, así que el conjunto de página de portafolio se puede trasladar a un proyecto sin traspaso de diseño. Todo el movimiento cabe en transiciones de 400ms, cubic-bezier(0.16,1,0.3,1) y un vídeo en bucle de fondo. Úsalo cuando tu página de portafolio necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Equipos de Studio que redactan el brief de un desarrollo y buscan en un marco de 1472x1080 algo concreto a lo que reaccionar.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de página de portafolio como patrón que copian las demás páginas.
- Pensado para responsables de producto que necesitan acotar el diseño de página de portafolio a un sprint y no añadir material nuevo.
Qué incluye
- Una barra de navegación que no estorba. La barra se superpone sobre página de portafolio en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Medido, no estimado a ojo. Los tamaños se citan, no se heredan: pasos de espaciado de 10px, transiciones de 400ms y easing cubic-bezier(0.16,1,0.3,1). Cambia la tipografía o el texto y esas relaciones se mantienen. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- El bucle es el fondo. La composición se construye encima del clip de 1472x1080 y no a su lado, de modo que los medios nunca reciben un panel ni un borde. Un fotograma de póster a 1472x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- La escala es el estilo. La tipografía es Inter, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. La interlínea sigue los pasos de tamaño y no un valor global único. No añadas un tamaño sin función.
Movimiento e interacción
Cambios de estado medidos
El hover, la pulsación y el foco se resuelven en 400ms, que es lo que hace que la interfaz se sienta inmediata. Los valores son lo bastante cortos para leerse como respuesta y no como animación.
Un bucle, no una secuencia
El clip de fondo se reproduce 7s en 1472x1080 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción.
Cómo ordena Digital Director la primera lectura
Una maquetación centrada en funciones enumera lo que hace el producto; esta lleva a quien lee hacia una única decisión. El recorrido se ve en navegación, el titular, la fila de cifras, la lista de funciones y el clip de fondo y en cómo pasos de espaciado de 10px y transiciones de 400ms marcan las distancias. Quien busca agencia recibe la oferta antes que las opciones.
Hacer tuyo este tipo de página de portafolio
Cambia primero el contenido y revisa el marco después. Las cifras que hay que proteger mientras sustituyes el texto son estas: pasos de espaciado de 10px, transiciones de 400ms y easing cubic-bezier(0.16,1,0.3,1). Reescribe la línea de display antes de tocar el color.
El reflujo de página de portafolio
Una maquetación estrecha diseñada exige más decisiones que un apretujón. El brief las paga: la navegación se pliega en un menú móvil, declarado y no descubierto al construir. La reproducción automática y el movimiento se tratan con honestidad, así que la página sigue comunicando cuando no están disponibles.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Digital Director?
El brief capturado ocupa 8.947 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.
¿El brief de Digital Director es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 8.947 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Necesito React y Tailwind CSS para recrear Digital Director?
Digital Director 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.
