Portfolio
Web Design · Desarrollo Web · 2024
Diseño UX/UI y desarrollo web completo para Haras Paso Firme, haras de caballos Criollos en la provincia de Buenos Aires. Presencia digital de cero, identidad premium y catálogo de ejemplares.
Rol
Diseñador & Desarrollador
Disciplinas
UX/UI · Front-end Dev
Stack
Next.js · React
Región
Buenos Aires, Argentina
Haras Paso Firme es un haras de caballos Criollos en la provincia de Buenos Aires. Su filosofía: no producir caballos en serie, sino formar individuos. Selección genética consciente, entrenamiento funcional y acompañamiento post-venta como diferencial en el mercado.
El cliente necesitaba una presencia digital que estuviera a la altura de esa promesa. Nada genérico. Un sitio que transmitiera nobleza, paciencia y excelencia desde el primer scroll.
"Aquí no se producen caballos en serie. Se forman individuos."
Antes de tocar Figma, el trabajo fue entender el contexto: quién visita el sitio, qué busca y qué tiene que sentir cuando llega. Cada decisión de layout, jerarquía y copy parte de esa base.
Objetivos del cliente, usuario y diferencial de marca.
Secciones, jerarquía de contenido y flujo de navegación.
Estructura funcional sin distracción visual. Foco en layout y conversión.
Paleta, tipografía, fotografía e interacciones aplicadas.
Next.js, optimización de imágenes y deploy en producción.
El layout asimétrico prioriza la foto sin sacrificar legibilidad del copy: el gradiente horizontal genera la superficie oscura necesaria para el texto en la mitad derecha. Los CTAs quedan en la misma fila para no interrumpir el recorrido visual hacia el quote de marca al pie.
En pantalla angosta la alineación a la derecha pierde referencia visual, por eso el texto migra al centro. Los CTAs se mantienen lado a lado —no apilados— para conservar la jerarquía primario/secundario sin añadir scroll innecesario.
El acordeón en la columna izquierda permite explorar todos los servicios sin perder contexto: al seleccionar uno, el contenido aparece a la derecha sin cambiar de página. El número de sección grande ancla visualmente el scroll en un sitio con varias secciones numeradas.
La columna de contenido activo desaparece: el acordeón ocupa el ancho completo y cada ítem se expande inline. Esto evita que el usuario salte entre dos columnas en un viewport reducido, donde el two-column desktop fragmentaría la lectura.
El sidebar persistente permite filtrar y ver resultados en simultáneo, sin salir del contexto del catálogo. La grilla de 4 columnas aprovecha el ancho disponible para maximizar la cantidad de ejemplares visibles y facilitar la comparación entre ellos.
El sidebar fijo no escala a pantallas pequeñas: ocultarlo en un botón flotante libera el 100% del viewport para las tarjetas. El modal de filtros cubre la pantalla al abrirse, replicando la funcionalidad completa del sidebar sin fragmentar la UI. La grilla baja de 4 a 2 columnas para mantener las tarjetas legibles.
La foto ocupa el 100% del viewport como fondo. Las columnas de datos (izquierda) y descripción (derecha) flotan sobre ella con un overlay oscuro que garantiza la legibilidad sin recortar la imagen. El caballo queda visible en la zona central sin interferencias.
La foto se mantiene full-width para conservar el impacto visual. Los 4 atributos que en desktop caben en una fila horizontal pasan a una grilla 2×2 porque el ancho móvil no soporta 4 columnas de texto legible. La descripción y el CTA cierran el flujo al pie, siguiendo el orden natural de lectura.
El diseño parte de la marca existente del haras: tipografía western, sello vintage, fondo oscuro. El sitio debía ampliar esa identidad hacia una experiencia digital coherente.
Paleta oscura de base para dar protagonismo a las fotografías. Tonos cálidos en crema y dorado que refuerzan la calidez y la tradición de la crianza. Tipografía serif para los titulares que evoca raíces e historia, con una sans-serif moderna y legible para el cuerpo.
El tagline "Forjando Nobleza" funciona como ancla visual en el hero y como hilo conductor del copy. Cada sección refuerza el mismo concepto: sin atajos, con paciencia.
Cinco secciones principales, cada una con un objetivo de comunicación claro.
Imagen full-width del haras, tagline "Forjando Nobleza" y CTAs dobles hacia contacto y catálogo. Primera impresión.
Filosofía del haras, principios de crianza y el diferencial: individualidad sobre producción en serie.
Seis servicios detallados: selección genética, entrenamiento, desarrollo funcional, compraventa, soporte post-venta y gestión integral.
Catálogo de ejemplares destacados con fotos individuales. Gateway hacia perfiles completos de cada yegua y padrillo.
Formulario con selector de motivo de consulta, email directo y acceso a Instagram. Diseñado para generar confianza antes del envío.
Versiones desktop y mobile diferenciadas. Links de ancla a cada sección y logo como retorno al inicio.
El sitio fue construido con Next.js sobre React, eligiendo un framework moderno que permite optimización de imágenes automática, rendimiento de carga superior y escalabilidad futura.
Las imágenes se sirven en formato WebP a través del pipeline de optimización de Next.js, reduciendo el peso sin perder calidad visual. Los assets vectoriales se implementaron como SVGs inline para máxima nitidez a cualquier resolución.
Sitio live en producción en haras.julianpoblete.com — hospedado, configurado y mantenido de forma independiente.