Mockup · 01
Una web pensada como un refugio cinematográfico. Diseñamos y desarrollamos cada bloque para que la marca se sienta antes de leerla: tipografía amable, ritmo editorial y micro-detalles en mono.
Llevar el aroma del local a una pantalla.
Noir Café necesitaba una web que no fuera un catálogo, sino un paseo por el local: la luz cálida tras la barra, los tarros de cristal, el silencio entre sorbos. El reto era trasladar esa atmósfera al entorno digital sin romper el oficio editorial de la marca.
Diseñamos un sistema de bloques largos, cards redondeadas y un wordmark que aparece en cada scroll. Una web que se recuerda por la sensación, no por la cantidad de información.
Dos voces, una misma calma.
Una display amable, ligeramente humanista. Se reserva para titulares grandes y el wordmark: funciona casi como ilustración.
Un refugio lento, donde el café se sirve con tiempo y la luz cae como en una vieja película. Pasa, siéntate y quédate un rato.
Carta de especialidad, repostería de obrador y bebidas de autor. Abierto de miércoles a domingo, de 9 a 20 h.
Geométrica, redonda y muy legible. Se usa en pesos 300/400/500 para párrafos, navegación, microcopy y datos. Una sola voz para todo lo que no es titular.
Cuatro decisiones que marcan la experiencia.
Cada bloque tiene una intención. Diseñamos para que el usuario se quede, no para que haga clic en muchos sitios.
Lectura como paseo
Bloques largos verticales con respiración entre secciones. La página se recorre sin tomar decisiones complejas: solo scroll y atmósfera.
Una sola CTA viva
Reservar mesa siempre presente en la nav-píldora flotante. Eliminamos cualquier acción que compita con la decisión principal.
Detalle editorial
Coordenadas, sello EST. 2026, marquees y micro-mono refuerzan la sensación de pieza impresa y dan contexto sin texto extra.
Carga ligera
Imágenes optimizadas, fuentes con subset y animaciones CSS puras. Atmósfera cinematográfica sin sacrificar velocidad.
Pocos elementos, mucho cuidado.
Nav-píldora flotante
Anclada en cabecera, fondo blur y CTA contrastada. Mantiene la marca visible sin invadir la composición.
Cards redondeadas grandes
Radius generoso, sombras suaves y mucho padding interior. Cada card respira como una página de revista.
Marquees de marca
Tira horizontal con manifiesto y separadores ✦. Aporta movimiento sutil y refuerza el tono cinematográfico.
Tipografía como imagen
Display a tamaños de portada, mezclas con itálica serif y mono editorial. La tipografía es el principal recurso visual.
Cinco tonos. Una misma calidez.
Atmósfera rápida.
Diseñar bonito no debería costar segundos de carga. Optimizamos imágenes, fuentes y animaciones para que la experiencia sea ligera en cualquier dispositivo.
Recórrela como si fuera tuya.
La web vive aquí dentro. Haz scroll en la ventana, navega entre secciones y siente el ritmo editorial sin salir del caso.
Una web que se queda contigo.
Diseñamos y desarrollamos cada pieza como un mismo gesto. La tipografía, la UI y el rendimiento trabajan al servicio de una única idea: que la marca se sienta antes de leerla.