Column
tumši zila grāmatvedības grāmata vēsajā rītausmā
Kolonā ir izmantota dziļa, institucionāla tumši zila krāsa uz gandrīz balta fona: lapa vispirms šķiet kā stabila bankas produkta virsma un pēc tam kā izstrādātāju rotaļu laukums. Zīmola krāsa nav viena, bet gan saskaņots pāris — tumši zila #111a4a nopietnai struktūrai, piparmētru zaļa #44b48b datiem un kodam — ar vienu silti oranžu krāsu (#ec652b), kas rezervēta augstas intensitātes akcentu virsmām, piemēram, Brex kartei. Tipogrāfijā dominē SuisseIntl, ģeometrisks bez serifiem raksts, kas tiek izmantots visā svara diapazonā no 300 (saites) līdz 600 (displejs), piešķirot sistēmai izsmalcinātu, redakcionālu stilu, kāda trūkst lielākajai daļai finanšu tehnoloģiju uzņēmumu. Kartes atrodas uz lielām baltām virsmām ar smalkām, slāņainām ēnām; lielākā daļa saskarnes elementu ir plakani, dziļums parādās tikai tur, kur kartei vajadzētu justies kā fiziskam objektam (darījumu logrīki, produktu maketi). Kods un finanšu dati tiek attēloti vienkrāsainā, jūras putu krāsā — vizuāls signāls, ka šī ir banka, ko inženieri radījuši inženieriem.
Lapas struktūra ir pilna platuma, centrēta ar platām sānu malām (64–15 cm darbvirsmas versijā). Galvenais ekrāns ir sadalīts izkārtojumā: virsraksts un aicinājumi uz darbību ir izlīdzināti pa kreisi 25 cm augstumā, savukārt peldošs darījumu logrīks ir novietots labajā pusē 55 cm augstumā uz pustoņu kartes fona. Zem galvenā ekrāna sadaļas mainās starp baltu (4 cm) un gaišu audeklu (5 cm) ar 6 cm vertikālām iecirkņiem. Saturs ir sakārtots pēc viena 6 kolonnu režģa: teksta bloki aizņem 4 kolonnas (7 cm), attēlu/produktu kartītes aizņem 5–6 kolonnas ar apzinātu nobīdi no režģa. Sadaļas, kas apraksta funkcijas, izmanto 2 kolonnu izkārtojumu: teksts kreisajā pusē, produkts labajā pusē. Uzticības statistikas sadaļa ir sadalīta 4 kolonnu režģī visā lapas platumā. Klientu logotipi atrodas vienā centrētā rindā ar 48 pikseļu iecirkņiem. Kājenei ir kompakts divu kolonnu izkārtojums. Navigācija ir fiksēta, 62 pikseļu augsta, caurspīdīga augšējā josla virs galvenā ekrāna ar izplūdušu fonu, kas ritinot kļūst balts. Nav sānu joslas vai megaizvēlnes — nolaižamās izvēlnes ir vienkāršas bultiņu stila izvēlnes.
Vizuālais stils ir minimālistisks un funkcionāls — Column pilnībā izvairās no attēlu krājumiem. Vizuālā valoda ir veidota, izmantojot trīs avotus: (1) SVG datu ilustrācijas, proti, punktētu pustoņu pasaules karti, kas atveidota ar gradientu no indigo uz oranžu un tirkīza krāsu, radot globāla mēroga atmosfēru aiz galvenā elementa; (2) produktu karšu izkārtojumi — peldoši logrīki, kas baltās kartītēs ar dramatiskām ēnām attēlo kontu atlikumus, pārskaitījumu informāciju un JSON koda fragmentus; (3) diagrammu vizualizācijas — tirkīza svečturu vai joslu diagrammas ar plānām savienojošām līnijām, ko izmanto uzticības/statistikas sadaļā. Pustoņu karte ir raksturīgs vizuālais elements — tās gradienta pāreja no #d65620 (oranža) uz violetu, zilu, debeszilu, tirkīza un dzeltenu krāsu, radot spektru, kas apvieno visu zīmola paleti uz vienas dekoratīvas virsmas. Ikonām ir vienāds kontūras biezums 1,5–2 pikseļi #232730 vai #a9acb6 variantos, ar aizpildījumu aktīvajiem stāvokļiem. Nekādu dzīvesstila fotogrāfiju, nekādu abstraktu 3D renderējumu — atturība ir apzināta, lai pievērstu uzmanību produktam un datiem.
Palete
Zīmols
- Indigo Navy
#111a4a— Primārā zīmola krāsa tiek izmantota aizpildītiem aicinājumiem uz darbību, aktīvajiem navigācijas stāvokļiem, galvenei un logotipam. Dziļi violeti zilā krāsa piešķir vietnei vienkrāsainu, bet piesātinātu melnu nokrāsu; apvienojumā ar baltu tekstu tā rada vispārliecinošāko pogu vietnē. - Seafoam 600
#44b48b— Koda un datu krāsa ir zīmola krāsa JSON atslēgām, identifikatoriem un finanšu vērtībām koda fragmentos. To izmanto arī datu punktiem diagrammās un izaugsmes vizualizācijās. - Seafoam 700
#167e6c— Tumšāks jūras putu tonis kontūrai, diagrammas līnijām un ikonu akcentiem datu kontekstā. Tas piesaista jūras putu mērogu tumšākajam fonam. - Seafoam 400
#94efb7— Iezīmētais koda fragments satur virkņu vērtības, URL un API galapunktus koda blokos. Gaišākā jūras putu krāsa ir vienrindu fonts ar zaļganu nokrāsu. - Deep Sea
#023247— Diagrammas dekoratīvā kontūra un akcenta krāsa ir piesātināta tirkīza krāsa, kas tiek izmantota SVG ilustrācijās un datu vizualizācijās, kā arī jūras putu krāsu skala.
Neitrāls
- Midnight Ink
#011821— Tumša virsma un iezīmēts teksts — produkta kartes fons, augsta kontrasta galvenais teksts. Tuvāk pelēkai krāsai ar vēsu zilganzaļu nokrāsu; tiek izmantots kā pamats tumšajam režīmam, ja sadaļa ir jāapgriež otrādi. - Slate Ink
#3b3e47— Otrais nosaukums un galvenais teksts ir nedaudz siltāki nekā “Midnight Ink”, kas tiek izmantots vietās, kur tīra melna krāsa uz gaišā audekla šķistu pārāk skarba. - Steel
#7c7f88— Galvenajā tekstā un saites tekstā dominē klusināta krāsa (galvenajā tekstā izmantota 245 reizes). Neitrāla pelēkzila krāsa, kas tiek uztverta kā mierīga, nekad nav izbalējis attēls. - Fog
#a9acb6— Ikonu kontūras, terciārās apmales un viettura teksts. Vidēji pelēka krāsa, kas atdala tekstu, nekonkurējot ar to. - Mist
#cbcccf— Galvenais teksts — paraksti, atrunas un sīkais drukas teksts — ir salasāms uz balta fona, bet vizuāli mazāk pamanāms. - Silver Lining
#e3e4e8— Kartīšu apmales, ievades lauku apmales, sadalošās līnijas. Šī strukturālā, smalkā krāsa tiek izmantota, ja divas virsmas ir jāatdala bez ēnām.
Tipogrāfija
no 10 līdz 60 pikseļiem · 10 soļi
- SuisseIntl — nomaiņa: Inter · kontūras 300, 400, 500, 600 · Primārais fonts — tiek izmantots visiem virsrakstiem, pamattekstam, pogām, navigācijai, saitēm un kartītes tekstam. Unikālais ģeometriskais bezserifa fonts piešķir Column atšķirīgu redakcionālo stilu, kas to atšķir no citiem finanšu tehnoloģiju uzņēmumiem, kas sadarbojas tikai ar Inter-only. Virsrakstu biezums ir 600 ar izmēru 52–60 pikseļi, apakšvirsrakstu biezums ir 500, pamatteksta biezums — 400 un saišu ar zemu uzsvaru skaits — 300.
- SuisseIntlMono — nomaiņa: JetBrains Mono · kontūras 400 · Vienrindas fonts, līdzīgs SuisseIntl, ko izmanto tehniskām etiķetēm, API identifikatoriem un iegultiem datiem lietotāja saskarnes elementos. Tas saglabā tādas pašas proporcijas kā SuisseIntl, tāpēc vienrindas un proporcionāls teksts pareizi izlīdzinās jauktos kontekstos.
- SFMono — nomaiņa: Fira Code · kontūras 400 · Koda fragmenta attēlojums — tiek attēlots JSON piemēros un API dokumentācijas blokos. Jūras putu tonis tiek izmantots, lai vizuāli atšķirtu kodu no lietotāja interfeisa teksta.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | vidēji |
| Pamata solis | 8px |
| Pogas rādiuss | 8px |
| Kartes rādiuss | 8px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 72px |
| Lapas platums | 1200px |
Mākslīgais intelekts izveidos jūsu vietni Column stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- dope.security — Pusnakts terminālis ar violetām bākām
- Leonardo — Apgriezta redakcijas galerija. Melnu sienu muzejs, kurā violeti virsraksti darbojas kā sienas instalācijas, un mākslīgā intelekta ģenerēti portreti karājas blīvā režģī zemāk.
- VEED — Balta galerijas siena ar neona zaļām gaismas pogām
- Craft Docs — Digitāla kolāža albumu veidošanai. Dizains atgādina pārdomātu, taustāmu albumu, kur strukturētas digitālas piezīmes apvienojas ar maigām, organiskām tekstūrām.
- Letter — Privāta galerija, kurā apskatāmi mirdzoši artefakti no noliktavām. Izstāžu telpa ar melnām sienām, kur virs hroma skulptūrām uz galerijas tonētajām sienām virmo serifu raksti ar virsrakstiem.
- Railway — Kosmiskais pusnakts ekspresis. Mierīgs, aizraujošs ceļojums cauri tumšai, zvaigžņotai telpai, ko vada skaidri signāli.
- Garden Eight — Monumentāls redakcijas raksts uz krēmkrāsas papīra. 215 pikseļu serif virsraksts atrodas viens pats uz silta pergamenta, ko ieskauj peldošas skulpturālas formas un negatīva telpa, kas atgādina jūras gaisu — lapa vairāk atgādina mākslas monogrāfijas vāku nekā informācijas paneli.
- Steep — Serif fontu analīze uz silta papīra
- ElevenLabs — Foto eseja siltos krēmkrāsas toņos ar neuzkrītošiem virsrakstiem. Bauhaus stila piezīmju grāmatiņa — olu čaumalas krāsas papīrs, melna tinte un viens violets un oranžs akcents produktu izvietošanai.
- Awesomic — Redakcijas cinka siets ar oranžām pieturzīmēm, kas atgādina konfeti
- Monad — redakcijas tehniskais žurnāls uz silta pergamenta
- AI for Business — Brutālisma redakcijas izstāžu zāle siltos pelēkos toņos