Bpco
Un manifeste typographique taillé dans une dalle de béton. Un dossier de presse en noir et blanc où la police Helvetica surdimensionnée imite une photographie, et où la seule texture est une simple feuille de papier froissée sous la police principale.
Bigpicture utilise un système d'édition monochrome qui traite la page web comme un dossier de presse imprimé sur papier brut. L'interface est totalement dépourvue de couleurs, reposant uniquement sur l'encre noire, les espaces blancs, les lignes fines et une texture uniforme de papier froissé pour créer l'atmosphère. La typographie est au cœur du produit: les titres atteignent 274 px en Helvetica Neue 700 avec un espacement négatif marqué, faisant du texte l'élément visuel dominant sur chaque écran. Les légendes à chasse fixe ([01-N INTRODUCTION], CREATIVE/AGENCE) font office de signatures imprimées, et des icônes brillantes à quatre branches servent d'unique ornement entre les sections. La mise en page est aérée et évoque l'autoédition: des espaces de 72 px entre les sections, des marges horizontales de 144 à 250 px et des blocs d'images pleine largeur avec des coins de 288 px donnent à la page l'aspect d'une galerie d'art plutôt que celui d'un logiciel.
La largeur maximale est d'environ 1440 px, centrée avec une marge horizontale de 40 à 144 px selon la densité des sections. L'image principale occupe toute la largeur et sur laquelle est superposé du texte. Sous l'image, le contenu alterne entre des blocs de texte centrés et une typographie bord à bord. Les 60 % inférieurs de la page sont constitués d'un long manifeste défilant, dont les caractères de grande taille remplissent toute la largeur de la fenêtre d'affichage, ligne par ligne, séparés par des rangées de séparateurs brillants. La navigation se présente sous la forme d'une barre flottante centrée en haut de la fenêtre d'affichage, et non d'un panneau pleine largeur. Le pied de page est une simple bande avec une bordure fine.
La photographie domine l'écran principal: de grandes images d'architecture et de publicité extérieure (panneaux d'affichage, façades de bâtiments, publicité au niveau de la rue) sont présentées en pleine page, avec des angles arrondis. Une texture de papier froissé est superposée aux parties inférieures de la page, créant un effet tactile et donnant à l'interface l'aspect d'un magazine imprimé. Une petite icône de globe terrestre, dessinée au trait, est le seul élément illustratif. Pas d'effets 3D, pas de dégradés abstraits, pas de maquettes de produits: les images sont documentaires, de nature industrielle, et issues du portfolio de publicité extérieure de l'agence.
Palette
Neutre
- Press Ink
#121212— Le corps du texte, les traits fins, les bordures de section, les contours des icônes et le texte du pied de page utilisent tous une seule teinte foncée qui véhicule 95 % des informations de premier plan. - Paper White
#ffffff— Toile de page, surfaces en carton, arrière-plan de la barre de navigation, surfaces avec cadres de titre. - Newsprint
#f1f1f1— Remplissage de surface délicat, bordures douces, fines séparations, tonalité dissimulée derrière la texture du papier froissé. - Foil Gray
#e1e1e1— Cadres légers, accents sous forme de contours d'icônes, séparateurs supplémentaires. - Mute Gray
#c5c5c5— Texte secondaire, statut d'invalidité, lignes de surface à faible contraste
Typographie
de 13 à 274 px · 6 étapes
- Helvetica Neue — remplacement: Inter · grandes lignes 400, 500, 700 · Un outil universel: texte courant à 17 px/1,29, titres d’affichage de 75 à 274 px avec un espacement des lettres de -0,04 em pour les plus grandes tailles, étiquettes de navigation à 15 px
- PPSupplyMono — remplacement: JetBrains Mono · grandes lignes 400 · Les balises méta et les étiquettes entre parenthèses telles que [01-N INTRODUCTION], ainsi que les balises de section (ADVERTISING, CREATIVE/AGENCE, OFFLINE MARKETING) sont les seuls accents typographiques qui rompent la monotonie de l'Helvetica.
- PPSupplySans — remplacement: Inter · grandes lignes 400 · Navigation secondaire et microcopie dans le pied de page lorsqu'une police sans empattement différente est requise.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 50px |
| Rayon du bouton | 8px |
| Rayon de la carte | 20px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 72px |
| Largeur de la page | 1440px |
L'IA construira votre site web dans le style Bpco et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Steep — Analyse des polices à empattements sur papier chaud
- Newformcap — Journal éditorial dans les vestiaires
- Claude — Un objet imprimé sur un parchemin chaud – de l’encre sur du papier d’os, l’argile comme unique touche de couleur
- 11x– Digital workers — Un désert éditorial cinématographique: des photographies panoramiques du paysage contrastant avec des titres monumentaux à empattements, dignes d’une double page de magazine de luxe.
- Revolut — Une œuvre éditoriale monochrome basée sur une photographie de nuages — encre blanche, boutons de pilulier, une unique bande bleue dans un monde autrement en nuances de gris.
- Scheduling — Encre éditoriale sur papier crème
- Titan — archive monochrome aux tons chauds
- Programa — Un studio de design suisse à midi. Le mur blanc de la galerie est éclairé par une simple lampe de table jaune; tout est dans des tons de gris jusqu’à ce qu’un bouton, une icône ou un détail attire le regard, et alors cette unique touche de jaune définit toute la pièce.
- Sana Agents — Paillettes de citron vert sur fond blanc dans un éditorial
- Visual — Samizdat éditorial chaleureux. Papier crème, affiches à empattements, annotations marginales monochromes, un marqueur jaune.
- Midday — Brochure éditoriale sur vélin - Titre à empattements de 72 px sur fond pierre chaude, texte courant sans empattements avec espacement, commandes en forme de pilule, sans ombres
- Chat for impact — Une clinique vert forêt avec des chambres aux couleurs pastel