Bpco
Un manifiesto tipográfico hecho con una losa de hormigón. Un dossier de prensa en blanco y negro donde la tipografía Helvetica de gran tamaño imita una fotografía, y la única textura es una hoja de papel arrugado debajo de la tipografía principal.
Bigpicture utiliza un sistema de edición monocromático que trata la página web como un kit de prensa impreso sobre papel crudo. La interfaz carece por completo de colores, basándose únicamente en tinta negra, espacios en blanco, líneas finas y una textura uniforme de papel arrugado para crear atmósfera. La tipografía es el producto: los encabezados alcanzan los 274 px en Helvetica Neue 700 con un agresivo espaciado negativo entre letras, lo que convierte al texto en la masa visual dominante en cada pantalla. Los subtítulos monoespaciados ([01-N INTRODUCCIÓN], CREATIVO/AGENCIA) funcionan como firmas de estilo impreso, y los iconos brillantes de cuatro puntas sirven como única decoración entre secciones. El diseño es generoso y recuerda a la autoedición: espacios de 72 px entre secciones, márgenes horizontales de 144-250 px y bloques de imagen de ancho completo con esquinas de 288 px permiten que la página respire como una pared de galería en lugar de un programa informático.
El ancho máximo es de aproximadamente 1440 px, centrado con un relleno horizontal de 40 a 144 px según la densidad de la sección. La imagen principal es una imagen de ancho completo con texto superpuesto. Debajo de la imagen, el contenido alterna entre bloques de texto centrados y tipografía de borde a borde. El 60 % inferior de la página es un manifiesto largo y desplazable, con texto grande que llena todo el ancho de la ventana gráfica línea por línea, separado por filas de divisores brillantes. La navegación es una barra flotante centrada en la parte superior de la ventana gráfica, en lugar de un panel de ancho completo. El pie de página es una sola tira con un borde delgado.
La fotografía domina la pantalla principal: grandes imágenes de arquitectura y publicidad exterior (vallas publicitarias, revestimientos de edificios, anuncios a pie de calle) presentadas a tamaño real con esquinas redondeadas. Una textura de papel arrugado se superpone a las secciones inferiores de la página, creando una sensación táctil y dándole a la interfaz el aspecto de una revista impresa. Un pequeño icono de globo terráqueo, dibujado con líneas, es el único elemento ilustrativo. Sin efectos 3D, sin degradados abstractos, sin maquetas de productos: las imágenes son documentales, de carácter industrial y se basan en el portafolio de publicidad exterior de la agencia.
Paleta
Neutral
- Press Ink
#121212— El texto principal, las líneas finas, los bordes de las secciones, los contornos de los iconos y el texto del pie de página utilizan un único tono oscuro que contiene el 95 % de toda la información en primer plano. - Paper White
#ffffff— Lienzo de página, superficies de cartón, fondo de barra de navegación, superficies con marcos de título. - Newsprint
#f1f1f1— Relleno superficial delicado, bordes suaves, separadores finos, tono oculto tras la textura del papel arrugado. - Foil Gray
#e1e1e1— Marcos claros, detalles en forma de contornos de iconos, separadores adicionales. - Mute Gray
#c5c5c5— Texto secundario, estado de discapacidad, líneas de superficie de bajo contraste
Tipografía
De 13 a 274 píxeles · 6 pasos
- Helvetica Neue — reemplazo: Inter · esquemas 400, 500, 700 · Una herramienta universal: texto del cuerpo a 17px/1.29, encabezados de visualización a 75–274px con espaciado entre letras de -0.04em en los tamaños más grandes, etiquetas de navegación a 15px.
- PPSupplyMono — reemplazo: JetBrains Mono · esquemas 400 · Las metaetiquetas y las etiquetas entre paréntesis, como [01-N INTRODUCCIÓN], así como las etiquetas de sección (PUBLICIDAD, CREATIVA/AGENCIA, MARKETING FUERA DE LÍNEA), son los únicos acentos tipográficos que rompen la monotonía de Helvetica.
- PPSupplySans — reemplazo: Inter · esquemas 400 · Navegación secundaria y microtexto en el pie de página donde se requiera una fuente sans-serif diferente.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 50px |
| Radio del botón | 8px |
| Radio de la tarjeta | 20px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 72px |
| Ancho de página | 1440px |
La IA construirá tu sitio web al estilo de Bpco 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
- Steep — Análisis de fuentes con serifa en papel cálido
- Newformcap — Periódico editorial en el vestuario
- Claude — Un artefacto impreso en pergamino cálido: tinta sobre papel de hueso, arcilla como único soplo de color.
- 11x– Digital workers — Un páramo editorial cinematográfico: fotografías panorámicas del paisaje contrastando con titulares monumentales en tipografía serif que parecen sacados de una revista de lujo.
- Revolut — Un trabajo editorial monocromático basado en una fotografía de nubes: tinta blanca, botones de pastillero, una única franja azul de color en un mundo predominantemente gris.
- Scheduling — Tinta editorial sobre papel color crema
- Titan — archivo monocromo de tonos cálidos
- Programa — Un estudio de diseño suizo al mediodía. La pared blanca de la galería está iluminada por una sola lámpara de mesa amarilla; todo está en tonos grises hasta que un botón, un icono o un detalle llama la atención, y entonces ese único detalle amarillo define toda la habitación.
- Sana Agents — Destellos de lima sobre fondo blanco en una publicación editorial
- Visual — Samizdat editorial de tono cálido. Papel color crema, carteles con serifa, anotaciones marginales en monocromo, un rotulador amarillo.
- Midday — Folleto editorial en vitela: titular con serifa de 72 px sobre fondo de piedra cálida, texto sin serifa con espaciado, controles en forma de píldora, sin sombras.
- Chat for impact — Una clínica de color verde bosque con habitaciones de colores pastel.