Acabamos de lanzar Studio — una nueva y hermosa plantilla de sitio web para agencias en la que hemos estado trabajando durante los últimos meses para Tailwind UI.
La construimos con Next.js, MDX y, por supuesto, Tailwind CSS, y es la primera plantilla que publicamos usando el nuevo App Router de Next.js.
Diseñar una plantilla de agencia es un proyecto interesante, porque las agencias creativas comúnmente usan su propio sitio web para mostrar algunas ideas realmente llamativas y personalizadas, y usar una plantilla simplemente se siente extraño cuando el objetivo es mostrar de lo que tu propia empresa es capaz.
Así que intentamos abordar este con dos objetivos en mente para hacerlo realmente útil para la gente:
- Enseñar a la gente cómo hacer algunas de las cosas geniales que ves en los sitios llamativos de las agencias — Siempre he creído que nuestras plantillas son tan valiosas (si no más) como recurso educativo que como simples plantillas, así que queríamos usar esta plantilla como una oportunidad para mostrar cómo construiríamos muchos de los detalles interactivos y animados geniales que ves en este tipo de sitios.
- Diseñarla para agencias que no venden diseño — Hay muchas agencias por ahí que solo se enfocan en el trabajo de ingeniería, y muchas veces esas empresas luchan por destacar en cuanto a diseño. Intentamos diseñar esta plantilla de manera que no dependiera de toneladas de capturas de pantalla de trabajo de diseño y cosas así para verse bien, para que una agencia que se enfoca en código pudiera usarla como punto de partida para su propio sitio.
Creo que lo que se nos ocurrió cumplió estos dos objetivos y estoy muy orgulloso de cómo quedó todo.
Echa un vistazo a la vista previa en vivo como siempre para la experiencia completa — hay toneladas de detalles geniales en esta que tienes que ver en el navegador para apreciarlos realmente.
Deliciosamente animado
Una de las reglas no escritas de los sitios web de agencias es que tienen que ser llamativos. No llegamos al extremo de reemplazar el cursor del ratón o renderizar todo el sitio con WebGL, pero sí buscamos oportunidades para introducir con buen gusto animaciones e interactividad donde pudimos.
Por ejemplo, construimos una API ligera declarativa basada en componentes en torno a algunas características de Framer Motion para facilitar la realización de animaciones de entrada activadas por desplazamiento:
La experiencia de autoría para este tipo de animaciones resultó realmente agradable — simplemente envuelve las cosas que quieres que aparezcan gradualmente con un componente FadeIn o FadeInStagger y listo:
function Clients() { return ( <div className="mt-24 rounded-4xl bg-neutral-950 py-20 sm:mt-32 sm:py-32 lg:mt-56"> <Container> <FadeIn className="flex items-center gap-x-8"> <h2 className="font-display text-center text-sm font-semibold tracking-wider text-white sm:text-left"> Hemos trabajado con cientos de personas increíbles </h2> <div className="h-px flex-auto bg-neutral-800" /> </FadeIn> <FadeInStagger faster> <ul role="list" className="mt-10 grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-4"> {clients.map(([client, logo]) => ( <li key={client}> <FadeIn> <Image src={logo} alt={client} unoptimized /> </FadeIn> </li> ))} </ul> </FadeInStagger> </Container> </div> );}También agregamos esta pequeña y agradable animación al logotipo donde la marca se llena con un color sólido al pasar el ratón:
Este pequeño detalle parece pequeño pero, curiosamente, no puedes hacerlo realmente sin navegación del lado del cliente, porque la animación se volvería a ejecutar al hacer clic en el logotipo para volver a la página de inicio. Usando un framework como Next.js, podemos mantener el logotipo relleno mientras se pasa el ratón, incluso a través de cambios de URL, lo que se siente mucho mejor.
La animación del cajón del menú también resultó muy agradable, empujando toda la página hacia abajo cuando se abre:
Si miras de cerca, el logotipo y el botón tampoco cambian de color ingenuamente — en realidad está impulsado precisamente por la posición de la hoja que se desliza hacia abajo, y el logotipo es en realidad parcialmente blanco y parcialmente negro al mismo tiempo cuando el borde de la hoja se interseca con él.
Otro detalle que realmente me encanta es esta interacción que se nos ocurrió para las imágenes en las páginas de estudio de caso:
Queríamos que todo el sitio se sintiera en blanco y negro, pero mostrar imágenes en blanco y negro todo el tiempo no se sentía bien. Así que se nos ocurrió este tratamiento donde la imagen comienza en blanco y negro, y la saturación vuelve a animarse a medida que la imagen se acerca al centro de la pantalla al desplazarse. También mostramos la imagen a todo color al pasar el ratón.
También tuvimos cuidado de intentar implementar todas estas animaciones de una manera que tenga en cuenta a las personas con trastornos del movimiento vestibular y que son sensibles a este tipo de grandes animaciones. Usando el hook useReducedMotion de Framer Motion y la variante motion-safe en Tailwind, hacemos cosas como deshabilitar condicionalmente la animación del menú de navegación y limitar las animaciones de entrada impulsadas por el desplazamiento solo a la opacidad para que las cosas no se muevan en la pantalla.
Flujo de trabajo de estudio de caso y blog centrado en el desarrollador
Studio incluye soporte tanto para estudios de caso como para publicaciones de blog, y como podrías haber adivinado si has jugado con alguna de nuestras otras plantillas, usamos esto como excusa para integrar MDX en el proyecto.
Aquí tienes un ejemplo de cómo se ve un estudio de caso básico — escrito principalmente en markdown con algunos metadatos comunes y soporte para componentes personalizados mezclados en el contenido:
import logo from "@/images/clients/phobia/logomark-dark.svg";import imageHero from "./hero.jpg";import imageJennyWilson from "./jenny-wilson.jpeg";export const caseStudy = { client: "Phobia", title: "Supera tus miedos, encuentra tu pareja", description: "Encuentra el amor frente al miedo — Phobia es una aplicación de citas que empareja a los usuarios en función de sus fobias mutuas para que puedan asustarse juntos.", summary: [ "Encuentra el amor frente al miedo — Phobia es una aplicación de citas que empareja a los usuarios en función de sus fobias mutuas para que puedan asustarse juntos.", "Trabajamos con Phobia para desarrollar un nuevo flujo de incorporación. Se le muestran al usuario imágenes de fobias comunes y usamos el micrófono para detectar cuáles les hacen gritar, alimentando los resultados al algoritmo de emparejamiento.", ], logo, image: { src: imageHero }, date: "2022-06", service: "Desarrollo de aplicaciones", testimonial: { author: { name: "Jenny Wilson", role: "CPO de Phobia" }, content: "El equipo de Studio superó todas las expectativas con nuestra incorporación, incluso encontrando una manera de acceder al micrófono del usuario sin activar uno de esos molestos diálogos de permisos.", },};export const metadata = { title: `Estudio de caso de ${caseStudy.client}`, description: caseStudy.description,};## Descripción generalAl notar una tasa de abandono increíblemente alta, el equipo de Phobia llegó a la conclusión de que, en lugar de tener unaidea de negocio fundamentalmente defectuosa, necesitaban mejorar su proceso de incorporación.Anteriormente, los usuarios seleccionaban sus fobias manualmente, pero esto llevó a que algunos usuarios seleccionaran cosas a las querealmente no tenían miedo para aumentar sus coincidencias.Para combatir esto, desarrollamos un sistema que muestra una presentación de diapositivas de fobias comunes durantela incorporación. Luego usamos malware para acceder subrepticiamente a su micrófono y detectar cuándotienen reacciones audibles. Medimos el tono, el volumen y la duración de sus gritos y alimentamos esainformación al algoritmo de emparejamiento.La siguiente fase es una versión VR del flujo de incorporación donde los usuarios son sometidos a una serie deescenarios que determinarán sus miedos. Actualmente estamos desarrollando el primer escenario, título provisional:"Saltar de un avión lleno de arañas".## Qué hicimos<TagList> <TagListItem>Android</TagListItem> <TagListItem>iOS</TagListItem> <TagListItem>Malware</TagListItem> <TagListItem>VR</TagListItem></TagList><Blockquote author={{ name: "Jenny Wilson", role: "CPO de Phobia" }} image={{ src: imageJennyWilson }}> El equipo de Studio superó todas las expectativas con nuestra incorporación, incluso encontrando una manera de acceder al micrófono del usuario sin activar uno de esos molestos diálogos de permisos.</Blockquote><StatList> <StatListItem value="20%" label="Tasa de abandono" /> <StatListItem value="5x" label="Desinstalaciones" /> <StatListItem value="2.3" label="Calificación en la tienda de aplicaciones" /> <StatListItem value="8" label="Demandas pendientes" /></StatList>Todos los estilos de tipografía para esta plantilla son totalmente personalizados y adoptamos un enfoque un poco diferente esta vez que en el pasado — en lugar de escribir un montón de CSS complejo para evitar que nuestros estilos de tipografía choquen con cualquier componente personalizado en el MDX, creamos un pequeño plugin de remark llamado remark-rehype-wrap que permite envolver trozos de contenido Markdown con un elemento contenedor.
De esta manera, podíamos envolver cualquier cosa que fuera contenido Markdown simple con una clase typography, pero asegurarnos de que cualquier componente personalizado en el documento simplemente no estuviera envuelto, en lugar de intentar crear el CSS de tal manera que ignore esas partes del árbol.
Ambos enfoques funcionan totalmente, pero siempre es divertido probar nuevas ideas y ver qué aprendes. ¡Tengo curiosidad por ver cómo podría ser una solución basada en la nueva característica style queries que llegará a CSS en el futuro también!
¡Así que eso es Studio! Descárgalo, desármalo y ve si aprendes un par de trucos nuevos.
Como todas nuestras plantillas, está incluida con una licencia de acceso total a Tailwind UI de compra única, que es la mejor manera de apoyar nuestro trabajo en Tailwind CSS y hacer posible que sigamos construyendo cosas increíbles durante años.