Cresci's • Sitio web
Rediseño y desarrollo de sitio institucional
Role
Frontend Developer (2023) Product Designer + Frontend (2025)
Timeline
2023 · 2025
Team
2 Designers + 1 Frontend (2023)
1 Designer + Frontend (2025)
Skills
UX/UI
Frontend
Optimización
100 · 100 · 90
SEO, Best Practices y Accesibilidad en Lighthouse mobile
4/4 secciones
visibles en la nav, antes ocultas en un menú hamburguesa incluso en desktop
0 acordeones
en About: misión, cultura y objetivos se leen sin cliquear
Contexto
El sitio escondía el trabajo del estudio detrás de clicks.
CRESCI'S es una agencia de branding y diseño digital con base en Miami. Su rebranding de 2025 pedía un sitio que transmitiera la nueva identidad. Aproveché el cambio para resolver un problema anterior: en la versión 2023, cuyo frontend implementé sobre un diseño realizado previamente en el estudio, casi todo el contenido dependía de una interacción para visualizarse. Diseñé la nueva versión y volví a implementar el frontend desde cero.
2023 · Punto de partida
Una identidad visual fuerte, pensada para exhibir el trabajo más que para explicarlo.
Fondo oscuro, tipografía display en mayúsculas y line-art animado en SVG con Lottie. Implementé el frontend sobre ese diseño, ya cerrado por el estudio. El problema no era la calidad del trabajo, sino cómo se contaba: para acceder a la navegación había que desplegar un menú (hamburger menu), incluso en desktop; el About guardaba su contenido en acordeones; el reel solo funcionaba como fondo del hero, y en la home los trabajos se mostraban solo como imágenes: para saber de qué proyecto se trataba había que pasar el cursor por encima, y aun así solo aparecía el nombre.
Ver website 20232025 · Decisiones
Mostrar en lugar de esconder.
El rebranding de 2025 aportó el lenguaje visual: fondo claro, tipografía Aeonik en minúsculas en lugar de mayúsculas sostenidas, y mucho espacio en blanco. Faltaba resolver cómo se recorre el sitio. Ordené las decisiones según el camino de un potencial cliente, desde que llega hasta que contacta, y en cada etapa saqué lo que se interponía entre el usuario y el contenido.
01 · Descubrir
El reel deja de ser fondo y la navegación deja de estar escondida.
Antes, el reel solo ambientaba el hero y la navegación estaba oculta en un menú desplegable (hamburger menu), también en desktop: para saber qué tenía el sitio había que abrirlo.
Ahora el hero muestra un preview del reel con "(Play Reel)" para verlo completo, y la nav expone las cuatro secciones con link de contacto (Let's Talk) fijo a la derecha. El reel es el resumen más directo del trabajo del estudio; no podía quedar como decoración.
02 · Explorar
La home pasa a funcionar como índice del sitio.
Antes mostraba una frase, algunos trabajos, logos de clientes y un blog que no se actualizaba con frecuencia.
Ahora resume cada sección (cultura, último trabajo, expertise, misión) con un link para profundizar. Quien no pasa de la home igual entiende quiénes son y qué hacen. El blog se quitó: sin un ritmo de publicación constante, mostraba un estudio inactivo.
03 · Evaluar caso
De grilla desordenada a grilla editorial.
Antes el detalle de proyecto mezclaba imágenes y videos de tamaños distintos, sin jerarquía de lectura.
Ahora cada caso abre con número, año y servicios, sigue una grilla editorial consistente y cierra con acceso al siguiente caso. El trabajo se puede evaluar, no solo mirar.
04 · Confiar
El contenido que genera confianza no depende de que alguien lo busque.
Antes misión, objetivos y propuesta estaban dentro de acordeones: se leían los títulos y había que cliquear para ver el contenido.
Ahora el About muestra todo abierto, suma el manifiesto en video y presenta al equipo con sus roles. Se agregó Expertise, una página nueva con los cuatro servicios del estudio, su descripción y entregables.
05 · Contactar
El contacto está siempre a un click.
El link de contacto (Let's Talk) queda fijo en la nav, el About cierra con una invitación directa ("Your brand's DNA must be clear in every form of appearance. We are ready for any challenge. Are you?", donde "Are you?" lleva al contacto) y el footer suma dirección y teléfono del estudio.
2025 · Resultado
Un sitio que muestra el trabajo desde el primer scroll.
Así quedó el sitio con el rediseño aplicado: nav visible, home como índice, casos con grilla editorial y un About que se lee sin interacción.
Ver website 20252025 · Implementación
Un sitio estático para un contenido que cambia poco.
Rehice el frontend desde cero sobre el diseño 2025. Las decisiones técnicas salieron del mismo criterio que las de diseño: el contenido del estudio cambia pocas veces al año, así que no necesitaba un backend, necesitaba cargar rápido y sostener el movimiento de la marca.
Next.js con generación estática: cada página se sirve ya renderizada.
En producción, CSS, JS, tipografías, imágenes y videos se servían desde S3. El preview del hero se carga con prioridad para que sea lo primero en aparecer.
GSAP para reveals de texto y transiciones; Lenis para un scroll suave sincronizado con esas animaciones.
Micro-labels, índice numerado, grilla editorial y escala tipográfica desktop/mobile son componentes compartidos.
Fundamentos
Color, tipografía y grilla: la base que comparten todos los componentes. Aeonik con una escala propia para desktop y otra para mobile, y una grilla de 12, 6 y 4 columnas que sostiene la estructura editorial en los tres breakpoints.
Aprendizajes
Muchas decisiones de UX son decisiones sobre qué no esconder
Cada interacción que se interpone entre el usuario y el contenido es una razón para irse sin verlo. El rediseño no agregó secciones complejas: sacó capas.
Que la misma persona diseñe e implemente acorta la distancia entre decisión y resultado
El sistema visual 2025 se pudo iterar directamente en código, sin traducción de por medio. Y la arquitectura técnica respondió a la misma pregunta que el diseño: qué necesita realmente este contenido.
Próximos pasos si el proyecto continuara
Incorporar la sección Trusted Collabs cuando los logos de clientes estén cerrados.
Medir consultas desde el formulario de contacto para validar el cambio de recorrido.
Llevar el mismo formato de caso editorial al resto del portfolio del estudio.