Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukreveladorDesarrollamos herramientas de IA para empresas. De alta calidad. A precios asequibles.Escribir por Telegram
Le Puzz — una vista previa de un sitio con este estilo

Le Puzz

Sunny Sunday Circular es un tabloide lleno de misterios.

Le Puzz es un sistema de comercio electrónico maximalista para tiendas boutique, construido sobre una base de dos tonos: un amarillo intenso, similar a un panal de abejas, combinado con negro puro, sobre un fondo gris perla frío. Su estilo es una mezcla entre periódico antiguo y rompecabezas: el texto principal está en Times con serifa, mientras que los titulares están en una fuente personalizada, Times Now, rompiendo deliberadamente con las convenciones tradicionales del comercio electrónico que se basan en fuentes sin serifa. La interfaz en sí es simple y basada en cuadrícula, lo que permite que el impacto visual se transmita a través del empaque del producto (composiciones densas e ilustradas llenas de juguetes). Los controles de la interfaz son bastante robustos: botones con borde negro sobre fondo amarillo, iconos en forma de píldora, tarjetas con un radio de 12 px y un generoso espaciado entre letras para versalitas, lo que le da incluso al botón "AÑADIR RÁPIDO" un toque editorial.

Una cuadrícula clásica de comercio electrónico con un diseño editorial distintivo. El encabezado es una franja amarilla con forma de panal y un borde negro de 1 de ancho, que alberga un logotipo centrado y una fila adicional de botones de navegación. Debajo, sobre una cuadrícula de tres columnas de productos sobre un fondo gris, se encuentra un encabezado de bienvenida centrado en la fuente Times Now. El elemento principal es un bloque de fotos centrado con esquinas redondeadas (40), flanqueado por dos tarjetas de producto. Se mantiene el ritmo de las secciones: amplio espacio vertical (30), superficies amarillas y grises alternadas y un ancho máximo de aproximadamente 4,5 cm, centrado en la página. Las tarjetas de producto tienen el mismo tamaño y están dispuestas en una cuadrícula ordenada de tres columnas con espacios de 5 cm. El diseño es simétrico y está vinculado a la cuadrícula; no hay composiciones asimétricas ni elementos superpuestos.

El elemento visual es la fotografía de producto. Las cajas de rompecabezas se fotografían de frente sobre un fondo blanco o neutro, y luego se colocan sobre un fondo de estudio azul cálido o natural. La imagen principal muestra a una persona sosteniendo varias cajas de rompecabezas: un objeto de estilo de vida, capturado con energía natural. El empaque en sí es rico, ilustrativo y maximalista: multitud de juguetes, productos alimenticios y personajes en colores primarios brillantes con gruesos contornos negros, diseñados para parecer una ilustración de un libro infantil dispersa en un rompecabezas de 500 piezas. Sin gráficos abstractos, sin renders 3D, sin iconografía más allá de una lupa: los rompecabezas mismos son el lenguaje visual.

Paleta

Marca

  • Honeycomb Yellow #ffd931 — El color principal de la marca, la barra de título, los botones de acción principales, el estado activo de la navegación, el color del subrayado del enlace, el relleno de acento: la nota de color única alrededor de la cual gira todo lo demás.

Neutral

  • Carbon Black #000000 — El texto principal, los bordes gruesos, los contornos de los botones, los contornos de los iconos y el texto de navegación constituyen la base estructural de todo el sistema.
  • Ink Black #231f20 — Texto secundario, texto principal, bordes de botones, bordes de campos de entrada: un color ligeramente más cálido, casi negro, para una sensación más suave.
  • Pearl Gray #c8cbcd — Lienzo de página, fondos de tarjetas de producto, un escenario llamativo donde aparecen los colores amarillo y negro.
  • Fog Gray #a6a8aa — Superficies de insignias discretas, fondos de chips secundarios y rellenos sutiles en la interfaz de usuario.
  • Smoke Line #d6d6d6 — Separadores delgados, separadores discretos para mesas o tarjetas.

Tipografía

de 11 a 47 píxeles · 6 pasos

  • Times Now — reemplazo: Playfair Display · esquemas 100, 400 · Una tipografía con serifa para titulares y subtítulos, utilizada para encabezados principales, nombres de productos y títulos de sección. La tipografía ultraligera de 100 puntos con un espaciado de 47 píxeles crea una apariencia editorial alta, casi condensada; las formas condensadas de las letras (interlineado de 0,87 a 0,90) permiten colocar titulares grandes cerca del texto que los acompaña, imitando un cartel impreso.
  • Times — reemplazo: Times New Roman · esquemas 400 · El texto con serifa es una elección inesperada para una tienda online, ya que le confiere a todo el sitio un aire literario, similar al de un catálogo. El interlineado reducido (1,15) hace que los párrafos sean compactos y fáciles de leer.
  • Helvetica Neue — reemplazo: Helvetica · esquemas 100, 400 · El texto pequeño en la interfaz de usuario, el texto en los botones y el microtexto están configurados con una fuente de 11 píxeles y un espaciado entre letras grande (0,0730em), lo que crea la sensación de escribir en mayúsculas incluso a una temperatura corporal confortable.

Intervalos y forma

ObjetivoSignificado
Densidaddenso
Paso básico15px
Radio del botón12px
Radio de la tarjeta12px
Oscuridadno - bordes en lugar de sombras
Entre secciones30-40px
Ancho de página1200px

La IA construirá tu sitio web al estilo de Le Puzz y lo rellenará.

  • Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
  • Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
  • Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
  • Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.

Estilos similares

  • Agence Foudre — La portada de la revista es de un suave color rosa que recuerda al pintalabios.
  • INVERSA — Una terminal de campo topográfica a medianoche. Un panel de mando oscuro, donde una tipografía editorial enorme y una sola capa de marcadores verde neón se superponen a imágenes satelitales de la Tierra, cada etiqueta monocromática, como si leyera las coordenadas de la misión.
  • Acne Studios — Un espacio de galería minimalista repleto de fotografías vibrantes: una revista de moda extendida sobre mármol.
  • GTE — Terminal de negociación detrás de la iluminación de la galería
  • Diabla — Un patio mediterráneo al mediodía: paredes de color rosa descoloridas por el sol, un toldo de lona rojo brillante y titulares editoriales con serifa que se extienden por el cielo.
  • Subset — Boutique editorial confeccionada con lino crudo.
  • Cursor — Un acogedor taller de pergamino, iluminado por brasas humeantes.
  • MindMarket — Un acogedor libro de cuentos de hadas en papel color crema: un lienzo editorial amigable donde grandes titulares y personajes de papel recortados coexisten en una superficie suave como una pegatina, bañada por el sol.
  • Lamborghini — Carrocería negra en la sala de exposición, bajo los focos: un coche amarillo.
  • Amplemarket — Un lugar de trabajo bañado por el sol y cubierto de confeti.
  • Getharvest — Un escritorio a la hora dorada: un lienzo de color crema cálido, postales blancas colgadas en el lienzo y una sola llama de color naranja brillante.
  • Drive Capital — Póster retro de viaje por carretera en papel cálido