Dub
Stjórnborð Links fyrir matt hrísgrjónapappír
Sjónrænt kerfi Dubs hefur hófstillta, næstum ritstjórnarlega SaaS fagurfræði: næstum hvítt strigi sem haldið er saman af þunnum jaðrum frekar en útstæðum þáttum, með þéttri einlita leturgerð sem veitir uppbyggingu og einum skærbláum lit (#2563eb) sem setur punktinn yfir. Yfirborðið er flatt og rammalaust við fyrstu sýn, en hvert ílát hefur 1px #e5e5e5 spássu, sem minnir á tilfinninguna af prentuðu skjali. Persónuleiki næst með litlum lituðum „pillu“-hreimum (appelsínugulum, grænum, fjólubláum) sem fljóta yfir hlutlausa litapallettu og hausum sem virðast öruggir og nútímalegir án þess að vera áberandi. Íhlutirnir eru þéttir og nettir: 8px rennur, 12px kortaradíus, pillulaga merkimiðar við 9999px og ósýnilegir stjórntæki í stað þungra, fylltra hnappa.
Síðan er byggð á miðjuðu útliti með hámarksbreidd um það bil 1200px. Aðalþátturinn er miðjuður textablokk með þremur fljótandi þáttum (Tengslaforrit, Viðskiptagreiningar, Stuttir tenglar) staðsettum lárétt fyrir ofan stóra vöruútlit. Hlutarnir eru raðaðir lóðrétt með samræmdum 64px millibilum, til skiptis á milli hvíts striga og #f5f5f5 pappírsþoku fyrir tónaaðskilnað. Neðri hlutinn notar Z-laga útlit: ritstjórnartexti er miðjaður í miðju þriðjungi og fljótandi notendaviðmótskort eru fest við vinstri og hægri spássíur, sem skapar ósamhverfa, tímaritslíka takta. Merkisskýið er einfalt 5x2 rist, miðjað á síðunni. Leiðsögnin er lágmarks efri stika - merki vinstra megin, leiðsögn í miðjunni, hópur af tveimur hnöppum (draugur "Innskráning" hnappur + fylltur "Skráning" hnappur) hægra megin - án fastrar eða risastórrar valmyndar. Mælaborðsuppsetning aðalgluggans sýnir klassíska tveggja dálka appuppsetningu: fasta hliðarstiku (svipað og 240px) + efnissvæði sem skilgreinir þéttleika vöruupplýsinga fyrir gesti áður en þeir byrja að skruna.
Myndefnið er einbeitt að vörunni, ekki lífsstílnum. Aðalskjárinn er miðjaður á stórri skjámynd af mælaborðinu, sem sýnir raunverulega vöruuppsetningu með hliðarstiku, gagnatöflu og fljótandi notendaviðmótsþáttum, settir upp sem flatur skjár á hvítum striga. Viðskiptavinamerki eru birt í ómettuðu gráu risti (býflugnabú, ofurkraftur, spjallborð, o.s.frv.) til að viðurkenna frammistöðu þeirra á samfélagsmiðlum, án litar til að leyfa einum bláa hreim síðunnar að vera ráðandi. Fljótandi samstarfsaðilakort (litlir prófílar og flísar með tekju-/greiðslugögnum) hreyfast um blokkir af ritstjórnartexta neðst og skapa dýpt án þess að nota skugga á textanum sjálfum. Bakgrunnsmynstrið með punktagrindinni er einkennandi einkenni: þunn röð af litlum punktum með mjög litlu gegnsæi skapar áferð og tilfinningu fyrir hönnunarkerfi/teikniflöt, sem undirstrikar staðsetningu síðunnar sem „nútímalegs tenglamyndunarvettvangs“. Táknmyndin er lágmarks, með útlínum og fyllingum, og notar áherslulit (mandarínu appelsínugult, lavender fjólublátt, myntugrænt) fyrir eiginleikamerki. Engar ljósmyndir, myndskreytingar eða þrívíddarlíkön eru notuð — notendaviðmót vörunnar sjálft er sjónrænt tungumál.
Litatöflu
Vörumerki
- Electric Blue
#2563eb— Aðallitur vörumerkisins — merkið, tenglar, lykilafkastavísar, virkt ástand og táknmerkingar — er notaður. Ríkur blár litur á hvítum bakgrunni skapar eina sjónræna aðdráttarafl kerfisins. - Deep Sapphire
#1e40af— Aðalbakgrunnur aðgerðahnappsins, feitletraða fyllingin í aðgerðahvatningunni — eini liturinn sem táknar aðgerðina — er notaður sparlega til að vekja athygli.
Hlutlaus
- Canvas White
#ffffff— Bakgrunnur síðu, yfirborð korts og sprettigluggar eru grunnurinn að hverjum skjá. - Paper Mist
#f5f5f5— Fínlegar breytingar á litum á sveimandi kortum, viðbótarspjöldum og fyllingum. - Ash
#e5e5e5— Þunnir jaðrar á kortunum, inntakstengjunum og skilrúmunum eru byggingarlínan sem heldur kerfinu saman. - Smoke
#d4d4d4— Skarpari rammar fyrir valda ílát og viðbótarútlínur hnappa. - Pebble
#c8c8c8— Rammar, útlínur stjórntækja og skipting með miðlungs birtuskilum. Þennan lit ætti ekki að nota sem aðallit fyrir hvatningar til aðgerða. - Midnight Ink
#0a0a0a— Aðaltexti hnappanna, auðkenndir hnappar og leiðsagnartexti eru næstum svartir til að hámarka birtuskil.
Leturfræði
frá 11 til 48px · 9 skref
- Satoshi — skipti: Inter (weight 500 · útlínur 500 · Fyrirsagnir – aðeins notaðar í 36–48px línum fyrir fyrirsagnir og kaflatitla. Leturþyngd – 500 (miðlungs, ekki feitletrað): Fyrirsagnir líta öruggar og nútímalegar út, en aldrei yfirþyrmandi. Rúmfræðileg hlutföll Satoshi gefa leturgerðinni örlítið ritstjórnarlegt, nútímalegt yfirbragð sem megintexti Inter getur ekki endurtekið.
- Inter — skipti: Inter (native) · útlínur 400, 500, 600 · Meginmál, notendaviðmótsmerki, leiðsögn, undirfyrirsagnir og aukafyrirsagnir. Inter er aðalvinnuhesturinn og sér um allt frá 11px örmerkjum til 30px aukafyrirsagna. Sjálfgefið þyngdarstig er 400 fyrir meginmál, 500 fyrir auðkennda þætti og hnappamerki og 600 er frátekið fyrir mikilvæg notendaviðmótsmerki. 16px með línuhæð 1,5 er algengasta stærðin fyrir eitt skref (1220 tilvik), sem staðfestir að 16px er hefðbundin stærð fyrir meginmál.
- Geist Mono — skipti: JetBrains Mono or IBM Plex Mono · útlínur 400, 500 · Kóðabrot, tæknileg lýsigögn og innbyggð einbreið tákn eru notuð í kóðablokkum við 12–14px og í stórum kóðaþáttum við 24px. Þetta tryggir trúverðugleika forritunartólsins, í samræmi við vörustaðsetningu Dub.
Millibil og form
| Tilgangur | Merking |
|---|---|
| Þéttleiki | meðaltal |
| Grunnskref | 8px |
| Hnapparadíus | 8px |
| Radíus korts | 12px |
| Skuggar | engin landamæri í stað skugga |
| Milli hluta | 64px |
| Síðubreidd | 1200px |
Gervigreind mun smíða vefsíðuna þína í stíl við Dub og fylla hana út
- Fyllið út vörur og færslur í gegnum tengilinn - Instagram, TikTok, Facebook.
- Flyttu efni af gömlu síðunni þinni — tilgreindu bara vefslóðina.
- Nútímaleg hönnun á bestu vélinni: React ( Next.js) með netþjónsútgáfu og SEO-bestun beint úr kassanum.
- Fullkomlega sjálfvirk SEO hagræðing fyrir leitarniðurstöður og tillögur að tauganetum.
Líkir stílar
- ElevenLabs — Ljósmyndaritgerð í hlýjum rjómalitum tónum með látlausum fyrirsögnum. Minnisbók í Bauhaus-stíl — eggjaskurnslitað pappír, svart blek og ein fjólublá og appelsínugult útlit til að sýna vörurnar.
- Awesomic — Ritstjórnarlegt sinknet með appelsínugulum greinarmerkjum sem minna á konfettí
- Monad — ritstjórnartæknilegt tímarit á hlýju pergamenti
- Seline Analytics — Rólegt greiningarborð á hlýju pappír
- Notion — Hlý pappírsminnisbók í hádegissólinni
- Anthropic — Vísindalegt tímarit á hlýju vellum — rólegt fílabeinslitað yfirborð, merktar fyrirsagnir í ritstjórnargreinum og ein leirhreim sem birtist aðeins þegar aðgerða er þörf.
- Calendly — Dökkblátt blek á köldum marmara
- Augen Pro — Hvíta framsetning Apple er með klínískum, þyngdarlausum, rafbláum lit sem eina áhersluna í einlita rými.
- Antimetal — Ritstjórnargrein á rjómalituðum pappír — rólegur morgunn í vísindatímariti, þar sem hófsemi gefur til kynna sjálfstraust og stafrófsröðun vinnur þungt verk.
- Perk — Rafmagnslime á volgu bökunarpappír
- Ditto — Sólskinsverkstæði sem býr til sýnishorn af villtum blómum. Hlýir kremlitaðir fletir, skærgulur grunnlitur, djúp dökkblár blek, lífræn litaform blómstra á bak við verkið.
- Officevibe — Ritstjórnartímarit á hlýjum, rjómalituðum pappír. Ímyndaðu þér hugsi ritgerð um mannauðsstjórnun, kynnta sem vöru — skrautlegt letur með serif-skrift sem hvíslar í gegnum nútímalegt blátt viðmót.