Calendly
Tumesinine tint külmal marmoril
Calendly tundub rahuliku ja enesekindla planeerimistöökohana: peaaegu valge lõuend rohke hingamisruumiga, jahedal hallil taustal hõljuvad karged valged tootekaardid ja kogu tüpograafia on renderdatud tumesinise tindiga, mitte puhta mustaga. Määravaks elemendiks on tumesinine värv (#0b3558), mida kasutatakse kõikjal tekstis – pealkirjades, nuppudel, ikoonidel, linkidel –, mis pehmendab kogu liidest, muutes selle soojemaks ja stiilsemaks kui tüüpiline SaaS-maandumisleht. Kõigi peamiste toimingute jaoks on kasutatud ühte erksinist värvi (#006bff) ning tootepaigutustest kaugemale ulatuvad dekoratiivsed roosad ja sinised pritsmed lisavad soojust, tekitamata segadust. Komponendid on hoitud tagasihoidlikuna: õhukesed 1px äärised, peened sinakasvarjundid, suured 24px kaardiraadiused ja 8px nuppude nurgad tunduvad pigem tahtlikud kui igavad.
Maksimaalne laius 1200 pikslit, tsentreeritud, laiade veeristega töölauaversioonis. Põhiekraan on jagatud kaheks veeruks: vasakpoolne veerg sisaldab 80 pikslit päist + põhiteksti + virnastatud sisselogimisnuppe, parempoolne veerg aga broneerimisvidina kaarti, mille taustal on dekoratiivsed elemendid. Põhiekraan on täislaiuses riba Trusti logoga. Järgnevad sektsioonid vahelduvad tsentreeritud päiseplokkide (H2 + alltekst + valikuline üleskutse tegevusele) ja seejärel kaheveeruliste plokkide vahel, mis kirjeldavad funktsioone (tekst vasakul/toode paremal või toode vasakul/tekst paremal) ning iga tootepildi taga on dekoratiivsed aktsentelemendid. Kaardiruudustikku kasutatakse harva – paigutus eelistab paarislõike, mis on paigutatud kõrvuti, mitte mitmeveerulisi ruudustikke. Sektsioonide vaheline kaugus on vahemikus 48 kuni 64 pikslit. Navigeerimine on 64 piksli suurune fikseeritud ülemine riba, kus logo on vasakul, menüü on tsentreeritud ja paremal on rühm üleskutseid tegevusele.
Peamine visuaalne element on toote ekraanipildid – broneerimiskalendri kasutajaliidese lihtsad maketid, mis on renderdatud teravatele valgetele kaartidele ümarate nurkadega. Dekoratiivne disain: iga tootekaarti ümbritseb koralllilla (#e55cff) või taevasinise (#0099ff) pehme laik, mis on kergelt nihutatud ja hägustatud, luues pigem kollaažiefekti kui lameda ekraanipildi. Fotosid ega elustiilipilte pole – kõik visuaalsed elemendid esindavad toote kasutajaliidest, abstraktseid aktsentkujusid või monokroomseid partnerite logosid usaldusribal. Ikoonid on lineaarsed, joone laiusega 1,5–2 pikslit, monokroomsed, tumesinises (Ink Navy) või sinises (Signal Blue).
Palett
Bränd
- Ink Navy
#0b3558— Põhitekst, pealkirjad, ikoonid, tume taust tegevusele kutsumiseks, navigeerimislingid. - Signal Blue
#006bff— Peamine üleskutse tegevusele (CTA), aktiivne navigeerimine, lingi rõhutamine, valitud olekud
Neutraalne
- Carbon
#0a0a0a— Puhas must tekst (varuvalik), logo glüüf, ikoonitäide. - Slate Gray
#476788— Lisatekst, tugitekst, summutatud sildid. - Mist Gray
#a6bbd1— Keelatud tekst, mitteaktiivsete funktsioonide sildid, heledate ikoonide kontuurid - Cloud
#f8f9fb— Lehekülje lõuend, jaluse taust, lisapind - Paper
#ffffff— Kaardipinnad, reljeefsed paneelid, nuppude tekst tumedal taustal. - Pebble
#f0f3f8— Ikoonide taustapildid, sisestusvälja varjutus, peened eraldajad, hõljukiefektid.
Tüpograafia
12-st 80 pikslini · 10 sammu
- Gilroy — asendamine: Manrope · kontuurid 400, 500, 600, 700 · Kogu liidese tekst. Gilroy on geomeetriline humanistlik sans-serif laiade avade ja ühtlase kontuurikontrastiga; selle paksu kirja paksusi (700) kasutatakse pealkirjade jaoks, samas kui nuppude ja alapealkirjade jaoks kasutatakse 500–600. Asendage Manrope'i või Interiga.
- Gilroy — asendamine: Inter · kontuurid 400 · Põhitekst ja üldotstarbelised kasutajaliidese sildid – 400-punktine kirjakaal tagab, et pikad tekstid on loetavad ilma rasked tundumata.
- Gilroy — asendamine: Inter · kontuurid 500 · Teisese pealkirja ja esiletõstetud põhiteksti puhul on peamine tööriist kaartide pealkirjade ja tekstisiseste siltide jaoks 14/500 font.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | tihe |
| Põhisamm | 8-16px |
| Nupu raadius | 8px |
| Kaardi raadius | 24px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 48-64px |
| Lehe laius | 1200px |
Tehisintellekt loob teie veebisaidi Calendly stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- ElevenLabs — Soojades kreemikates toonides fotoessee peenete pealkirjadega. Bauhausi stiilis märkmik – munakoorekarva paber, must tint ja üks lilla ja oranž aktsent toote väljapanekuks.
- Awesomic — Toimetuse tsinkvõrk oranžide konfetti meenutavate kirjavahemärkidega
- Monad — toimetuse tehniline ajakiri soojal pärgamendil
- Dub — Linki matt riisipaberist juhtpaneel
- Seline Analytics — Vaikne analüütiline laud soojal paberil
- Notion — Soe paberist märkmik keskpäevapäikeses
- Anthropic — Teaduslik väliajakiri soojal pärgamendil – rahulikud elevandiluu pinnad, seriifidega pealkirjad ja üks saviaktsent, mis ilmub ainult siis, kui on vaja tegutseda.
- Augen Pro — Apple'i valge esitlus kasutab monokroomse ruumi ainsa aktsendina kliinilist, kaalutut ja elektrilist sinist.
- Antimetal — Kreemikas paberil toimetuse kroonika – vaikne hommik teadusajakirjas, kus vaoshoitus annab edasi enesekindlust ja serifid teevad raske töö ära.
- Perk — Elektriline laim soojal pärgamentpaberil
- Ditto — Päikesepaisteline töötuba, kus luuakse metslillede näidiseid. Soojad kreemikad pinnad, erk kollane põhivärv, sügavad tumesinised tindid, teose taga õitsevad orgaanilised värvivormid.
- Officevibe — Toimetuse ajakiri soojal kreemikal paberil. Kujutage ette läbimõeldud esseed personalijuhtimisest, mis on esitletud tootena – kursiivis serif-font sosistab läbi moodsa sinise liidese.