Doña María me contactó inicialmente porque necesitaba definir la imagen de su licorera para el barrio. La página web todavía no hacía parte del encargo: primero trabajamos en el nombre, el logo, los colores y un estilo visual que se sintiera cercano, tradicional y confiable.
La dirección visual nació de conversar sobre la historia de Doña María, su relación con el barrio y el tipo de comercio que quería construir. El resultado debía funcionar para un local físico y sentirse propio, no como una marca genérica.
No fue un proceso completo de branding. Fue una colaboración acotada para establecer una dirección gráfica clara y útil para el negocio.
Entendí la historia, el contexto local y la imagen que Doña María quería proyectar.
Probé nombres, composiciones y estilos para encontrar una dirección reconocible.
Usé IA para explorar alternativas y ajusté las propuestas con su retroalimentación.
Consolidé logo, colores y estilo para que la identidad pudiera trasladarse a la web.
Trago Amargo es una licorera familiar de Robledo El Cucaracho, Medellín. Sus posibles clientes necesitaban resolver tres preguntas rápidamente: dónde queda, en qué horario atiende y cómo escribirle. La prioridad no era vender en línea, sino acercar el negocio al barrio.
Trago Amargo llevaba menos de un mes abierto y era un local pequeño entre casas. La mayoría de las personas del barrio y de sectores cercanos todavía no sabía que existía. El sitio debía hacer visible el negocio y ayudar a confirmar rápidamente dónde quedaba, cuándo atendía y cómo contactarlo.
Doña María explicó que el local se atiende a través de una ventana con rejas por seguridad y que no se ofrecen domicilios. Esa condición podía generar confusión al llegar, así que la convertí en información útil: mostrar la fachada y comunicar la forma real de atención.
Las mejores decisiones no salieron de inventar un mensaje, sino de preguntar cómo funciona realmente el negocio y qué valora su clientela.
Comunicar la atención por ventana ayuda a que una persona llegue con expectativas claras y evita que una característica del local se convierta en una sorpresa.
Para un negocio local nuevo, una landing clara con ubicación, horario y contacto aporta más valor que una tienda en línea compleja.
Después de definir la base visual del negocio físico, la dueña volvió a contactarme para llevar esa identidad a una presencia digital. El proceso web partió de revisar cómo una persona del sector buscaría una licorera cerca de casa. En lugar de diseñar un catálogo complejo, definí una experiencia que responde primero a la necesidad práctica de la visita.
Revisé el contexto local y la necesidad real de visibilidad del negocio.
Convertí una idea inicial de varias páginas en una sola landing clara.
Definí wireframes, pantallas responsive, tokens y componentes de acción.
Llevé el diseño a código, hice ajustes responsive y publiqué el sitio.
El negocio era nuevo y necesitaba una presencia digital que reforzara su cercanía con el barrio, sin depender de que alguien encontrara una publicación aislada en redes.
La primera versión debía resolver información y contacto. Por eso dejé fuera funcionalidades que habrían aumentado la complejidad sin aportar a la meta inicial.
WhatsApp, horario y ubicación aparecen desde el inicio para responder a la intención principal de la visita.
Las categorías permiten reconocer la oferta del negocio, sin precios, carrito ni pasos de compra innecesarios.
La combinación de borgoña, crema, Inter y Berkshire Swash crea una presencia cercana con carácter propio.
La arquitectura empezó como un mapa de cuatro páginas, pero después de revisar el alcance y el tipo de usuario decidí convertirla en una sola Home con scroll y anclas. La navegación no busca retener a la persona con más pantallas: la acompaña desde el descubrimiento del negocio hasta el contacto.
El primer mapa separaba Inicio, Sobre nosotros, Productos/Catálogo y Contacto. Era una estructura válida para ordenar el contenido, pero obligaba a una persona con una necesidad puntual a saltar entre páginas para reunir dirección, horario y contacto.
Como el sitio era informativo, sin pagos, reservas ni catálogo transaccional, una sola página resultaba más coherente. Todo queda a un scroll de distancia y las anclas llevan directamente a lo que la persona necesita.
Antes de definir colores y componentes, probé la jerarquía en baja fidelidad. El wireframe permitió revisar el recorrido completo en desktop, tablet y móvil, y conservar solo lo que ayudaba a descubrir, ubicar y contactar el negocio.
Llevé la dirección visual a Figma para mantener coherencia entre las pantallas responsive y la implementación. El archivo reúne 32 variables de color, espaciado y radios, 11 estilos tipográficos y componentes reutilizables de acción.
Una paleta cálida y nocturna que nació en la propuesta visual del negocio físico y luego se trasladó al sitio, sin perder legibilidad en las acciones clave.
Berkshire Swash aporta personalidad al display de marca; Inter ordena navegación, contenido y botones. El primer componente creado fue el botón de acción, documentado en variantes clara y oscura para sostener el contraste en cada fondo.
Con Figma como referencia, convertí la propuesta en una landing funcional con HTML, CSS y JavaScript dentro de Vite, usando Codex como apoyo técnico. La implementación no fue una copia literal de las pantallas: revisé los comportamientos responsive y adapté los detalles necesarios para que la jerarquía, los enlaces y los llamados a la acción funcionaran en la experiencia real.
Organicé la landing y sus recursos reales en un espacio de proyecto: logo, imagen principal, fotografías del negocio, categorías de productos, mapa y contacto.
Construí encabezado, hero, ubicación, historia, categorías, contacto, botones de WhatsApp y pie de página, conservando la estructura y el sistema visual definidos.
En cada sección definí criterios, revisé la primera versión en el navegador, comparé con Figma y pedí ajustes hasta aprobar jerarquía, legibilidad, espacios y acciones.
Corregí el encuadre del logo y las imágenes, di más peso al horario y la ubicación, reemplacé recursos temporales, incorporé carruseles de categorías y fotografías, y sumé movimientos suaves para acompañar la navegación.
Revisé proporciones, márgenes, menú, botones, carruseles, enlaces y ausencia de desplazamiento horizontal. Cada tamaño necesitó decisiones propias, no una simple reducción de la versión desktop.
Complementé la revisión visual con pruebas automatizadas de navegación, WhatsApp, Google Maps, anclas y responsive. Después guardé la versión aprobada en GitHub y la publiqué en Cloudflare Pages con el dominio del negocio.
Yo dirigí el producto: investigué, definí prioridades, diseñé en Figma, elegí los recursos visuales y decidí cuándo una versión estaba lista. Codex se encargó de apoyar la ejecución técnica, automatizar comprobaciones y aplicar las correcciones.
La revisión manual me permitió evaluar claridad, composición y coherencia con Figma. Las pruebas automatizadas ayudaron a repetir comprobaciones funcionales y detectar regresiones antes de publicar.
Elegir una landing informativa permitió concentrar el esfuerzo en las acciones que sí necesitaba el negocio en esta primera etapa.
Dirección, horario y WhatsApp no son datos secundarios cuando una persona busca resolver una necesidad inmediata.
Pasar de Figma a código permitió probar la experiencia real y mejorar detalles que no se revelan en una pantalla estática.
El resultado reúne una identidad visual inicial para un negocio local y una landing responsive publicada con información, ubicación y canales de contacto reales. El caso muestra cómo llevé una necesidad del mundo físico hasta una experiencia digital funcional.