Propuesta de e-commerce
Propuesta de e-commerce
Este documento propone el e-commerce de BIOPEPTIS LABS (catálogo técnico de péptidos para instituciones) desarrollado a detalle: sistema tipográfico, paleta, microinteracciones, catálogo, empaque y panel de administración. Es una dirección trabajada y justificada, abierta a comentarios y ajustes antes de cerrarla.
Catálogo técnico B2B para instituciones. El certificado de análisis va enlazado al frasco.
El certificado de análisis se emite por lote y queda enlazado al QR impreso en el vial. No se pide por correo: se escanea.
Coordinado a todo el país tras la validación documental.
Un asesor del equipo, en horario hábil. Sin formularios en cadena.
Estuche metálico · dos viales
Caja exterior con sello de seguridad. Lo que llega al laboratorio se ve como lo que es.
Los mismos dos materiales en vial, estuche y caja.
Estuche rígido con alojamiento individual que sirve además de almacenamiento en frío.
El sello se rompe al abrir. El QR del sello identifica el envío completo.
Cada tarjeta muestra la presentación e imagen de referencia. Desplázate para ver el resto de la línea.
GIP · GLP-1GHRHReparaciónTendonesCombinadoCopper peptideNoopepticoCognitivoTelómerosMitocondrialCardioprotectorEl QR está impreso en el vial, no en un papel suelto. /lote/ abre la página del lote y descarga el COA de esa remesa concreta.
Se escanea el QR de la etiqueta y aparece el lote despachado. Eso obliga a que la página del lote exista antes de imprimir los empaques.
El documento del lote que tienes en la mano, no uno genérico.
Institución, finalidad investigativa y condiciones de importación aplicables.
Esta sección resume las decisiones de UI/UX que ordenan el prototipo: el sistema de color, la tipografía, el ritmo de espaciado y los principios de interacción. Es la base sobre la que se evaluó cada bloque y lo que quedaría documentado en el styleguide de producción.
#040D18#08182A#0B2754#1D89EE#38D4DC#EAF1F8#CECcDF#0B4A63Esquema dark-first. El cian #38D4DC reserva la acción primaria y la señal destacada; el azul #1D89EE marca los estados de hover y enlace. El blanco azulado mantiene el contraste sobre fondos oscuros.
Escala tipográfica fluida con clamp(): los títulos desplazan junto al viewport sin romper el ritmo vertical. Las etiquetas usan mayúsculas con interletraje abierto.
Sin precios inventados: cada tarjeta remite a cotización y verificable tras validación documental.
La acción más importante destaca en cian; lo secundario baja a texto gris azulado.
Radius de 20–22px en superficies, espaciado de 24–90px en secciones: un solo ritmo en toda la página.
Nav y glass-blur sobre el video, superficies translúcidas: profundidad sin peso visual.
Los microestados (hover, focus, scroll reveal) siguen una curva suave única (cubic-bezier) para que la página se sienta viva pero nunca ruidosa.
El catálogo que ves arriba es la vitrina. Pero un e-commerce de este tipo no se sostiene con una página estática: necesita una plataforma de administración que gestione los productos, los precios, los lotes y las validaciones detrás de escena.
Lo que el cliente ve y usa: el catálogo con su estética, la navegación, los buscadores y el flujo de cotización. Todo lo que se muestra aquí sale de un sistema, no se escribe a mano.
Sin el panel no hay tienda: es donde se dan de alta las referencias, se cargan precios y presentaciones, se registran lotes y se resuelven las cotizaciones entrantes.
Ambas caras se alimentan de una misma base de datos transaccional que almacena los productos, su stock, sus precios y sus lotes. Cada referencia vive en la base una sola vez; la tienda la publica y el panel la administra, en sincronía y sin duplicar datos.
Esta propuesta se desarrolló a detalle para jugar a fondo la dirección visual. Conserva el trabajo invertido en el estilo y queda abierta a comentarios y ajustes del cliente. Antes de publicar hay que resolver:
El catálogo de esta maqueta está armado un listado de moléculas de prueba. Los valores son de referencia y deben fijarse antes de publicar.
Sirve para aprobar la dirección, no para producción.
Un catálogo de esta categoría necesita páginas legales completas; el borrador lo revisa el abogado antes de publicar.
La página /lote/ tiene que estar viva antes de imprimir los empaques.