Ulanyjy tejribesiniň dizaýnynyň çukurlarynda ýigrimi ýyldan gowrak wagt geçirdim. Stol esasly düzülişlerden CSS-e geçiş, “iPhone” işe girizilende täsirli dizaýna we “üns ykdysadyýetiniň” ösmegine ýadymda. 20öne 2026-njy ýyla baranymyzda, pudak entek iň möhüm üýtgeşiklige duçar bolýar. “Islendik bahada dizaýn” döwrüni Durnukly UX döwrüne geçirýäris. Bu hakda düşünje hökmünde eşidýänçäm, dizaýnerleriň köpüsiniň, şol sanda özümiňem pikir edýän zady däl. Ençeme ýyl bäri internete efir, agramsyz bulut hökmünde garaýarys. Sanly önümleriň diňe kagyz ýüzünde çap edilmändigi sebäpli “ýaşyl” bolandygyny çakladyk. Menem şeýle pikir edýärdim, howanyň üýtgemegi düşünjesi ýüze çykmazdan ozal agaçlary tygşytlamak hakda. Biz ýalňyşýardyk. Bulut fiziki infrastruktura, köp sanly maglumat merkezleriniň ulgamy, suwasty kabeller we gije-gündiziň dowamynda sowadyjy ulgamlardyr. AI-e gönükdirilen maglumat merkezleri alýumin zawodlarynyň köp sarp edilişine gabat gelse-de, olaryň ýokary geografiki dykyzlygy has güýçli we lokallaşdyrylan daşky gurşaw dartgynlygyny döredýär. UX dizaýnerleri hökmünde biz bu energiýa sarp edilişiniň binagärleri. Her ýokary çözgütli gahryman şekili, her bir awtomatiki oýnaýan fon wideosy we tassyklaýan her çylşyrymly JavaScript animasiýamyz, güýç sarp etmek prosessoryna göni görkezme. Uzak dowam etjek geljegi gurmak islesek, “waý” dizaýnyny bes etmeli we netijelilik üçin dizaýn etmeli. Garaňky re .im 2000-nji ýyllaryň başynda ak fon kagyzdy, sebäbi kagyzyň tanyşlygyny meňzeýärdi. Şeýle-de bolsa, enjam ösdi we dizaýn pelsepämiz hökman bolmaly. LCD-den OLED (Organiki ýagtylyk çykaryjy diod) tehnologiýasyna geçmek reňkiň energiýa täsirini düýpgöter üýtgetdi.
Logika Elmydama ýanyp duran (hatda gara görkezilende-de) yşyk çyrasyny talap edýän adaty LCD ekranlardan tapawutlylykda, OLED ekranlary her pikseli aýratynlykda ýagtylandyrýar. Bir piksel hakyky gara reňkde (# 000000) düzülende, şol diod doly öçürilýär. Nol güýji çekýär. Has garaňky palitralary goldaýan interfeýsleri dizaýn etmek bilen, biz diňe bir tendensiýa eýermeýäris; ulanyjynyň enjamynyň energiýa zerurlygyny fiziki taýdan azaldýarys. Maglumatlar Energiýa tygşytlamak ähmiýetsiz. Bu pikir alyşmagyň altyn standartyna öwrülen Purdue uniwersiteti tarapyndan 2021-nji ýylda geçirilen möhüm ähmiýetli gözleg, 100% ýagtylykda ýagtylyk re modeiminden garaňky re modeime geçmek batareýanyň güýjüniň ortaça 39% -den 47% -e çenli tygşytlap biljekdigini ýüze çykardy. Global derejede, her esasy programma garaňky re modeimde ýerine ýetirilmedik bolsa, gözenegiň isleginiň azalmagy astronomiki bolardy. Taslama maksady 2026-njy ýylda “Dark Mode” sazlamalar menýusynda ýerleşdirilen ikinji derejeli “tema” bolmaly däldir. “Garaňky-birinji” mentaliteti bilen dizaýn etmeli. Bu, her bir sahypanyň “Matrisa” ýaly bolmalydygyny aňlatmaýar, ýöne bu ýokary kontrastly gara mowzuklary deslapky ulgam tarapyndan ileri tutulýan ýagdaý hökmünde ileri tutmagy aňladýar. Bu enjamyň apparat ömrüni uzaldýar we her bir täsiriň uglerod yzyny peseldýär. Özüm okamak üçin “Light-Mode” -ni has gowy görýärin, şonuň üçin hem ýeňil, hem garaňky re optionsim opsiýalarynyň elýeterli bolmagy manyly. Iki warianty üpjün etmek bilen elýeterlilik meselesi hem bar. Surat we wideo optimizasiýasy Biz ýalta dizaýner bolduk. Speedokary tizlikli 5G we süýüm optikasy bilen, faýl ululyklary barada alada etmegi bes etdik. Jübi sahypasynyň ortaça agramy soňky on ýylda 500% -den gowrak ýokarlandy, esasanam işlenmedik wizual aktiwler sebäpli. Logika Web sahypasynyň “Sanly ýag” (şol 4MB Unsplash suratlary we 15MB fon wideolary) sahypa ýüklemek energiýasyna iň köp goşant goşýan adamdyr. Serwerden müşderä geçirilen her megabaýt, geçirmek, serweri gaýtadan işlemek we ulanyjynyň hereketlendirijisi üçin elektrik talap edýär. Uly faýllary ulananymyzda, ululygyň bir böleginde edil şonuň ýaly täsirli bolup biljek suraty görkezmek üçin aslynda “ýakýarys”. Toeri gelende aýtsak, has çalt ýükleýän sahypa bilen has gowy ulanyjy tejribesini hödürleýärsiňiz.
Maglumatlar HTTP arhiwine görä, suratlar we wideo yzygiderli sahypanyň umumy agramynyň arslan paýyny düzýär. Şeýle-de bolsa, AVIF we WebP ýaly häzirki zaman formatlara geçmek, hil taýdan hiç hili ýitgi bolmazdan, JPEG bilen deňeşdirilende şekil agramyny 50% -e çenli azaldyp biler. Bu formatlar maňa JPG we PNG ýaly tanyş bolmasa-da, sahypanyň göwrümini azaltmak üçin hökman ulanmaga sabyrsyzlyk bilen garaşýaryn. TheTaslama maksady Recentlyakynda kiberhowpsuzlyk platformasy üçin täzeden dizaýn etdim. “Öň we soň” barlagyny geçirip, olaryň baş sahypasynyň 5.5MB maglumat ýükleýändigini bildik. Resokary derejeli suratlary SVG (Scalable Vector Graphics) sungaty bilen çalyşmak we şekil aktiwleriniň ýerine akylly CSS gradiýentlerini ulanmak bilen, ýükümizi 1,2 MB-a düşürdik. Bu energiýa ýüküniň 78% azalmagydyr! Dizaýner hökmünde ilkinji soragyňyz hemişe bolmaly: "Munuň üçin surat gerekmi ýa-da kod bilen şol bir duýgy rezonansyny gazanyp bilerinmi?"
Bilgeşleýin hereket: “Gaty sesli” animasiýalary kesmek “Scroll-jacking” we çylşyrymly 3D Parallax effektleri döwründe ýaşaýarys. Bular Awwwards.com saýtynda baýrak gazanyp bilseler-de, köplenç ekologiki betbagtçylyklardyr. Logika Animasiýa mugt däl. Çylşyrymly animasiýa görkezmek üçin enjamyň GPU (Grafiki gaýtadan işleýiş bölümi) ýokary kuwwatda işlemeli. Bu CPU temperaturasyny ýokarlandyrýar, sowadyjy janköýerleri herekete getirýär (noutbuklarda) we batareýany çalt zaýalaýar. Yzygiderli fonda işleýän ýa-da brauzeriň köpçülikleýin täzeden reňklenmegine sebäp bolýan “Gaty sesli” animasiýalar, awtoulagyňyzy ulag ýolunda boş goýmaga energiýa deňdir.
Maglumatlar Google-yň material dizaýn görkezmelerinde “Manyly hereket” nygtalýar. Animasiýanyň diňe ulanyjyny ugrukdyrmak ýa-da seslenme bermek üçin ulanylmalydygyny öňe sürýärler. JPEG ýerine WebP ulanmak sahypadaky maglumatlaryň 25-50% -ini tygşytlap biler. Taslama maksady Manyly hereketi kabul etmeli. Animasiýa ulanyja bir işi ýerine ýetirmäge ýa-da iýerarhiýa düşünmäge kömek etmese, biderek zat. Mümkin boldugyça GSAP ýa-da Lottie ýaly agyr JavaScript kitaphanalaryndan CSS geçişlerini goldamalydyrys, sebäbi brauzer hasaplamak üçin CSS apparat tizlenýär we has täsirli. UX dizaýneri hökmünde bu çemeleşmäni jedel edip bilemok. Bu diňe bir maglumat galyndylaryny azaltmaga kömek etmän, ulanyjylarymyz üçin UX-ny hem gowulaşdyrýar. Her taslama üçin “Maglumat býudjetini” düzmek UX 20+ ýyllygymda iň üstünlikli taslamalar, umuman, iň çäklendirilen taslamalar boldy. Taslamanyň maliýe býudjeti bolşy ýaly, uglerod we maglumat býudjeti hem bolmaly. Logika Maglumat býudjeti sahypanyň umumy ululygynda gaty ýapgydyr (meselem, “Bu giriş sahypasy 1 MB-dan ýokary bolup bilmez”). Bu dizaýn toparyny kyn, bilgeşleýin saýlamaga mejbur edýär. Täze yzarlaýyş skriptini ýa-da ajaýyp şrift agramyny goşmak isleseňiz, başga bir zady optimizirlemek ýa-da aýyrmak bilen “tölemeli”. Bu “aýratynlyk süýşmesiniň” “uglerod süýşmesine” öwrülmeginiň öňüni alýar. Maglumatlar “Wholegrain Digital” ýaly pionerler tarapyndan işlenip düzülen Durnukly web dizaýn modeli, sahypa görnüşine CO2-ni hasaplamagyň formulasyny hödürleýär. Ortaça web sahypasy, görüş üçin takmynan 0,5 gram CO2 öndürýär. Aýda 1 million gezek görülýän sahypa üçin ýylda 6 metrik tonna CO2, bu awtoulag 15,000 mil sürmäge deňdir. Taslama maksady Durnukly UX barlag sanawy
Suratlary azaltmak Her wizual zerurlyk soragyny beriň we maglumatlary geçirmegi azaltmak üçin iň kiçi ölçegli we iň täsirli faýl formatlaryny (AVIF ýaly) ulanyň. “VideoEliminate” awtomatiki oýnaýan mediany optimizirläň we energiýanyň diňe ulanyjynyň görmek isleýän mazmunyna sarp edilmegini üpjün etmek üçin ýokary gysylan, gysga aýlawlary ileri tutuň. Şriftleri çäklendiriň Iň köp iki web şrift agramyny ulanyň ýa-da gereksiz serwer isleglerini aýyrmak we çişirmek üçin klassiki ulgam şriftlerine ýapyşyň. Aktiwleri gaýtadan işlemek CSS süzgüçlerinden we sahypanyň umumy agramyny artdyrmazdan wizual dürlüligi döretmek üçin bir suraty ýa-da wideony birnäçe gezek maksat ediniň. “Green Hosting” -i saýlaň Sanly önümleriňizi “Green Web Foundation” tarapyndan täzelenýän energiýa çeşmeleri bilen üpjün edilýändigine göz ýetirmek üçin serwerlerde ýerleşdiriň. Maglumat aralygyny minimuma eltiň Serwer ýerlerini geografiki taýdan esasy diňleýjilere ýakynlaşdyryň, maglumatlaryň fiziki infrastruktura arkaly geçmegi üçin zerur bolan energiýany azaltmak.
Ekologiýa taýdan arassa dizaýn üçin iş Käbir adamlar “Green UX” hil taýdan ylalaşyk ýaly bolup biler diýip jedel edip bilerler. Munuň tersine, bäsdeşlik artykmaçlygydyr. Durnukly dizaýn öndürijilik dizaýnydyr. Sahypanyň agramyny azaltsaňyz, sahypaňyz has çalt ýüklenýär. Sahypaňyz has çalt ýüklenende, esasy web sahypalaryňyz gowulaşýar. Esasy web sahypalaryňyz gowulaşanda, SEO reýtingiňiz ýokarlanýar. Mundan başga-da, köne enjamlarda ýa-da has haýal maglumat meýilnamalarynda ulanyjylar (esasanam ösüp barýan bazarlarda) önümiňize girip bilerler. Bu “Öz içine alyjy dizaýn” kesgitlemesi. “Sanly ýagy” kesip, has ýuka, has çalt we has elýeterli web döredýäris. 2010-njy ýyllaryň “bir gezek ulanylýan dizaýnyndan” a tarap süýşýärishas hemişelik, hormatlanýan sanly arhitektura. Netije: “Arassa” dizaýnyň geljegi Iki onýyllyk dizaýnymda köp tendensiýanyň gelip-gidýändigini gördüm. Skeuomorfizm, tekiz dizaýn, neýmorfizm - bularyň hemmesi estetiki saýlawlardy. Emma durnukly UX tendensiýa däl; indi zerurlyk. Sanly işimiziň fiziki netijeleri bilen hasaplamaly dizaýnerleriň ilkinji nesli. Durnukly UX “win-win-win”. Planeta üçin has gowudyr, sebäbi energiýa sarp edilişini azaldýar. Ulanyjy üçin has gowudyr, sebäbi has çalt we has täsirli interfeýslere sebäp bolýar. Bu iş üçin has gowudyr, sebäbi hosting çykdajylaryny peseldýär we öwrüliş nyrhlaryny ýokarlandyrýar. “Çäklendirilmedik piksel” döwri gutardy. 2026-njy ýylda iň çylşyrymly dizaýn, iň kiçi aýak yzyny galdyrýan dizaýn. Biz indi diňe dizaýner däl; ulanyjynyň batareýasyny, maglumat meýilnamasyny we ahyrky netijede daşky gurşawy goraýarys. Herekete çagyryş Şu günki taslamaňyzyň diňe bir sahypasyny barlamaga çagyrýaryn. Täsirini görmek üçin Web Carbon Kalkulýator ýaly gural ulanyň. Soň bolsa, “görünmeýän galyndylary” gözläň. Bu surat SVG bolup bilermi? Şol wideo statiki gahryman bolup bilermi? Şol “gaty” animasiýa dymyp bilermi? Kiçijik başlaň. Iň owadan çözgüt köplenç iň az baýtly çözgütdir.
