Column
tamsiai mėlyna knyga po vėsia aušra
„Column“ naudoja sodrią, institucinę tamsiai mėlyną spalvą beveik baltame fone: puslapis pirmiausia atrodo kaip tvirtas bankininkystės produkto paviršius, o tik po to – kūrėjų žaidimų aikštelė. Prekės ženklo spalva nėra viena, o suderinta pora – tamsiai mėlyna #111a4a rimtai struktūrai, mėtinė žalia #44b48b duomenims ir kodui – su viena šilta oranžine (#ec652b), skirta didelio intensyvumo akcentiniams paviršiams, pavyzdžiui, „Brex“ kortelei. Tipografijoje dominuoja „SuisseIntl“ – geometrinis be serifų raštas, naudojamas visame svorio diapazone nuo 300 (nuorodos) iki 600 (ekranas), suteikiantis sistemai rafinuotą, redakcinį stilių, kurio trūksta daugumai finansinių technologijų įmonių. Kortelės kabo ant didelių baltų paviršių su subtiliais, sluoksniuotais šešėliais; dauguma sąsajos elementų yra plokšti, o gylis atsiranda tik ten, kur kortelė turėtų atrodyti kaip fizinis objektas (operacijų valdikliai, produktų maketai). Kodas ir finansiniai duomenys pateikiami vienspalviai, jūros putos spalvos – tai vizualinis signalas, kad tai bankas, kurį inžinieriai sukūrė inžinieriams.
Puslapio struktūra yra viso pločio, centruota su plačiomis šoninėmis paraštėmis (64–15 cm darbalaukio versijoje). Pagrindinis ekranas yra padalintas: antraštė ir raginimai veikti yra lygiuoti kairėje pusėje, 25 cm aukštyje, o dešinėje pusėje, 55 cm aukštyje, išdėstytas slankiojantis sandorio valdiklis pustonių žemėlapio fone. Po pagrindiniu ekranu sekcijos kaitaliojasi tarp baltos (4 cm) ir šviesios drobės (5 cm) su 6 cm vertikaliais tarpeliais. Turinys išdėstytas pagal vieną 6 stulpelių tinklelį: teksto blokai užima 4 stulpelius (7 cm), vaizdų / produktų kortelės užima 5–6 stulpelius, sąmoningai atitraukus nuo tinklelio. Funkcijas apibūdinančios sekcijos naudoja 2 stulpelių išdėstymą: tekstas kairėje, produktas dešinėje. Pasitikėjimo statistikos skyrius yra padalintas į 4 stulpelių tinklelį per visą puslapio plotį. Klientų logotipai yra vienoje centruotoje eilutėje su 48 pikselių tarpeliais. Poraštė yra kompaktiškai išdėstyta dviem stulpeliais. Navigacija – tai fiksuota, 62 pikselių aukščio, permatoma viršutinė juosta virš pagrindinio ekrano su neryškiu fonu, kuris slenkant pabąla. Nėra šoninės juostos ar mega meniu – išskleidžiamieji meniu yra paprasti rodyklių stiliaus meniu.
Vizualinis stilius yra minimalistinis ir funkcionalus – „Column“ visiškai vengia nuotraukų archyvo. Vizualinė kalba sukurta remiantis trimis šaltiniais: (1) SVG duomenų iliustracijomis, konkrečiai – punktyriniu pustoniu pasaulio žemėlapiu, perteiktu su gradientu nuo indigo iki oranžinės ir turkio spalvos, sukuriančiu pasaulinio masto atmosferą už pagrindinio elemento; (2) produktų kortelių išdėstymais – plaukiojančiais valdikliais, kuriuose baltose kortelėse su ryškiais šešėliais rodomi sąskaitų likučiai, pervedimų informacija ir JSON kodo fragmentai; (3) diagramų vizualizacijomis – turkio spalvos žvakidės arba juostinės diagramos su plonomis jungiamosiomis linijomis, naudojamomis pasitikėjimo / statistikos skyriuje. Pustonio žemėlapis yra būdingas vizualinis elementas – jo gradientas pereina nuo #d65620 (oranžinė) iki violetinės, mėlynos, žydros, turkio ir geltonos spalvos, sukurdamas spektrą, kuris sujungia visą prekės ženklo paletę viename dekoratyviniame paviršiuje. Piktogramų kontūro storis yra vienodas – 1,5–2 pikseliai #232730 arba #a9acb6 variantuose, o aktyvios būsenos užpildomos. Jokių gyvenimo būdo nuotraukų, jokių abstrakčių 3D vizualizacijų – santūrumas sąmoningai sutelktas į produktą ir duomenis.
Paletė
Prekės ženklas
- Indigo Navy
#111a4a— Pagrindinė prekės ženklo spalva naudojama užpildytiems raginimams veikti, aktyvioms naršymo būsenoms, antraštei ir logotipui. Tamsiai violetinė-mėlyna spalva suteikia svetainei vientisą, tačiau sodrų juodą atspalvį; kartu su baltu tekstu ji sukuria įtaigiausią mygtuką svetainėje. - Seafoam 600
#44b48b— Kodo ir duomenų spalva yra prekės ženklo spalva, naudojama JSON raktams, identifikatoriams ir finansinėms reikšmėms kodo fragmentuose. Ji taip pat naudojama duomenų taškams diagramose ir augimo vizualizacijose. - Seafoam 700
#167e6c— Tamsesnis jūros putos atspalvis kontūrui, diagramos linijoms ir piktogramų akcentams duomenų kontekste. Tai sujungia jūros putos skalę su tamsesniu fonu. - Seafoam 400
#94efb7— Paryškintame kodo fragmente yra eilutės reikšmės, URL ir API galiniai taškai kodo blokuose. Šviesiausia jūros putų spalva skaitoma kaip vienodo tarpo šriftas su žalsvu atspalviu. - Deep Sea
#023247— Diagramos dekoratyvinis kontūras ir akcento spalva yra sodri turkio spalva, naudojama SVG iliustracijose ir duomenų vizualizacijose kartu su jūros putų spalvų skale.
Neutralus
- Midnight Ink
#011821— Tamsus paviršius ir paryškintas tekstas – produkto kortelės fonas, didelio kontrasto pagrindinis tekstas. Arčiau pilkos spalvos su šaltu melsvai žaliu atspalviu; naudojamas kaip pagrindas tamsiam režimui, kai reikia apversti dalį. - Slate Ink
#3b3e47— Antrinis pavadinimas ir pagrindinis tekstas yra šiek tiek šiltesni nei „Midnight Ink“, naudojamas ten, kur gryna juoda spalva šviesioje drobėje atrodytų per griežta. - Steel
#7c7f88— Pagrindiniame tekste ir nuorodos tekste dominuoja prislopinta spalva (pagrindiniame tekste panaudota 245 kartus). Neutrali pilkai mėlyna spalva, suvokiama kaip rami, niekada nebūna išblukęs vaizdas. - Fog
#a9acb6— Piktogramų kontūrai, tretinės rėmeliai ir vietos rezervavimo tekstas. Vidutinio pilkumo spalva, kuri skiria tekstą, bet su juo nekonkuruoja. - Mist
#cbcccf— Pagrindinis tekstas – parašai, atsakomybės ribojimas ir smulkus šriftas – yra įskaitomas baltame fone, bet vizualiai mažiau pastebimas. - Silver Lining
#e3e4e8— Kortelės kraštinės, įvesties lauko kraštinės, skiriamosios linijos. Ši struktūrinė, subtili spalva naudojama ten, kur reikia atskirti du paviršius be šešėlių.
Tipografija
nuo 10 iki 60 pikselių · 10 žingsnių
- SuisseIntl — pakeitimas: Inter · kontūrai 300, 400, 500, 600 · Pagrindinis šriftas – naudojamas visoms antraštėms, pagrindiniam tekstui, mygtukams, naršymo juostai, nuorodoms ir kortelės tekstui. Unikalus geometrinis be serifų šriftas suteikia „Column“ išskirtinį redakcinį stilių, išskiriantį jį iš kitų finansinių technologijų įmonių, dirbančių tik su „Inter-only“. Antraštėms naudojamas 600 pikselių storis, 52–60 pikselių plotis, paantraštėms – 500, pagrindiniam tekstui – 400, o nuorodoms su mažu paryškinimu – 300.
- SuisseIntlMono — pakeitimas: JetBrains Mono · kontūrai 400 · Vienodo tarpo šriftas, panašus į „SuisseIntl“, naudojamas techninėms etiketėms, API identifikatoriams ir į vartotojo sąsajos elementus įterptiems duomenims. Jis išlaiko tas pačias proporcijas kaip ir „SuisseIntl“, todėl vienodo tarpo ir proporcingas tekstas teisingai sulygiuojamas mišriuose kontekstuose.
- SFMono — pakeitimas: Fira Code · kontūrai 400 · Kodo fragmento rodymas – rodomas JSON pavyzdžiuose ir API dokumentacijos blokuose. Jūros putų atspalvis naudojamas kodui vizualiai atskirti nuo vartotojo sąsajos teksto.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 8px |
| Mygtuko spindulys | 8px |
| Kortelės spindulys | 8px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 72px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Column stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- dope.security — Vidurnakčio terminalas su violetiniais švyturėliais
- Leonardo — Apversta redakcinė galerija. Juodomis sienomis dengtas muziejus, kuriame violetinės antraštės veikia kaip sienų instaliacijos, o dirbtinio intelekto generuoti portretai kabo tankiame tinklelyje apačioje.
- VEED — Balta galerijos siena su neoninėmis žaliomis šviesos mygtukais
- Craft Docs — Skaitmeninis koliažas albumų kūrimui. Dizainas primena apgalvotą, lytėjimo būdu pagamintą albumą, kuriame struktūrizuoti skaitmeniniai užrašai dera su švelniomis, organiškomis tekstūromis.
- Letter — Privati galerija, kurioje eksponuojami spindintys artefaktai iš sandėlio. Juodomis sienomis dengta parodų erdvė, kurioje ant galerijos tamsintų sienų virš chromuotų skulptūrų kabo serifuotos antraštės.
- Railway — Kosminis vidurnakčio ekspresas. Rami, jaudinanti kelionė per tamsią, žvaigždėtą kosmosą, vadovaujama aiškių signalų.
- Garden Eight — Monumentalus redakcinis straipsnis ant kreminės spalvos popieriaus. 215 pikselių dydžio serifinė antraštė guli viena ant šilto pergamento, apsupta plūduriuojančių skulptūrinių formų ir neigiamos erdvės, primenančios jūros orą – puslapis labiau primena meno monografijos viršelį nei prietaisų skydelį.
- Steep — Serifinių šriftų analizė ant šilto popieriaus
- ElevenLabs — Šiltų kreminių atspalvių fotoreportažas su subtiliomis antraštėmis. Bauhaus stiliaus užrašų knygelė – kiaušinio lukšto spalvos popierius, juodas rašalas ir vienas violetinis bei oranžinis akcentas gaminiui eksponuoti.
- Awesomic — Redakcijos cinko tinklelis su oranžiniais skyrybos ženklais, primenančiais konfeti
- Monad — redakcinis techninis žurnalas ant šilto pergamento
- AI for Business — Brutalistinis redakcinis salonas šiltais pilkais tonais