Column
temno modra knjiga pod hladno zoro
Kolumna uporablja temno, institucionalno mornarsko modro barvo na skoraj belem ozadju: stran najprej daje občutek robustne površine bančnega produkta in nato igrišča za razvijalce. Barva blagovne znamke ni ena sama, temveč usklajen par – mornarsko modra #111a4a za resno strukturo, mint zelena #44b48b za podatke in kodo – z eno samo toplo oranžno (#ec652b), rezervirano za visokointenzivne poudarjene površine, kot je kartica Brex. Tipografijo prevladuje SuisseIntl, geometrijski sans serif, ki se uporablja v celotnem razponu debeline od 300 (povezave) do 600 (prikaz), kar daje sistemu prefinjen, uredniški slog, ki ga večini fintech podjetij manjka. Kartice lebdijo na velikih belih površinah s subtilnimi, večplastnimi sencami; večina elementov vmesnika je ravnih, globina pa se pojavi le tam, kjer bi se kartica morala zdeti kot fizični predmet (transakcijski gradniki, makete izdelkov). Koda in finančni podatki so predstavljeni v enobarvni barvi morske pene – vizualni signal, da gre za banko, ki so jo zgradili inženirji za inženirje.
Struktura strani je polne širine, centrirana s širokimi stranskimi robovi (64–15 cm na namizju). Glavni zaslon ima razdeljeno postavitev: naslov in pozivi k dejanju so poravnani levo pri 25 cm, medtem ko je plavajoči gradnik za transakcije postavljen na desno pri 55 cm na ozadju poltonskega zemljevida. Pod glavnim zaslonom se razdelki izmenjujejo med belo (4 cm) in svetlo platno (5 cm) s 6 cm navpičnimi robovi. Vsebina je razporejena v skladu z eno samo mrežo s 6 stolpci: besedilni bloki zasedajo 4 stolpce (7 cm), kartice slik/izdelkov pa 5–6 stolpcev, z namernim odmikom od mreže. Razdelki, ki opisujejo funkcije, uporabljajo postavitev z 2 stolpcema: besedilo na levi, izdelek na desni. Razdelek s statistiko zaupanja je razdeljen na mrežo s 4 stolpci po celotni širini strani. Logotipi strank so nameščeni v eni centrirani vrstici z robovi velikosti 48 slikovnih pik. Noga ima kompaktno postavitev z dvema stolpcema. Navigacija je fiksna, 62 slikovnih pik visoka, prozorna zgornja vrstica nad glavnim zaslonom z zamegljenim ozadjem, ki med pomikanjem postane belo. Stranske vrstice ali mega menija ni – spustni meniji so preprosti meniji v obliki puščic.
Vizualni slog je minimalističen in funkcionalen – Column se popolnoma izogiba fotografijam v slogu stock. Vizualni jezik temelji na treh virih: (1) ilustracijah podatkov SVG, natančneje pikčastem poltonskem zemljevidu sveta, upodobljenem z gradientom od indiga do oranžne in turkizne, kar ustvarja vzdušje globalnega obsega za glavnim elementom; (2) postavitvah kartic izdelkov – plavajočih gradnikih, ki prikazujejo stanja na računih, podrobnosti o prenosih in delčke kode JSON v belih karticah z dramatičnimi sencami; (3) vizualizacijah grafikonov – turkiznih svečnikov ali stolpčnih grafikonih s tankimi povezovalnimi črtami, uporabljenih v razdelku zaupanja/statistike. Poltonski zemljevid je značilen vizualni element – njegov gradient prehaja iz #d65620 (oranžna) skozi vijolično, modro, azurno, turkizno in rumeno, kar ustvarja spekter, ki združuje celotno paleto blagovne znamke na eni sami dekorativni površini. Ikone imajo enotno debelino obrisa 1,5–2 slikovnih pik v različicah #232730 ali #a9acb6, z zapolnitvijo za aktivna stanja. Brez fotografij življenjskega sloga, brez abstraktnih 3D-upodobitev – omejitev je namerna, da se pozornost usmeri na izdelek in podatke.
Paleta
Blagovna znamka
- Indigo Navy
#111a4a— Primarna barva blagovne znamke se uporablja za zapolnjene pozive k dejanju, aktivna navigacijska stanja, glavo in logotip. Temno vijolično-modra barva daje spletnemu mestu trdno, a bogato črno barvo; v kombinaciji z belim besedilom ustvarja najbolj asertiven gumb na spletnem mestu. - Seafoam 600
#44b48b— Barva kode in podatkov je barva blagovne znamke za ključe JSON, identifikatorje in finančne vrednosti v delčkih kode. Uporablja se tudi za podatkovne točke v grafikonih in vizualizacijah rasti. - Seafoam 700
#167e6c— Temnejši odtenek morske pene za obris, črte grafikona in poudarke ikon znotraj podatkovnega konteksta. To zasidra lestvico morske pene na temnejšem ozadju. - Seafoam 400
#94efb7— Označeni del kode vsebuje nizovne vrednosti, URL-je in končne točke API-ja znotraj blokov kode. Najsvetlejša barva morske pene se bere kot monospaced pisava z zelenkastim odtenkom. - Deep Sea
#023247— Dekorativni obris in poudarjena barva grafikona je bogata turkizna barva, ki se uporablja v ilustracijah SVG in vizualizacijah podatkov, skupaj z barvno lestvico morske pene.
Nevtralno
- Midnight Ink
#011821— Temna površina in označeno besedilo – ozadje kartice izdelka, glavno besedilo z visokim kontrastom. Bližje sivi barvi s hladnim modro-zelenim odtenkom; uporablja se kot osnova za temni način, ko je treba del obrniti. - Slate Ink
#3b3e47— Stranski naslov in glavno besedilo sta nekoliko toplejša od barve Midnight Ink, ki je bila uporabljena tam, kjer bi čista črna na svetlem platnu delovala preostro. - Steel
#7c7f88— V glavnem besedilu in besedilu povezave prevladuje umirjena barva (uporabljena 245-krat v glavnem besedilu). Nevtralna sivo-modra barva, ki se dojema kot umirjena, nikoli kot sprana slika. - Fog
#a9acb6— Obrisi ikon, terciarne obrobe in besedilo ograde. Srednje siva barva, ki ločuje besedilo, ne da bi z njim konkurirala. - Mist
#cbcccf— Glavno besedilo – podpisi, izjave o omejitvi odgovornosti in drobni tisk – je na belem ozadju berljivo, vendar vizualno manj opazno. - Silver Lining
#e3e4e8— Obrobe kartic, obrobe vnosnih polj, ločilne črte. Ta strukturna, subtilna barva se uporablja tam, kjer je treba ločiti dve površini brez senc.
Tipografija
od 10 do 60 slikovnih pik · 10 korakov
- SuisseIntl — zamenjava: Inter · obrisi 300, 400, 500, 600 · Primarna pisava – uporablja se za vse naslove, telo besedila, gumbe, navigacijo, povezave in besedilo kartic. Edinstvena geometrijska brezserifna pisava daje Columnu značilen uredniški slog, ki ga loči od drugih fintech podjetij, ki delajo izključno z Inter-only. Teža je 600 pri 52–60 slikovnih pik za naslove, 500 za podnaslove, 400 za telo besedila in 300 za povezave z nizkim poudarkom.
- SuisseIntlMono — zamenjava: JetBrains Mono · obrisi 400 · Pisava z enako razporeditvijo, podobna SuisseIntl, ki se uporablja za tehnične oznake, identifikatorje API-jev in vdelane podatke v elemente uporabniškega vmesnika. Ohranja enaka razmerja kot SuisseIntl, zato se besedilo z enako razporeditvijo in sorazmerno poravna v mešanih kontekstih.
- SFMono — zamenjava: Fira Code · obrisi 400 · Prikaz delčka kode – prikazan v primerih JSON in blokih dokumentacije API-ja. Za vizualno razlikovanje kode od besedila uporabniškega vmesnika se uporablja odtenek morske pene.
Intervali in oblika
| Namen | Pomen |
|---|---|
| Gostota | povprečje |
| Osnovni korak | 8px |
| Polmer gumba | 8px |
| Polmer kartice | 8px |
| Sence | ne - obrobe namesto senc |
| Med odseki | 72px |
| Širina strani | 1200px |
Umetna inteligenca bo zgradila vašo spletno stran v slogu Column in jo napolnila
- Polnite z izdelki in objavami prek povezave - Instagram, TikTok, Facebook.
- Prenesite vsebino s starega spletnega mesta – samo navedite naslov.
- Sodoben dizajn na najboljšem iskalniku: React ( Next.js) z vnaprej pripravljenim upodabljanjem na strežniku in optimizacijo za SEO.
- Popolnoma avtomatizirana SEO optimizacija za rezultate iskanja in priporočila nevronskih mrež.
Podobni slogi
- dope.security — Polnočni terminal z vijoličnimi svetilniki
- Leonardo — Obrnjena uredniška galerija. Muzej s črnimi stenami, kjer vijolični naslovi delujejo kot stenske instalacije, spodaj pa v gosti mreži visijo portreti, ustvarjeni z umetno inteligenco.
- VEED — Bela galerijska stena z neonsko zelenimi svetlobnimi gumbi
- Craft Docs — Digitalni kolaž za scrapbooking. Zasnova spominja na premišljen, otipljiv album, kjer se strukturirane digitalne opombe združujejo z mehkimi, organskimi teksturami.
- Letter — Zasebna galerija z bleščečimi artefakti iz skladišča. Razstavni prostor s črnimi stenami, kjer se serifi naslovi lebdijo nad kromiranimi skulpturami na zatemnjenih stenah galerije.
- Railway — Kozmični polnočni ekspres. Mirno, vznemirljivo potovanje skozi temen, zvezdnat prostor, vodeno z jasnimi signali.
- Garden Eight — Monumentalni uvodnik na kremnem papirju. Naslov s serifnimi črkami velikosti 215 slikovnih pik leži sam na toplem pergamentu, obdan z lebdečimi kiparskimi oblikami in negativnim prostorom, ki spominja na morski zrak – stran je bolj podobna naslovnici umetniške monografije kot armaturni plošči.
- Steep — Analiza serifnih pisav na toplem papirju
- ElevenLabs — Foto esej v toplih kremnih tonih z nežnimi naslovi. Zvezek v slogu Bauhausa – papir barve jajčne lupine, črno črnilo in en sam vijolično-oranžen poudarek za predstavitev izdelka.
- Awesomic — Uredniška cinkova mreža z oranžnimi ločili, ki spominjajo na konfete
- Monad — uredniška tehnična revija na toplem pergamentu
- AI for Business — Brutalistični uredniški razstavni salon v toplih sivih tonih