Dub
Link-en arroz-paper matearen kontrol-panela
Dub-en sistema bisualak SaaS estetika neurritsua eta ia editoriala du: mihise ia zuria, elementu irtenen ordez ertz meheek lotuta, tipografia monokromo trinkoak euskarri estrukturala ematen duelarik eta kolore urdin distiratsu bakar batek (#2563eb) adierazpena egiten duelarik. Gainazalak lauak eta markorik gabe geratzen dira lehen begiratuan, baina edukiontzi bakoitzak 1px-ko #e5e5e5 marjina du, dokumentu inprimatu baten sentsazioa gogoraraziz. Nortasuna lortzen da paleta neutroaren gainean flotatzen duten "pilula" azentu koloretsu multzo txiki baten bidez (laranja, berdea, morea), eta goiburu sendo eta modernoak deigarriak izan gabe. Osagaiak trinkoak eta trinkoak dira: 8px-ko lerroak, 12px-ko txartel-erradioa, 9999px-ko pilula itxurako etiketak eta kontrol ikusezinak botoi astun eta beteen ordez.
Orria 1200px inguruko zabalera maximoa duen diseinu zentralizatu batean eraikita dago. Elementu nagusia hiru elementu flotagarri dituen testu-bloke zentralizatu bat da, produktuaren diseinu handi baten gainean horizontalki kokatuta. Atalak bertikalki antolatuta daude 64px-ko marjina koherenteekin, mihise zuriaren eta #f5f5f5 paper lausoaren artean txandakatuz tonu-bereizketa lortzeko. Beheko atalak Z formako diseinua erabiltzen du: testu editoriala erdiko herenean zentratuta dago, eta UI txartelak ezkerreko eta eskuineko marjinetan ainguratuta daude, aldizkari baten antzeko erritmo asimetriko bat sortuz. Logotipoaren hodeia 5x2ko sareta sinple bat da, orrialdean zentratuta. Nabigazioa goiko barra minimalista bat da: logotipoa ezkerrean, nabigazioa erdian, bi botoiez osatutako talde bat ("Saioa hasi" botoia mamu bat + "Erregistratu" botoia beteta) eskuinean, menu finko edo mega-menurik gabe. Leiho nagusiaren aginte-paneleko diseinuak bi zutabeko aplikazioen diseinu klasikoa erakusten du: alboko barra finko bat (240px-ren antzekoa) + bisitariek korritzen hasi aurretik produktuaren informazioaren dentsitatea definitzen duen eduki-eremu bat.
Ikusizkoak produktuan zentratuta daude, ez bizimoduan. Pantaila nagusia kontrol-paneleko pantaila handi batean zentratzen da, benetako produktu baten maketa irudikatuz, alboko barrako nabigazioarekin, datu-taularekin eta interfazearen elementu flotagarriekin, mihise zuri baten gainean panel lau gisa antolatuta. Bezeroen logotipoak eskala griseko sareta desaturatu batean bistaratzen dira (erle-maketa, superboterea, Chatbase, etab.) haien sare sozialetako errendimendua aitortzeko, kolorerik gabe, orrialdearen azentu urdin bakarra nagusi izaten jarraitzeko. Bazkide-txartel flotagarriak (profil txikiak eta diru-sarreren/ordainketa datuekin) beheko testu editorialaren blokeen inguruan mugitzen dira, sakontasun sentsazioa sortuz testuan bertan itzalik erabili gabe. Puntu-sareta atzeko planoaren eredua ezaugarri bereizgarria da: opakutasun oso baxuko puntu txikien ilara mehe batek ehundura eta diseinu-sistema/marrazketa-azalera baten sentsazioa sortzen ditu, gunearen "lotura-atribuzio plataforma moderno" gisa duen kokapena azpimarratuz. Ikonografia minimalista da, eskemekin eta betegarriekin, eta azentu-paleta bat erabiltzen du (mandarina laranja, izpiliku morea, menta berdea) ezaugarri-etiketetarako. Ez da argazkirik, ilustraziorik edo 3D modelorik erabiltzen; produktuaren erabiltzaile-interfazea bera hizkuntza bisuala da.
Paleta
Marka
- Electric Blue
#2563eb— Markaren kolore nagusia erabiltzen da: logotipoa, estekak, errendimendu-adierazle nagusiak, egoera aktiboak eta ikonoen azentuak. Atzealde zuri baten gainean urdin bizia sortzen du sistemaren erakargarritasun bisual bakarra. - Deep Sapphire
#1e40af— Ekintza-botoiaren atzeko plano nagusia, ekintzarako deiaren betegarri lodia —ekintza adierazten duen kolore bakarra—, gutxitan erabiltzen da arreta erakartzeko.
Neutroa
- Canvas White
#ffffff— Orriaren atzeko planoa, txartelaren gainazala, pop-up panelak dira pantaila guztien oinarri absolutua. - Paper Mist
#f5f5f5— Txartel txertatuetarako, panel gehigarrietarako eta betegarrietarako kolore aldaketa sotilak. - Ash
#e5e5e5— Txartelen, sarrera konektoreen eta zatitzaileen ertz meheak dira sistema elkarrekin eusten duen egitura-lerroa. - Smoke
#d4d4d4— Hautatutako ontzietarako ertz zorrotzagoak eta botoien eskema gehigarriak. - Pebble
#c8c8c8— Kontraste ertaineko ertzak, kontrol-eskemak eta egitura-banatzaileak. Kolore hau ez da erabili behar ekintzarako deietarako kolore nagusi gisa. - Midnight Ink
#0a0a0a— Botoien testu nagusia, nabarmendutako botoiak eta nabigazio testua ia beltzak dira kontraste handiena lortzeko.
Tipografia
11tik 48px-ra · 9 urrats
- Satoshi — ordezkapena: Inter (weight 500 · eskemak 500 · Goiburuak bistaratzea – goiburu eta atalen izenburuetarako 36-48px lerroetan bakarrik erabiltzen da. Letra-lodiera – 500 (ertaina, ez lodia): Goiburuek itxura sendoa eta modernoa dute, baina inoiz ez dira gehiegizkoak. Satoshiren proportzio geometrikoek letra-tipoari itxura editorial eta modernoa ematen diote, Interren testuak ezin duena errepikatu.
- Inter — ordezkapena: Inter (native) · eskemak 400, 500, 600 · Gorputz-testua, UI etiketak, nabigazioa, azpitituluak eta izenburu txikiak. Inter da lan-zaldi nagusia, 11px-ko mikroetiketetatik hasi eta 30px-ko bigarren mailako izenburuetaraino denetarik kudeatzen baitu. 400eko pisua da gorputz-testuarentzako lehenetsia, 500ekoa nabarmendutako elementu eta botoien etiketetarako, eta 600ekoa UI etiketa garrantzitsuetarako. 16px-ko pisua, 1,5eko lerro-altuerarekin, da urrats bakarreko tamaina ohikoena (1220 agerraldi), eta horrek baieztatzen du 16px dela gorputz-testuaren tamaina kanonikoa.
- Geist Mono — ordezkapena: JetBrains Mono or IBM Plex Mono · eskemak 400, 500 · Kode zatiak, metadatu teknikoak eta txertatutako espazio bakarreko tokenak 12-14px-ko kode blokeetan eta 24px-ko kode bistaratze elementu handietan erabiltzen dira. Horrek garatzaile tresnaren sinesgarritasuna bermatzen du, Dub-en produktuaren kokapenarekin bat etorriz.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | batez bestekoa |
| Oinarrizko urratsa | 8px |
| Botoiaren erradioa | 8px |
| Txartelaren erradioa | 12px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 64px |
| Orriaren zabalera | 1200px |
Adimen artifizialak zure webgunea Dub estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- ElevenLabs — Krema koloreko tonu beroetako argazki-saiakera, izenburu sotilekin. Bauhaus estiloko koadernoa: arrautza-oskolaren koloreko papera, tinta beltza eta produktua erakusteko more eta laranja koloreko azentu bakarra.
- Awesomic — Konfetiaren antzeko puntuazio-markak laranja koloreko zink sare editoriala
- Monad — pergamino beroan argitaratutako aldizkari tekniko editoriala
- Seline Analytics — Paper epelaren gaineko taula analitiko lasaia
- Notion — Eguerdiko eguzkitan paperezko koaderno epel bat
- Anthropic — Pergamino epelaren gaineko aldizkari zientifikoa: boli koloreko gainazal lasaiak, serifadun editorial-izenburuak eta ekintza beharrezkoa denean bakarrik agertzen den buztinezko azentu bakarra.
- Calendly — Tinta urdin iluna marmol hotzean
- Augen Pro — Appleren aurkezpen zuriak urdin elektriko, kliniko eta arin bat du azentu bakar gisa espazio monokromo batean.
- Antimetal — Krema koloreko paperean argitaratutako kronika editoriala —goiz lasai bat aldizkari zientifiko batean, non neurritasunak konfiantza ematen duen eta serifek lan astuna egiten duten
- Perk — Limoi elektrikoa pergamino-paper epelaren gainean
- Ditto — Eguzki argitan dagoen tailer bat lore basatien laginak sortzen. Krema koloreko gainazal epelak, oinarrizko kolore hori bizia, itsas urdin ilunaren tintak, piezaren atzean loratzen diren kolore organikoen formak.
- Officevibe — Krema koloreko paper epel batean argitaratutako aldizkari editorial bat. Imajinatu Giza Baliabideen kudeaketari buruzko saiakera hausnarkor bat, produktu gisa aurkeztua: interfaze urdin moderno batetik xuxurlatzen den letra-tipo etzana.