Dub
„Link“ matinio ryžinio popieriaus valdymo skydelis
„Dub“ vizualinė sistema pasižymi santūria, beveik redakcine SaaS estetika: beveik balta drobė, kurią sujungia ploni rėmeliai, o ne išsikišę elementai, su tankia monochromine tipografija, suteikiančia struktūrinę atramą, ir viena ryškiai mėlyna spalva (#2563eb), kuri sukuria išskirtinumą. Iš pirmo žvilgsnio paviršiai išlieka plokšti ir berėmės, tačiau kiekvienas konteineris turi 1 pikselio #e5e5e5 paraštę, primenančią spausdintą dokumentą. Individualumas pasiekiamas per nedidelį spalvotų „tabletės“ formos akcentų (oranžinės, žalios, violetinės) rinkinį, kuris kybo virš neutralios paletės, ir antraštes, kurios atrodo užtikrintai ir moderniai, bet nebūdamos prašmatnios. Komponentai yra kompaktiški ir tankūs: 8 pikselių tarpinės juostos, 12 pikselių kortelės spindulys, 9999 pikselių tabletės formos etiketės ir nematomi valdikliai vietoj sunkių, užpildytų mygtukų.
Puslapis sukurtas pagal centruotą išdėstymą, kurio maksimalus plotis yra maždaug 1200 pikselių. Pagrindinis elementas yra centruotas teksto blokas su trimis plaukiojančiais elementais (partnerių programos, konversijų analizė, trumposios nuorodos), horizontaliai išdėstytais virš didelio produkto išdėstymo. Skyriai išdėstyti vertikaliai su nuosekliais 64 pikselių tarpeliais, kaitaliojant baltą drobę ir #f5f5f5 popierinį miglotą vaizdą, kad būtų atskirti tonai. Apatinėje dalyje naudojamas Z formos išdėstymas: redakcinis tekstas yra centruotas viduriniame trečdalyje, o plaukiojančios vartotojo sąsajos kortelės yra pritvirtintos prie kairiosios ir dešiniosios paraščių, sukuriant asimetrišką, žurnalo tipo ritmą. Logotipo debesis yra paprastas 5x2 tinklelis, centruotas puslapyje. Navigacija yra minimalistinė viršutinė juosta – logotipas kairėje, navigacija centre, dviejų mygtukų grupė (vaiduokliškas mygtukas „Prisijungti“ + užpildytas mygtukas „Registruotis“) dešinėje – be fiksuoto ar mega meniu. Pagrindinio lango prietaisų skydelio išdėstymas rodo klasikinį dviejų stulpelių programos išdėstymą: fiksuota šoninė juosta (panaši į 240 pikselių) + turinio sritis, kuri apibrėžia produkto informacijos tankį lankytojams prieš jiems pradedant slinkti.
Vizualinė medžiaga orientuota į produktą, o ne į gyvenimo būdą. Pagrindinio ekrano centre – didelė prietaisų skydelio ekrano kopija, kurioje pavaizduotas realaus pasaulio produkto maketas su šonine naršymo juosta, duomenų lentele ir plaukiojančiais vartotojo sąsajos elementais, išdėstytais kaip plokščias ekranas ant baltos drobės. Klientų logotipai rodomi nesočiųjų pilkos spalvos tinklelyje (avilys, supergalia, „Chatbase“ ir kt.), siekiant pabrėžti jų socialinės žiniasklaidos efektyvumą, be spalvų, kad liktų dominuojantis vienas mėlynas puslapio akcentas. Plaukiojančios partnerių kortelės (maži profiliai ir plytelės su pajamų / mokėjimų duomenimis) juda aplink redakcinio teksto blokus apačioje, sukurdamos gylio pojūtį nenaudojant šešėlių pačiame tekste. Taškinio tinklelio fono raštas yra skiriamasis bruožas: plona mažų taškų eilė su labai mažu neskaidrumu sukuria tekstūrą ir dizaino sistemos / piešimo paviršiaus pojūtį, pabrėžiant svetainės, kaip „šiuolaikinės nuorodų priskyrimo platformos“, pozicionavimą. Ikonografija minimali, su kontūrais ir užpildais, o funkcijų žymėms naudojama akcentų paletė (mandarinų oranžinė, levandų violetinė, mėtų žalia). Nenaudojamos jokios nuotraukos, iliustracijos ar 3D modeliai – pati produkto vartotojo sąsaja yra vizualinė kalba.
Paletė
Prekės ženklas
- Electric Blue
#2563eb— Naudojama pagrindinė prekės ženklo spalva – logotipas, nuorodos, pagrindiniai našumo rodikliai, aktyvios būsenos ir piktogramų akcentai. Sodri mėlyna spalva baltame fone sukuria vienintelį sistemos vizualinį patrauklumą. - Deep Sapphire
#1e40af— Pagrindinis veiksmo mygtuko fonas, paryškintas raginimo veikti užpildas – vienintelė spalva, žyminti veiksmą – naudojamas saikingai, siekiant patraukti dėmesį.
Neutralus
- Canvas White
#ffffff— Puslapio fonas, kortelės paviršius, iššokantys skydeliai yra absoliutus kiekvieno ekrano pagrindas. - Paper Mist
#f5f5f5— Subtilūs įdėtųjų kortelių, papildomų skydelių ir užpildų spalvos pakeitimai užvedus pelės žymeklį. - Ash
#e5e5e5— Plonos plokščių, įvesties jungčių ir pertvarų ribos yra struktūrinė linija, laikanti sistemą kartu. - Smoke
#d4d4d4— Ryškesnės pasirinktų konteinerių kraštinės ir papildomi mygtukų kontūrai. - Pebble
#c8c8c8— Vidutinio kontrasto rėmeliai, valdymo kontūrai ir struktūriniai skirtukai. Ši spalva neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti. - Midnight Ink
#0a0a0a— Pagrindinis mygtukų tekstas, paryškinti mygtukai ir naršymo tekstas yra beveik juodi, kad būtų užtikrintas maksimalus kontrastas.
Tipografija
nuo 11 iki 48 pikselių · 9 žingsniai
- Satoshi — pakeitimas: Inter (weight 500 · kontūrai 500 · Antraštės rodomos tik 36–48 pikselių eilutėse antraštėms ir skyrių pavadinimams. Šrifto storis – 500 (vidutinis, ne paryškintas): antraštės atrodo užtikrintai ir moderniai, bet niekada ne per daug ryškiai. Satoshi geometrinės proporcijos suteikia šriftui šiek tiek redakcinio, modernaus pojūčio, kurio „Inter“ tekstas negali atkartoti.
- Inter — pakeitimas: Inter (native) · kontūrai 400, 500, 600 · Pagrindinė teksto dalis, vartotojo sąsajos etiketės, navigacija, paantraštės ir antraštės. „Inter“ yra pagrindinis darbštuolis, tvarkantis viską – nuo 11 pikselių mikroetikečių iki 30 pikselių antrinių antraščių. Pagrindinės teksto dalies svoris yra numatytasis – 400, paryškintų elementų ir mygtukų etikečių – 500, o svarbių vartotojo sąsajos etikečių – 600. Dažniausiai sutinkamas vieno žingsnio dydis (1220 atvejų) yra 16 pikselių su 1,5 eilutės aukščiu, o tai patvirtina, kad 16 pikselių yra kanoninis pagrindinės teksto dalies dydis.
- Geist Mono — pakeitimas: JetBrains Mono or IBM Plex Mono · kontūrai 400, 500 · Kodo fragmentai, techniniai metaduomenys ir įterptieji vienodo pločio žetonai naudojami kodo blokuose, kurių dydis yra 12–14 pikselių, ir dideliuose kodo rodymo elementuose, kurių dydis yra 24 pikseliai. Tai užtikrina kūrėjo įrankio patikimumą, atitinkantį „Dub“ produkto pozicionavimą.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 8px |
| Mygtuko spindulys | 8px |
| Kortelės spindulys | 12px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 64px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Dub 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
- 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
- Seline Analytics — Ramus analitinis stalas ant šilto popieriaus
- Notion — Šiltas popierinis užrašų knygutės formos laikraštis vidurdienio saulėje
- Anthropic — Mokslinis lauko žurnalas ant šilto pergamento – ramūs dramblio kaulo paviršiai, serifuotos redakcinės antraštės ir vienas molinis akcentas, atsirandantis tik tada, kai reikia imtis veiksmų.
- Calendly — Tamsiai mėlynas rašalas ant šalto marmuro
- Augen Pro — „Apple“ baltoje prezentacijoje monochrominėje erdvėje vienintelis akcentas – klinikinė, nesvari, elektrinė mėlyna spalva.
- Antimetal — Redakcijos kronika ant kreminio popieriaus – ramus rytas moksliniame žurnale, kur santūrumas perteikia pasitikėjimą, o serifai atlieka sunkų darbą.
- Perk — Elektrinė citrina ant šilto pergamentinio popieriaus
- Ditto — Saulės apšviestos dirbtuvės, kuriose kuriami laukinių gėlių pavyzdžiai. Šilti kreminiai paviršiai, ryški geltona pagrindinė spalva, tamsiai mėlyni dažai, organinės spalvų formos, žydinčios už kūrinio.
- Officevibe — Redakcinis žurnalas ant šiltos kreminės spalvos popieriaus. Įsivaizduokite apgalvotą esė apie žmogiškųjų išteklių valdymą, pateiktą kaip produktą – kursyvu su serifiniu šriftu, šnabždančiu per modernią mėlyną sąsają.