Sobre esta plantilla
Taskly conserva el rastro de sus decisiones: el brief que hay detrás de sección hero ocupa 2.465 caracteres. “Work smarter, achieve faster” es la línea que la maquetación está pensada para sostener. La paleta se queda en azul #60B1FF de base, azul intenso #041320 para la tipografía y naranja brillante #FF801E para los acentos, y el tipo es Inter. La referencia está construida con un único componente, y las decisiones de maquetación se documentan aparte. Cuando prepares el brief de cada sección hero de agencia, parte de esta composición y sustituye el tema.
Pensado para
- Equipos que rehacen su sección hero de agencia a partir de la referencia de un competidor y quieren dejar claro un único componente antes de que nadie se comprometa con un framework.
- Cita un marco de 800x592 en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
- La página sirve a desarrolladores front-end que rehacen su sección hero de una agencia o un estudio en un único componente y buscan los números que hay detrás del aspecto.
Qué incluye
- Los enlaces colapsan a un ancho. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #FF801E, todo en la capa superior de sección hero y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #FF801E es el único elemento de la barra con peso.
- Todas las medidas están escritas. La maquetación trabaja con valores absolutos y no con proporciones: pasos de espaciado de 16px. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición. Traslada los valores junto con la maquetación.
- Una familia, dos papeles. Con Inter 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. Sustituir la fuente es posible, pero las proporciones tienen que sobrevivir al cambio.
- Navegación contenida en una fila. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
Movimiento e interacción
Los controles son la capa interactiva
El trabajo de puntero es pequeño y está especificado: estados hover en los botones y los enlaces y no en todas las tarjetas y un elemento fijo que mantiene la posición mientras el contenido pasa por debajo, aplicado a los elementos que ya parecen interactivos. Los estados salen de la paleta de la propia página y no de un valor por defecto de componente.
Estático a propósito
Esta se entrega como composición estática en 800x592, así que la jerarquía tiene que funcionar sin movimiento, y funciona. Solo se mueven los elementos que responden al puntero.
Leer Taskly como especificación
Desmonta este tipo de sección hero y los valores siguen describiéndolo: pasos de espaciado de 16px para el marco y el ritmo de debajo. Nada de este tipo de sección hero depende de un valor por defecto.
Cómo ordena Taskly la primera lectura
Léelo en orden: navegación, el titular, la insignia de anuncio, la fila de cifras y la fila de clientes. Cada elemento tiene una sola función, y el acento naranja brillante #FF801E se gasta solo en el elemento que debes pulsar. Quien busca agencia recibe la oferta antes que las opciones.
El acierto de sección hero
Un hero genérico y este tipo de sección hero usan las mismas piezas. Aquí el orden lo dan navegación, el titular, la insignia de anuncio, la fila de cifras y la fila de clientes y todo se mide con pasos de espaciado de 16px, así que la pantalla se lee como una secuencia y no como un contenedor. Taskly enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Por qué la ficha nombra un único componente?
Taskly se construyó en un único componente, 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é me llevo cuando copio el brief de Taskly?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 800x592. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cómo trato los medios de Taskly en un proyecto de cliente?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 800x592.
