Bpco
Manifest typograficzny wykonany z betonowej płyty. Czarno-biały zestaw prasowy, w którym powiększony krój czcionki Helvetica naśladuje fotografię, a jedyną fakturą jest pojedyncza kartka zmiętego papieru pod głównym krojem pisma.
Bigpicture korzysta z monochromatycznego systemu edycji, który traktuje stronę internetową jak wydrukowany zestaw prasowy na surowym papierze. Interfejs jest całkowicie pozbawiony kolorów chromatycznych, opierając się wyłącznie na czarnym tuszu, białej przestrzeni, cienkich liniach i jednolitej fakturze pogniecionego papieru, aby stworzyć atmosferę. Typografia to produkt: nagłówki osiągają 274 px w czcionce Helvetica Neue 700 z agresywnymi, ujemnymi odstępami między literami, dzięki czemu tekst stanowi dominującą masę wizualną na każdym ekranie. Podpisy o stałej szerokości ([01-N WSTĘP], KREATYWNE/AGENCJA) pełnią funkcję podpisów w stylu drukowanym, a błyszczące ikony z czterema ramionami stanowią jedyną ozdobę między sekcjami. Układ jest obszerny i przypomina self-publishing — odstępy 72 px między sekcjami, poziome marginesy 144-250 px i bloki obrazów o pełnej szerokości z narożnikami o szerokości 288 px sprawiają, że strona wygląda jak ściana galerii, a nie jak oprogramowanie.
Maksymalna szerokość to ~1440 px, wyśrodkowana z poziomym marginesem 40–144 px, w zależności od gęstości sekcji. Obraz główny to obraz o pełnej szerokości z nakładającym się tekstem. Pod obrazem treść naprzemiennie obejmuje wyśrodkowane bloki tekstu i typografię od krawędzi do krawędzi. Dolne 60% strony to długi, przewijany manifest, z dużą czcionką wypełniającą całą szerokość pola widzenia, wiersz po wierszu, oddzieloną rzędami błyszczących separatorów. Nawigacja to ruchomy pasek wyśrodkowany u góry pola widzenia, a nie panel o pełnej szerokości. Stopka to pojedynczy pasek z cienką ramką.
Na głównym ekranie dominują zdjęcia – duże obrazy architektoniczne i reklamy zewnętrzne (billboardy, okładziny budynków, reklamy uliczne) prezentowane w pełnym rozmiarze z zaokrąglonymi narożnikami. Na dolne partie strony nałożona jest faktura zmiętego papieru, co tworzy wrażenie dotyku i nadaje interfejsowi wygląd drukowanego magazynu. Jedynym elementem ilustracyjnym jest mała ikona globusa, narysowana liniami. Brak efektów 3D, abstrakcyjnych gradientów, makiet produktów – zdjęcia mają charakter dokumentalny, przemysłowy i bazują na portfolio agencji w zakresie reklamy zewnętrznej.
Paleta
Neutralny
- Press Ink
#121212— Tekst główny, cienkie linie, obramowania sekcji, kontury ikon i tekst stopki — wszystkie są utrzymane w jednym ciemnym odcieniu, na którym znajduje się 95% wszystkich informacji na pierwszym planie. - Paper White
#ffffff— Płótno strony, powierzchnie tekturowe, tło paska nawigacyjnego, powierzchnie z ramkami tytułowymi. - Newsprint
#f1f1f1— Delikatne wypełnienie powierzchni, miękkie obramowania, cienkie podziałki, ton ukryty za fakturą pogniecionego papieru. - Foil Gray
#e1e1e1— Jasne ramki, akcenty w postaci konturów ikon, dodatkowe podziały. - Mute Gray
#c5c5c5— Tekst dodatkowy, status niepełnosprawności, linie powierzchni o niskim kontraście
Typografia
od 13 do 274px · 6 kroków
- Helvetica Neue — wymiana: Inter · wytyczne 400, 500, 700 · Narzędzie uniwersalne – tekst główny o wielkości 17 px/1,29 px, nagłówki wyświetlane w wielkości 75–274 px z odstępem między literami wynoszącym -0,04 em przy największych rozmiarach, etykiety nawigacyjne o wielkości 15 px
- PPSupplyMono — wymiana: JetBrains Mono · wytyczne 400 · Jedynymi akcentami typograficznymi przełamującymi monotonię czcionki Helvetica są meta tagi i etykiety w nawiasach, takie jak [01-N WSTĘP], a także tagi sekcji (REKLAMA, KREATYWNOŚĆ/AGENCJA, MARKETING OFFLINE).
- PPSupplySans — wymiana: Inter · wytyczne 400 · Nawigacja drugorzędna i mikrotekst w stopce, gdzie wymagany jest inny krój czcionki bezszeryfowej.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 50px |
| Promień przycisku | 8px |
| Promień karty | 20px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 72px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Bpco i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Steep — Analiza czcionek szeryfowych na papierze ciepłym
- Newformcap — Gazeta redakcyjna w szatni
- Claude — Artefakt wydrukowany na ciepłym pergaminie – tusz na papierze kostnym, glina jako jedyny powiew koloru
- 11x– Digital workers — Kinematograficzne pustkowie redakcyjne – panoramiczne zdjęcia krajobrazu na tle monumentalnych, szeryfowych nagłówków, które czytają się jak rozkładówka luksusowego magazynu
- Revolut — Monochromatyczna praca redakcyjna oparta na fotografii chmur — biały tusz, guziki w kształcie pudełek na tabletki, pojedynczy niebieski pasek koloru w świecie będącym w innym przypadku szarością.
- Scheduling — Tusz redakcyjny na papierze kremowym
- Titan — ciepło tonowane monochromatyczne archiwum
- Programa — Szwajcarskie studio projektowe w południe. Białą ścianę galerii oświetla pojedyncza żółta lampa stołowa – wszystko jest utrzymane w odcieniach szarości, dopóki jakiś przycisk, ikona lub akcent nie przyciągnie uwagi. Wtedy ten pojedynczy żółty akcent definiuje całe pomieszczenie.
- Sana Agents — Błyszczący limonkowy kolor na białym tle w wersji redakcyjnej
- Visual — Ciepły, redakcyjny samizdat. Kremowy papier, plakaty szeryfowe, monochromatyczne marginesy, jeden żółty marker.
- Midday — Broszura redakcyjna na pergaminie – nagłówek szeryfowy 72 px na ciepłym, kamiennym tle, tekst główny bezszeryfowy z odstępami, kontrolki w kształcie pigułek, brak cieni
- Chat for impact — Klinika w leśnej zieleni z pokojami w pastelowych kolorach