La premisa
Una cafetería de especialidad necesitaba verse tan cuidada como su café.
El punto de partida ficticio: un local pequeño, buen producto, cero presencia digital. La web tenía que resolver la primera impresión antes de que alguien cruzara la puerta - sin fotos de stock, sin plantillas genéricas, sin gritar para llamar la atención.
El desafío de diseño real era otro: ¿cómo se comunica calma en una pantalla, un medio que por defecto empuja a llenar cada espacio?
Silencio antes que ruido. Ninguna sección debía competir por atención. Una idea por pantalla, con aire suficiente para respirarla.
La fotografía como protagonista. El texto acompaña a la imagen, no al revés. La luz natural y la textura hacen el trabajo que otros sitios le piden a la tipografía grande.
Una identidad, no una plantilla. Nada de componentes genéricos de e-commerce gastronómico. Cada elemento debía sentirse dibujado para esta marca en particular.
Referencias
Referencias, no atajos.
Se relevó diseño editorial escandinavo, identidades de estudios de café de especialidad y fotografía de producto minimalista.
No para copiar una estética puntual, sino para entender qué decisiones - tipografía comedida, paletas de un solo acento, composición asimétrica - hacen que un diseño se sienta silencioso en vez de simplemente vacío.
Referencia de fotografía de producto relevada durante la investigación.
Hallazgos
- La calma percibida depende más del ritmo del scroll que de la cantidad de blanco en pantalla.
- Un solo acento de color, usado con moderación, comunica más lujo que una paleta amplia.
- La tipografía serif editorial funciona mejor en tamaños grandes y con mucho interlineado - a tamaños chicos pierde el gesto que la hace especial.
El sistema
Un sistema, no una decoración.
La paleta se redujo a cuatro colores: papel, madera clara, tinta y un único acento de café tostado, usado con moderación en toda la interfaz - nunca decorativo, siempre funcional, botones, links y highlights comparten el mismo tono.
La tipografía combina Petrona para titulares y momentos editoriales con Work Sans para texto de lectura e interfaz.
El botón primario es solo un borde de 1px que se llena recién al pasar el cursor. El enlace de texto se subraya, y ese subrayado se despega del texto al pasar por encima en vez de simplemente cambiar de color. Ninguna cita lleva comillas decorativas: la itálica grande ya hace ese trabajo.
Petrona
Preparado con calma.
Work Sans
Una pausa breve, una taza bien hecha.
Paleta
Papel
Madera clara
Tinta
Café tostado
Reglas
- Sin bordes redondeados: los cortes rectos refuerzan el carácter editorial e impreso.
- Sin sombras: la jerarquía se resuelve con espaciado y tamaño, nunca con elevación falsa.
- Grid de 12 columnas en desktop, márgenes generosos que nunca bajan del 6% del ancho de pantalla.
La composición
La misma calma, en cualquier tamaño.
En desktop, la fotografía ocupa hasta el 60% del viewport y el texto vive en una columna angosta a un costado, como una revista abierta.
En tablet, el grid pasa de dos columnas a una sola sin perder los márgenes generosos.
En mobile, las fotos pasan a formato vertical propio - no un recorte forzado del desktop - y el texto conserva su jerarquía completa.
Desktop
Columna angosta junto a fotografía a página completa.
Tablet
Una sola columna, mismo ritmo y márgenes.
Mobile
Fotos verticales propias, jerarquía intacta.
Microinteracciones
- Las fotografías tienen un parallax sutil al hacer scroll - nunca más de 12px de desplazamiento.
- Las ideas aparecen con un fundido lento, no un slide-up brusco, para sostener la calma incluso en el movimiento.