Letters
Rytinis susitikimas po atviru dangumi esančioje klinikoje – sterilus baltas stalas po švelniomis mėlynomis lubomis, nukrautas chirurginiais mėlynais instrumentais
„Letters“ yra medicininių laiškų rašymo įrankis, prasidedantis gradientine atviro dangaus antrašte – švelnia, atmosferine mėlyna juostele, sukuriančia ramią, klinikinę atmosferą, – prieš pereinant prie švarios baltos darbo srities. Sistema sukurta monochrominiu stiliumi: švari balta drobė, beveik juodas tekstas (#070709), tamsūs tablečių formos raginimai veikti ir apvalios kortelės, plūduriuojančios ant subtiliausių šešėlių. Viena ryškiai mėlyna spalva (#2597d0) skirta funkciniams skyrybos ženklams – piktogramoms, mikrografikai, bangų formų grotuvams – niekada nenaudojama mygtukams ar dideliems užpildams. Tipografijoje naudojamas „Open Runde“ – geometrinis humanistinis „sans-serif“ su agresyviais neigiamais raidžių tarpais didesniuose ekranuose (-0,04em ties 80 pikselių), kuris suspaudžia antraštes į užtikrintus blokus. Komponentai atrodo lengvi, tarsi medicininis instrumentas: ploni rėmeliai, dideli tarpai tarp kortelių, tablečių formos mygtukai ir diskretiškas aukščio panaudojimas, leidžiantis dangaus formos antraštei atlikti emocinį darbą.
Dangaus mėlynumo gradiento pagrindinis puslapis apima visą puslapio plotį, su centre esančiu pavadinimu ir potekste bei raginimo veikti mygtuku apačioje. Jis sklandžiai pereina į baltą turinio sritį su dideliais tarpais tarp skyrių (80–120 pikselių). Funkcijų skyriuose naudojamas dviejų stulpelių tinklelis, sudarytas iš didelių, apvalių kortelių (18–32 pikselių spinduliu), kurių proporcijos yra vienodos. Skyrių antraštės visada yra centre, viename stulpelyje, virš kortelių tinklelio. Navigacija yra fiksuota balta viršutinė juosta su centre esančiu nuorodų ir dešinėje lygiuotų prisijungimo veiksmų grupe. Bendras ritmas yra viena atmosferiška pagrindinė juosta, po kurios kaitaliojasi baltos ir #f5f5f5 sekcijos su nuoseklia vertikalia „kvėpavimo“ erdve. Nėra šoninės juostos, nėra mega meniu, nėra asimetrinių išdėstymų – puslapis atrodo kaip ramus, simetriškas stulpelis.
Vizualinis dizainas beveik visas sutelktas į produkto vartotojo sąsają – jokių gyvenimo būdo nuotraukų, jokių abstrakčių 3D vaizdų. Vizualinė kalba sukurta remiantis produktų kortelėmis, kuriose demonstruojama programėlės gimtoji sąsaja: dokumentų „prieš“ ir „po“ palyginimas, įkėlimo sritis su punktyriniu kraštu ir garso grotuvas bangos formos pavidalu. Vienintelis atmosferinis vizualinis elementas yra dangaus gradientas pagrindiniame paveikslėlyje. Piktogramos yra plokščios, vienspalvės #2597d0 linijų piktogramos (vokas, mikrofonas, varnelė) su vienodais linijų storiais, be užpildymo variantų. Iliustracijos stilius santūrus: produktų maketai rodomi baltame fone, šiek tiek pasukti, kad būtų sukurtas gylis, niekada staigiai nepakreipti. Ranka rašytas šriftas („The Doctor“) yra vienintelis organinis / rankų darbo elementas, naudojamas tik tam, kad būtų atkurtas klinikinis rašysenos vaizdavimas kortelėje „prieš“.
Paletė
Prekės ženklas
- Surgical Blue
#2597d0— Piktogramos, mikrofono piktograma, garso bangų grotuvas ir maži funkciniai akcentai sukuria vieną chromatinę natą visoje sąsajoje.
Neutralus
- Obsidian
#070709— Pagrindinė teksto dalis, užpildyti raginimo veikti mygtukai ir tamsūs vartotojo sąsajos elementai – vietoj gryno #000 pasirinkta beveik juoda spalva, siekiant sušvelninti kontrastą su baltu fonu. - Paper White
#ffffff— Puslapio fonas, kortelės paviršiai ir mygtuko tekstas yra pagrindinė drobė visoms sekcijoms po pagrindiniu elementu. - Cloud Gray
#f5f5f5— Papildomi kortelių paviršiai ir sekcijų fonai atskiria funkcinius blokus nuo pagrindinės drobės. - Sky Tint
#d7e6f5— Kartoninio rėmo atspalvis ir vos pastebimas mėlynas paviršiaus tonas sukuria atmosferos, o ne pilkumo pojūtį. - Charcoal
#60606c— Pirminis tekstas, antrinis tekstas ir prislopintos rėmeliai – dominuojanti neutrali spalva turiniui, nesusijusiam su antrašte. - Slate
#8b8b8b— Mažas tekstas ir neaktyvios kraštinės – naudojami vietoms nurodyti ir neįgaliesiems užtikrinti prieinamumą.
Tipografija
nuo 12 iki 80 pikselių · 8 žingsniai
- sans-serif — pakeitimas: Inter · kontūrai 400, 700 · be serifų – randamas išgautuose duomenyse, bet dirbtinis intelektas jo neaprašo.
- Open Runde — pakeitimas: Inter Tight · kontūrai 400, 500, 600, 700, 900 · Pagrindinis antraščių ir naršymo šriftas yra geometrinis humanistas su tankiais tarpais tarp didelių dydžių teksto; -0,04em esant 80 pikselių dydžiui, antraštė suspaudžiama į vieną patikimą bloką. Naudokite visoms antraštėms, naršymui ir dideliam tekstui.
- Inter — pakeitimas: system-ui · kontūrai 400, 500 · Antrinis tekstas ir vartotojo sąsajos tekstas – naudojamas mažoms antraštėms, naršymo elementams ir vidinėms nuorodoms, kur pageidaujamas neutralesnis skaitymo ritmas. Dera su „Open Runde“, kad būtų sukurtas hierarchinis kontrastas.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | tankus |
| Pagrindinis žingsnis | 12-16px |
| Mygtuko spindulys | 100px |
| Kortelės spindulys | 18px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 80-120px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Letters 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
- Integrated Biosciences — Bioliuminescencijos laboratorija vidurnaktį
- Mintlify — Debesų sodas virš stiklinio stalo. Ranka pieštas dangus ir dokumentinis filmas įrėminti kartu – vienintelė vieta, kur spalva ir koncepcija susiduria prieš puslapiui išblėstant į vienuolišką baltumą.
- Gleap — Šiltais kreminiais atspalviais su grafito akcentais dekoruota darbo erdvė – studija, kurioje virš lininės architektūros tarsi kybo matiniai juodi rašalo taškeliai.
- Render — Dizainas sukurtas ant šlifuoto aliuminio. Sąsaja atrodo kaip švarus, geometrinis inžinerijos dokumentas – balta erdvė, plonos linijos ir viena violetinė linija, atkreipianti dėmesį į veiksmą.
- Grafbase — inžinerinis piešinys ant šalto marmuro
- Slash — Vidurnakčio skliautas su paauksuotomis sąskaitų knygomis
- Modal — Fosforescencinis terminalas tamsioje serverių patalpoje – vienintelis šviesos šaltinis yra ryškiai žalia spalva
- Whimsical — Sodrus slyvų rašalas levandų fone – kūrybinės studijos užrašų knygelė, kuri taip pat gali būti naudojama kaip techninė lenta.
- AgentQL — Šiaurės pašvaistė virš terminalo naktį
- Alveos One — Jauki prieglauda iš upės akmenų – tylus, kreminės šviesos apšviestas meditacijos kambarys, kuriame vienas grafito objektas ilsisi švelnioje gintaro spalvos šviesoje.
- GitHub — Kosmoso valdymo pultas su bioliuminescenciniais valdymo taškais – tamsi, atmosferinė darbo vieta, kurioje vienas žalias švytėjimas rodo kelią į priekį.
- Buddy — Inžinerinis brėžinys ant milimetrinio popieriaus. Baltas piešinio paviršius pažymėtas vos matomu tinkleliu, užteptu beveik juodu rašalu, su fluorescenciniais gelsvai žaliais ženklais ir vaivorykštiniais gradientiniais potėpiais.