Superlist
Naktinė darbo vieta su koralų žarijomis – tylus baklažanų formos programėlės paviršius, kur viena šilta oranžinė kibirkštis signalizuoja apie kiekvieną veiksmą
„Superlist“ naudoja produktyvumo kalbą vidurnakčio violetiniais tonais: tamsi baklažanų ir šilta koralų spalva yra vienintelė pagrindinė spalva, o didelės antraštės be serifų perteikia visą atmosferą. Sąsaja sukuria vėlyvo vakaro susikaupusio darbo pojūtį – tyli, daugiasluoksnė ir užtikrinta, o spalvos naudojamos tik kaip funkciniai skyrybos ženklai raginimams veikti, aktyvioms būsenoms ir pagrindiniams punktams. Paviršiai sluoksniuoti subtiliais tamsiais tonais su violetiniu atspalviu (#181824 → #26253b), vengiant grynos juodos spalvos, kad gylis būtų šiltas, o ne sterilus. Komponentai pasižymi dosniomis apvaliomis formomis (20 pikselių kortelės, tablečių mygtukai), švelniais šešėliais ir „kvėpuoja“ per patogius 10–16 pikselių tarpus, o ne griežtus tinklelius. Antraštės balsas yra viskas: 600 taškų svoris, esant 70–88 pikseliams, su griežtu -0,02em tarpu tarp raidžių, tekstą traktuoja kaip tipografinį, o ne kaip vartotojo sąsają – jis artimesnis redakciniam tekstui nei SaaS.
Tamsios sekcijos apima visą puslapio plotį, o turinio konteineriai yra centre. Pagrindinė sekcija yra vertikaliai centruota ir joje yra antraštė, potekstė ir raginimas veikti (CTA), po kurios seka didelė produkto ekrano kopija, persidengianti su kita sekcija. Vėlesnėse sekcijose kaitaliojasi centruoti teksto blokai ir kortelių tinkleliai. Atsiliepimų sekcijoje naudojamas trijų stulpelių tinklelis su atsiliepimų kortelėmis ir 16 tarpinių langelių. Navigacija yra viena viršutinė juosta su logotipu kairėje, centruotomis nuorodomis ir prisijungimo veiksmais dešinėje – nėra fiksuotos šoninės juostos ar mega meniu. Tarpinės langeliai tarp sekcijų yra dideli (16 tarpinių langelių), todėl sukuriamas erdvus redakcinis ritmas, o ne tankus produktų tinklelis.
Vizualinėje erdvėje dominuoja produkto ekrano kopijos – didelis rėmelis suapvalintais kampais, rodantis pačią programėlės sąsają, užpildo pagrindinę ir antrinę dalis. Nuotraukų yra minimalistinės, naudojamos tik kaip naudotojų avatarai arba programėlės medijos peržiūros (pavyzdžiui, koncerto paveikslėlis produkto maketo dešinėje pusėje). Logotipai patikimumo juostoje yra plokšti, prislopinti balti teksto simboliai. Nėra jokių dekoratyvinių iliustracijų, abstrakčios grafikos, 3D vizualizacijų. Vizualinė strategija – parodyti produktą dideliu masteliu, leisti tipografijai atlikti emocinį darbą ir naudoti koralų spalvą kaip vienintelę akcento spalvą.
Paletė
Prekės ženklas
- Coral Ember
#ff4a36— Oranžinė spalva naudojama kaip antrinis akcentas dekoratyvinėms detalėms ir retų užuominų paryškinimui. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti.
Neutralus
- Aubergine Canvas
#181824— Puslapio fonas, pagrindinė drobė, yra šilto, tamsaus atspalvio, kuris pakeičia gryną juodą spalvą, todėl vartotojo sąsaja atrodo sluoksniuota, o ne plokščia. - Elevated Plum
#26253b— Kortelių paviršiai, įvesties laukai, naršymo konteineriai – vienu žingsniu lengviau nei naudojant drobę sukurti gylį be matomos ribos. - Pure White
#ffffff— Pagrindinės antraštės, mygtukų tekstas ir piktogramų kontūrai – maksimalus kontrastas tamsiame fone. - Fog Text
#696f81— Pagrindinis tekstas, antrinės antraštės ir prislopintos rėmeliai pasižymi 7:1 kontrasto santykiu, kad būtų patogu skaityti baklažano spalvos fone. - Ash Text
#8e8da0— Antriniams vartotojo sąsajos elementams, skirtukams ir prislopintoms etiketėms palaikoma neutrali spalva. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti. - Mist Highlight
#a3a3a7— Subtilūs rėmeliai, skirtukai ir neaktyvūs naršymo elementai sukuria subtilų neutralų toną, kuris vis tiek išsiskiria drobės fone.
Tipografija
nuo 12 iki 88 pikselių · 9 žingsniai
- sans-serif — pakeitimas: Inter · kontūrai 400 · be serifų – randamas išgautuose duomenyse, bet dirbtinis intelektas jo neaprašo.
- Haffer XH SemiBold — pakeitimas: Inter Tight · kontūrai 400, 600 · Pagrindinis šriftas, skirtas rodyti informaciją ir antraštes. Jis naudojamas 70–88 pikselių dydžio pagrindinėms antraštėms, kurių tarpai tarp raidžių yra -0,02 em, o storis – 600. Siauri tarpai tarp raidžių ir didelis raidžių aukštis suteikia antraštėms redakcinį svorį, todėl tamsi sąsaja labiau primena žurnalo viršelį nei ataskaitų suvestinę. Pakeiskite paryškintu „Inter Tight“ arba „General Sans“.
- Jersey 10 — pakeitimas: Anybody · kontūrai 400 · Didelis, dekoratyvinis šriftas, skirtas akcento skaičiams ir paryškinimams. Naudojamas saikingai, kai dydis labai didelis, tipografiniams akcentams sukurti. Galima pakeisti „Anyone“ arba „Cabinet Grotesk“.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 10-16px |
| Mygtuko spindulys | 100px |
| Kortelės spindulys | 20px |
| Šešėliai | švelnūs šešėliai |
| Tarp sekcijų | 80px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Superlist 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
- DNA — Vidurnakčio observatorija, matoma pro dalelių lęšį
- Abetterlou — „Sparks on Saddle Leather“ – šiltas kreminis šriftas, žėrintis tamsiai kavos juodumo fone, su gintaro ir aukso spalvos mygtukais, kurie atrodo lyg į puslapį įspaustas karštas metalas.
- Galileo-ft — Giliojo kosmoso komandinis denis su elektrinės mėlynos spalvos signalais
- Decide AI — Observatorija vidurnaktį – mėtinis signalas
- Redis Agency — Redakcijos dirbtuvės, dirbančios po darbo valandų, yra aklinai juoda vieta, kur visas prekės ženklo kūrimo darbas atliekamas serifiniais šriftais ir vienu raudonu ridiku.
- Spellbook — Vidurnakčio teismo salė, apšviesta koraliniais dažais – tamsus redakcinis paviršius, kur vienintelis garsas – šiltas oranžinis rašiklio brūkštelėjimas
- Linear — vidurnakčio tikslumo instrumentas
- Origin Financial — Vidurnakčio ramios prabangos galerija. Tyli, beveik tamsi patalpa, kurioje dideli serifiniai šriftai ir kelios apšviestos spalvotos plokštės sukuria įspūdį, kad finansai yra kruopščiai kuruotas meno kūrinys.
- Hyperstudio — Dizainas įbrėžtas į obsidianą. Tekstas ir plonos linijos įrėmina baltą grynos juodos spalvos erdvę, kurioje retkarčiais pasitaiko auksinių kompaso žymių, rodančių kelią.
- Air — skulptūra „Vidurnakčio dangus per stiklą“
- Raycast — Vidurnakčio komandų centras, Koralų Neonas
- dope.security — Vidurnakčio terminalas su violetiniais švyturėliais