Vercel
Terminalas atspausdintas ant balto popieriaus
„Vercel“ dizaino sistema – tai drausmingos monochromijos pratimas: beveik balta drobė (#fafafa), juodas šriftas, ploni rėmeliai ir visiškas dekoratyvinių spalvų nebuvimas. Vizualinė kalba primena spausdintą kūrėjo terminalą – „Geist Sans“ vos įskaitomas „herojišku“ masteliu, jo svoris yra 400–450, o raidžių tarpas – -0,06 em, o „Geist Mono“ etiketes, metaduomenis ir kodo pavyzdžius taiko 11–13 pikselių didžiosiomis raidėmis. Mygtukai yra ryškūs 6 pikselių spinduliai arba stačiakampiai, grynai juodos spalvos ant balto arba baltos spalvos ant juodo. Sistema remiasi kontrastu ir tipografine hierarchija, o ne spalva, kaip vienintelius prekės ženklo elementus naudodama trikampio ženklą (▲) ir dviejų eilučių žodinį ženklą. Paviršiai dedami vienas ant kito tokia tvarka: #fafafa → #ebebeb → #171717, sukuriant gylį keičiant tonines vertes, o ne šešėlį ar spalvą. Kiekvienas elementas sukurtas ant 4 pikselių tinklelio su kompaktišku tankiu, todėl sąsaja primena inžinieriaus užrašų knygelę – tiksli, funkcionali ir be tuščios erdvės.
Konteineris yra 1280 pikselių pločio, centre, su gausia horizontalia užpildymo juosta (24–48 pikseliai). Pagrindiniame bloke naudojama asimetriška trijų zonų kompozicija: didelė antraštė kairėje, prekės ženklo glifas centre ir „antakio“ blokas dešinėje. Po pagrindiniu bloku turinys išdėstytas pakaitomis juostelėmis: viso pločio juostelė su kliento logotipu, po jos eina dviejų stulpelių skyrius „Agentų kūrėjai“, kuriame kairėje yra antraštė, o dešinėje – produkto išdėstymas, o po jo – trijų kortelių su funkcijomis tinklelis. Skyriai atskirti vertikaliais 96–128 pikselių tarpeliais be pertvarų ar fono poslinkių. Navigacija yra vienas fiksuotas 64 pikselių skydelis su neryškiu fonu. Kortelių tinkleliuose nuosekliai naudojamas dviejų arba trijų stulpelių išdėstymas su 16–24 pikselių tarpeliais. Bendras tankis yra kompaktiškas – tekstą lengva skaityti, yra daug baltos erdvės, tačiau šrifto dydis ir komponentų dydžiai neleidžia puslapiui atrodyti erdviam.
Vaizdai reti ir visada funkcionalūs. Pagrindinis vizualinis elementas yra juodas trikampis (▲) – geometrinis prekės ženklo ženklas, kuris atrodo kaip kybantis siluetas „didžiosios“ raidės masteliu. Klientų logotipuose koncepcijos įrodymo juostelėje naudojami kiekvieno prekės ženklo tikri žodiniai ženklai pilkos spalvos. Produktų maketai („Notion“ pokalbių sąsaja, CLI terminalo išvestis, paso kortelė) įterpti kaip šviesaus režimo ekrano kopijos įrėmintose kortelėse. Nėra jokių nuotraukų, iliustracijų ar 3D elementų – sistema yra gryna tipografija ir geometrinės formos ant balto popieriaus.
Paletė
Neutralus
- Obsidian
#171717— Pagrindinės antraštės, naršymo rėmeliai, tamsus mygtukų užpildymas ir sąrašų žymekliai yra beveik juodi, vengiant atšiaurumo ir ryškaus sodrumo. - Paper White
#fafafa— Puslapio drobė, kortelės paviršiai, mygtukų šviesos užpildymas – tai standartinis fonas, ant kurio yra visa kita. - Pure White
#ffffff— Pakeltos kortelių plokštumos, įdėklai, įvesties laukai. - Hairline
#ebebeb— 1 pikselio pločio mygtukų, nuorodų ir kortelių rėmeliai matomi esant dideliam priartinimui, bet nematomi esant mažam priartinimui. - Ash
#c9c9c9— Išjungtas tekstas, nutildytos etiketės, vandens ženklai su prekės ženklo pavadinimu klientų logotipuose. - Smoke
#a8a8a8— Antrinis tekstas, vietos rezervavimo tekstas, subtilus piktogramų užpildymas.
Tipografija
nuo 11 iki 64 pikselių · 6 žingsniai
- Geist Sans — pakeitimas: Inter · kontūrai 400, 450, 500 · Pagrindinis sąsajos ir antraščių šriftas yra specialiai sukurtas geometrinis „sans-serif“ šriftas iš „Vercel“ su tankiais tarpais tarp raidžių dideliuose dydžiuose (-0,06 em esant 56–64 pikselių, -0,05 em esant 30 pikselių). Puslapio viršuje esančioms antraštėms pasirinktas 450 storio šriftas: storesnis nei „Light“, bet lengvesnis nei „Semi-Bold“, sukuriantis užtikrintą, bet ne per didelį toną.
- Geist Mono — pakeitimas: JetBrains Mono · kontūrai 400, 500, 600 · Antrinis vienodo tarpo šriftas antraštėms, kodo blokams, CLI išvesties skydeliams, metaduomenims ir didžiosioms raidėms. 8 pikselių / 600 pikselių / didžiųjų raidžių derinys leidžia tiksliai išdėstyti mažyčius žodžių ženklus. Platus raidžių tarpas (0,071 em) vienodo tarpo versijoje suteikia pakankamai vietos didžiosioms raidėms.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | tankus |
| Pagrindinis žingsnis | 12px |
| Mygtuko spindulys | 6px |
| Kortelės spindulys | 6px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 96-128px |
| Puslapio plotis | 1280px |
Dirbtinis intelektas sukurs jūsų svetainę Vercel 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
- Headspace — Saulėtas sveikatingumo kampelis ant šilto popieriaus
- WHOOP — Spektaklio laboratorija vidurnaktį – balti klinikinės laboratorijos stalai po juoda teatro tuštuma, vienas violetinis elektros pulsas
- Together AI — Tyrimų konsolė ant ledyninio popieriaus
- v0 by Vercel — Tekinimo staklių braižymas. Svarbiausia yra tikslumas ir funkcionalumas, kiekvienas elementas atlieka aiškią paskirtį ant švaraus, techniškai tobulo paviršiaus.
- Dovetail — Brėžinys po juodu mėnuliu – vos matomos grafiko linijos, baltas šriftas, vienas violetinis blizgutis
- Glideapps — monochrominis braižymo stalas su vienu elektriniu turkio blizgesiu
- Timescale — Inžinerinis brėžinys ant šilto milimetrinio popieriaus
- UGLYCASH — Lipdukais apklijuotas užrašų knygutė ant kreminės spalvos popieriaus dvelkia drąsios, maksimalistinės finansinių technologijų įmonės, kuri išdidžiai demonstruoja savo chaosą, atmosfera.
- Sprout Social — Žalias daigas ant juodo skalūno. Vienas ryškus akcentas ant griežtos monochrominės drobės, kurios spalva naudojama tik veiksmui, o užtikrintas geometrinis šriftas tarnauja kaip kelrodžiai.
- Krea — galerija noir vidurnaktį
- Evergreen — Saulės šiltnamis ant lininio popieriaus
- Factory — „Karo kambario“ terminalas vidurnaktį. „Gamykla“ – tai atšiauriai juodas valdymo skydelis, ant kurio nukrenta viena balta kortelė tarsi žibintuvėlio apšviesta žinutė – vienintelis objektas kambaryje yra pats darbas.