زیاتر لە دوو دەیەم لە خەندەقەکانی دیزاینی ئەزموونی بەکارهێنەردا بەسەر بردووە. من لەبیرمە گواستنەوە لە نەخشە لەسەر بنەمای خشتەکانەوە بۆ CSS، وەرچەرخان بۆ دیزاینی وەڵامدەرەوە کاتێک ئایفۆن خرایە بازاڕەوە، و سەرهەڵدانی "ئابووری سەرنجدان". بەڵام لەگەڵ گەشتکردنمان بۆ ساڵی ٢٠٢٦، پیشەسازییەکە ڕووبەڕووی بەرچاوترین گۆڕانکارییە تا ئێستا. ئێمە سەردەمی "دیزاین بە هەر نرخێک بێت" تێدەپەڕین بۆ سەردەمی Sustainable UX. ئەوە شتێک نییە کە زۆربەی دیزاینەران بیری لێبکەنەوە، بە خۆمەوە، تاوەکو من بە بیستنی ئەم بابەتە وەک چەمکێک پاڵم پێواوە. ساڵانێکە ئێمە وەک هەورێکی ئەسیری و بێ کێش مامەڵەمان لەگەڵ ئینتەرنێتدا کردووە. ئێمە گریمانەمان کردووە کە بەرهەمە دیجیتاڵییەکان تەنیا لەبەر ئەوەی لەسەر کاغەز چاپ نەکراون، "سەوز" بوون. منیش پێشتر وا بیرم دەکردەوە و پێش ئەوەی چەمکی گۆڕانی کەشوهەوا سەرهەڵبدات، زیاتر لەسەر ڕزگارکردنی دارەکان بوو. ئێمە هەڵە بووین. هەور ژێرخانی فیزیکییە، تۆڕێکی فراوانە لە ناوەندەکانی داتا و کێبڵەکانی ژێر دەریا و سیستەمی ساردکەرەوە کە ٢٤/٧ دەنگ دەدەن. لە کاتێکدا کە ناوەندەکانی داتا کە سەرنجیان لەسەر AI یە، لەگەڵ بەکارهێنانی کارەبای توێنەرە ئەلەمنیۆمییە گەورەکاندا دەگونجێت، چڕی جوگرافیای بەرزیان فشارێکی ژینگەیی چڕتر و ناوچەیی دروست دەکات. وەک دیزاینەری UX ئێمە تەلارسازەکانی ئەم بەکارهێنانی وزەین. هەر وێنەیەکی پاڵەوانی وردبینی بەرز، هەموو ڤیدیۆیەکی پاشبنەما بە شێوەیەکی ئۆتۆماتیکی و هەر ئەنیمەیشنێکی ئاڵۆزی جاڤاسکڕێپت کە ئێمە پەسەندی دەکەین ڕێنمایییەکی ڕاستەوخۆیە بۆ پرۆسێسەرێک بۆ بەکارهێنانی هێز. ئەگەر بمانەوێت داهاتوویەک دروست بکەین کە بەردەوام بێت، دەبێت واز لە دیزاینکردن بۆ "واو" بهێنین و دەست بکەین بە دیزاینکردن بۆ کارایی. دۆخی تاریک لە سەرەتای ساڵانی ٢٠٠٠دا، پاشبنەمای سپی ستاندارد بوو، چونکە تەقلیدی ئاشنابوونی کاغەزیان دەکرد. بەڵام ڕەقەکاڵا پەرەی سەندووە و فەلسەفەی دیزاینەکەمان دەبێت بەدوایدا بێت. گۆڕینی تەکنەلۆژیای LCD بۆ OLED (Organic Light Emitting Diode) لە بنەڕەتدا گۆڕانکاری لە چۆنیەتی کاریگەری ڕەنگەکان لەسەر وزە کردووە.
لۆژیک بە پێچەوانەی شاشەکانی LCD تەقلیدی کە پێویستیان بە ڕووناکی پشتەوە هەیە کە هەمیشە داگیرساوە (تەنانەت لە کاتی پیشاندانی ڕەشدا)، شاشەکانی OLED هەر پێکسڵێک بە تاک ڕووناک دەکەنەوە. کاتێک پێکسڵێک لەسەر ڕەشی ڕاستەقینە (#000000) دانراوە، ئەو دایۆدە تایبەتە بە تەواوی دەکوژێتەوە. هێزی سفر دەکێشێت. بە دیزاینکردنی ڕووکارەکان کە لایەنگری پاڵێتە تاریکەکانن، ئێمە تەنها ڕەوتێک پەیڕەو ناکەین؛ ئێمە لە ڕووی فیزیکییەوە وزەی پێویستی ئامێری بەکارهێنەر کەم دەکەینەوە. داتاکان پاشەکەوتکردنی وزە زۆر دوورە لە کەمکردنەوە. توێژینەوەیەکی گرینگ لەلایەن زانکۆی پوردۆ لە ساڵی ٢٠٢١ کە بووەتە ستانداردی زێڕین بۆ ئەم باسە، ئاشکرایکردووە کە لە 100% ڕووناکیدا، گۆڕینی لە دۆخی ڕووناکیەوە بۆ دۆخی تاریک دەتوانێت بە تێکڕا 39% بۆ 47% هێزی پاتری پاشەکەوت بکات. لەسەر ئاستی جیهانی، ئەگەر هەموو ئەپێکی سەرەکی بە پێشوەختە دۆخی تاریکی بکردایە، کەمبوونەوەی داواکاری تۆڕەکان فەلەکی دەبێت. ئامانجی دیزاین لە ساڵی ٢٠٢٦دا، Dark Mode نابێت چیتر "تەوەرە"یەکی لاوەکی بێت کە لە مینیوی ڕێکخستنەکاندا شاردرابێتەوە. پێویستە بە عەقڵیەتی “تاریک-یەکەم” دیزاین بکەین. ئەمە بەو مانایە نییە کە هەموو سایتێک دەبێت لە The Matrix بچێت، بەڵام بە مانای یەکەمایەتیدان بە تەوەرە تاریکەکانی کۆنتراستی بەرز وەک دۆخی پێشوەختەی پەسەندکراوی سیستەم. ئەمەش تەمەنی ڕەقەکاڵای ئامێرەکە درێژ دەکاتەوە و شوێنپێی کاربۆنی هەموو کارلێکێک کەم دەکاتەوە. من بە شەخسییەت Light-Modeم پێ باشترە بۆ خوێندنەوە، بۆیە شتێکی مەنتیقیە کە هەردوو بژاردەی دۆخی ڕووناکی و تاریک لەبەردەستدا بێت. هەروەها لەگەڵ دابینکردنی هەردوو بژاردەکەدا ڕەچاوکردنی دەستڕاگەیشتن هەیە. باشکردنی وێنە و ڤیدیۆ ئێمە بووینەتە دیزاینەری تەمبەڵی. بە خێرایی بەرزی 5G و فایبەر ئۆپتیک، ئێمە خەمی قەبارەی فایلەکانمان وەستاند. تێکڕای کێشی لاپەڕەکانی مۆبایل لە ماوەی دەیەی ڕابردوودا بە ڕێژەی زیاتر لە 500% زیادی کردووە، ئەمەش بە شێوەیەکی بەرچاو بەهۆی سەروەت و سامانی بینراوی باش نەکراوە. لۆژیک “چەوری دیجیتاڵی” ماڵپەڕێک (ئەو وێنانەی 4MB Unsplash و ڤیدیۆکانی پاشبنەما 15MB) تاکە گەورەترین بەشدارە لە وزەی بارکردنی لاپەڕەکان. هەر مێگابایتێک کە لە سێرڤەرێکەوە دەگوازرێتەوە بۆ کرێدەر پێویستی بە کارەبا هەیە بۆ گواستنەوە و پرۆسێسی سێرڤەر و بزوێنەری ڕێندەرکردنی بەکارهێنەر. کاتێک ئێمە فایلە گەورەکان بەکاردەهێنین، ئێمە لە بنەڕەتدا وزە "دەسوتێنین" بۆ ئەوەی وێنەیەک پیشان بدەین کە دەکرا بە هەمان شێوە کاریگەر بێت لە بەشێکی کەمی قەبارەکەدا. ئیتر باسی ئەوە ناکەم کە تۆ ئەزموونێکی باشتری بەکارهێنەریش دابین دەکەیت لەگەڵ لاپەڕەیەک کە زۆر خێراتر باردەکرێت.
داتاکان بەپێی HTTP Archive، وێنە و ڤیدیۆ بەردەوام پشکی شێر لە کۆی کێشی لاپەڕەیەکدا پێکدەهێنن. بەڵام گۆڕینی فۆرماتە مۆدێرنەکانی وەک AVIF و WebP دەتوانێت کێشی وێنە تا 50% کەم بکاتەوە بە بەراورد بە JPEG، بەبێ ئەوەی هیچ زیانێکی هەستپێکراوی کوالیتی هەبێت. هەرچەندە ئەم فۆرماتانە بەقەد JPG و PNG بۆ من ئاشنا نین، بەڵام بە دڵنیاییەوە چاوەڕێی بەکارهێنانیانم بۆ کەمکردنەوەی قەبارەی لاپەڕەکان. ەکەئامانجی دیزاین بەم دواییە سەرکردایەتی دیزاینکردنەوەم کرد بۆ پلاتفۆرمی ئاسایشی ئەلیکترۆنی. بە جێبەجێکردنی وردبینی "پێش و دوای"، بۆمان دەرکەوت کە ماڵپەڕەکەیان 5.5MB داتا باردەکات. بە گۆڕینی فۆتۆگرافی بە ڕوونی بەرز بە هونەری SVG (Scalable Vector Graphics) و بەکارهێنانی گرادێنتەکانی CSS زیرەک لە جیاتی سەروەت و سامانی وێنە، ئێمە بارەکەمان دابەزاند بۆ 1.2MB. واتە کەمبوونەوەی ٧٨٪ باری وزە! وەک دیزاینەرێک هەمیشە یەکەم پرسیارت دەبێت ئەمە بێت: “ئایا پێویستم بە وێنەیەک هەیە بۆ ئەمە، یان دەتوانم هەمان دەنگدانەوە سۆزداری بە کۆد بەدەست بهێنم؟”
جووڵەی بە مەبەست: بڕینی ئەنیمەیشنی "بە دەنگی بەرز". ئێمە لە سەردەمێکی "سکڕۆڵ-جاک" و کاریگەرییە ئاڵۆزەکانی 3D Parallax دەژین. لە کاتێکدا ئەمانە ڕەنگە خەڵات لە ماڵپەڕی Awwwards.com بەدەست بهێنن، بەڵام زۆرجار کارەساتی ئیکۆلۆژین. لۆژیک ئەنیمەیشن بەخۆڕایی نییە. بۆ ڕەندەری ئەنیمەیشنێکی ئاڵۆز، GPU (Graphics Processing Unit) ی ئامێرەکە دەبێت بە توانای بەرز کار بکات. ئەمەش پلەی گەرمی سی پی یو زیاد دەکات و پانکەی ساردکەرەوە (لە لاپتۆپەکاندا) دەستپێدەکات و پاتری بە خێرایی تەواو دەکات. ئەنیمەیشنەکانی "بە دەنگی بەرز" کە بەردەوام لە پاشبنەمادا کاردەکەن یان دووبارە بۆیاخکردنی گەورەی وێبگەڕەکە دەستپێدەکەن، هاوتای وزەن بۆ جێهێشتنی ئۆتۆمبێلەکەت بە بێکار لە ڕێگای هاتووچۆدا.
داتاکان ڕێنماییەکانی Google’s Material Design جەخت لەسەر “جووڵەی مانادار” دەکەنەوە. ئەوان دەڵێن ئەنیمەیشن تەنها بۆ ئاراستەکردنی بەکارهێنەر یان پێدانی فیدباک بەکاربهێنرێت. وە بەکارهێنانی WebP لەبری JPEG دەتوانێت 25-50%ی داتا لە لاپەڕەیەکدا پاشەکەوت بکات. ئامانجی دیزاین پێویستە جووڵەی مانادار وەربگرین. ئەگەر ئەنیمەیشنێک یارمەتی بەکارهێنەرێک نەدات ئەرکێک تەواو بکات یان لە پلەبەندییەک تێبگات، ئەوە بەفیڕۆدانە. پێویستە ئێمە لایەنگری گواستنەوەی CSS بین لە کتێبخانە قورسەکانی جاڤاسکڕێپت وەک GSAP یان Lottie لە شوێنێک کە بتوانرێت، چونکە CSS بە ڕەقەکاڵا خێراترە و زۆر کاراترە بۆ ئەوەی وێبگەڕەکە حیساب بکات. وەک دیزاینەرێکی UX، ناتوانم موناقەشە لەسەر ئەم ڕێبازە بکەم. ئەمەش نەک تەنها یارمەتی کەمکردنەوەی بەفیڕۆدانی داتا دەدات بەڵکو UX بۆ بەکارهێنەرانمان باشتر دەکات. دانانی “بودجەی داتا” بۆ هەموو پڕۆژەیەک لە ماوەی ٢٠+ ساڵی کارکردنم لە UX، سەرکەوتووترین پڕۆژەکان بە گشتی ئەوانە بوون کە توندترین سنووردارکردنیان هەبووە. هەروەک چۆن پڕۆژەیەک بودجەی دارایی هەیە، پێویستە بودجەی کاربۆن و داتاشی هەبێت. لۆژیک بودجەی داتا کاپێکی ڕەقە لەسەر کۆی قەبارەی لاپەڕەیەک (بۆ نموونە، "ئەم لاپەڕەی نیشتنەوە ناتوانێت لە 1MB زیاتر بێت"). ئەمەش تیمی دیزاین ناچار دەکات هەڵبژاردنی قورس و بە مەبەست ئەنجام بدات. ئەگەر بتەوێت سکریپتێکی نوێی شوێنپێهەڵگرتن یان کێشی فۆنتێکی فەنتازی زیاد بکەیت، دەبێت "پارە بدەیت" بۆی بە باشکردن یان لابردنی شتێکی تر. ئەمەش ڕێگری دەکات لە گۆڕینی “فیچەر کرێپ” بۆ “کاربۆن کرێپ”. داتاکان مۆدێلی دیزاینی وێبی بەردەوام کە لەلایەن پێشەنگەکانی وەک Wholegrain Digital پەرەی پێدراوە، فۆرمولێک بۆ حیسابی CO2 بۆ هەر بینینێکی لاپەڕە دابین دەکات. تێکڕای ماڵپەڕەکە لە هەر بینینێکدا نزیکەی ٠.٥ گرام CO2 بەرهەم دەهێنێت. بۆ سایتێک کە مانگانە 1 ملیۆن بینینی هەیە، ئەوە 6 تۆن CO2 لە ساڵێکدا، کە یەکسانە بە لێخوڕینی ئۆتۆمبێل بە 15,000 میل. ئامانجی دیزاین لیستی پشکنینی UX ی بەردەوام
وێنەکان کەم بکەرەوە پرسیار لە پێویستی هەموو بینراوێک بکە و بچووکترین ڕوونی و کارامەترین فۆرماتەکانی فایل بەکاربهێنە (وەک AVIF) بۆ کەمکردنەوەی گواستنەوەی زانیاری. باشترکردنی ڤیدیۆکەمیدیای یاریکردنی ئۆتۆماتیکی نەهێڵە و ئەولەویەت بدە بە لوپی کورت و پاڵەپەستۆکراو بۆ دڵنیابوون لەوەی وزە تەنها بۆ ناوەڕۆک خەرج دەکرێت کە بەکارهێنەر بەنیازە بیبینێت. سنووردارکردنی فۆنتەکان زۆرترین دوو کێشی فۆنتەکانی وێب بەکاربهێنە یان پابەندبە بە فۆنتەکانی سیستەمی کلاسیکەوە بۆ لابردنی داواکاری سێرڤەری ناپێویست و rendering bloat. سەروەت و سامانی دووبارە بەکارهێنانەوەی یەک وێنە یان ڤیدیۆ چەندین جار بە بەکارهێنانی فلتەر و سەرپۆشەکانی CSS بۆ دروستکردنی جۆراوجۆری بینراو بەبێ زیادکردنی کۆی کێشی لاپەڕەکە. Green Hosting هەڵبژێرە بەرهەمە دیجیتاڵییەکانت لەسەر ئەو سێرڤەرانەی کە لەلایەن دامەزراوەی گرین وێبەوە پشتڕاستکراونەتەوە هۆست بکە بۆ ئەوەی دڵنیا بیت کە بە سەرچاوەی وزەی نوێبووەوە کاردەکەن. کەمکردنەوەی مەودای داتا شوێنی سێرڤەرەکان هەڵبژێرە کە لە ڕووی جوگرافییەوە نزیکن لە ئامادەبووانی سەرەکیت بۆ کەمکردنەوەی وزەی پێویست بۆ گەشتکردنی داتاکان بە ژێرخانی فیزیکیدا.
کەیسی بازرگانی بۆ دیزاینێکی دۆستی ژینگە ڕەنگە هەندێک بڵێن کە “Green UX” وەک سازشێک لەسەر کوالیتی دەنگ دەدات. بە پێچەوانەوە، سوودێکی کێبڕکێیە. دیزاینی بەردەوام بریتییە لە دیزاینی کارایی. کاتێک کێشی لاپەڕەکە کەم دەکەیتەوە، سایتەکەت خێراتر باردەبێت. کاتێک ماڵپەڕەکەت خێراتر باردەکرێت، Core Web Vitals ـت باشتر دەبێت. کاتێک Core Web Vitals ـت باشتر دەبێت، ڕیزبەندی SEO ـت بەرز دەبێتەوە. جگە لەوەش، بەکارهێنەرانی ئامێرە کۆنەکان یان پلانی داتا خاوتر (بەتایبەت لە بازاڕە تازەپێگەیشتوەکاندا) دەتوانن لە ڕاستیدا دەستیان بە بەرهەمەکەت بگات. ئەمە پێناسەی “دیزاینی گشتگیر”ە. بە بڕینی "چەوری دیجیتاڵی"، ئێمە وێبێکی لاوازتر و خێراتر و دەستڕاگەیشتنتر دروست دەکەین. ئێمە لە "دیزاینی یەکجار بەکارهێنراو"ی ساڵانی ٢٠١٠ دووردەکەوینەوە بەرەو ئاتەلارسازی دیجیتاڵی هەمیشەییتر و ڕێزدارتر. دەرەنجام: داهاتووی دیزاینی “پاک”. لە دوو دەیەی دیزاینەکەمدا، زۆر ڕەوتم بینیوە کە دێن و دەڕۆن. سکیۆمۆرفیزم، دیزاینی تەخت، نیومۆرفیزم — هەموویان هەڵبژاردەی جوانکاری بوون. بەڵام UX ی بەردەوام ڕەوتێک نییە؛ ئێستا پێویستییەکە. ئێمە نەوەی یەکەمی دیزاینەرانین کە دەبێت حساب بۆ دەرئەنجامە فیزیکییەکانی کارە دیجیتاڵییەکانمان بکەین. UX ی بەردەوام "بردنەوە-بردنەوە-بردنەوە"یە. باشترە بۆ هەسارەکە چونکە بەکارهێنانی وزە کەمدەکاتەوە. باشترە بۆ بەکارهێنەر چونکە ئەنجامەکەی ڕووکارە خێراتر و وەڵامدەرەوەکانە. وە باشترە بۆ بزنسەکە چونکە تێچووی هۆستکردن کەمدەکاتەوە AND ڕێژەی گۆڕانکاری باشتر دەکات. سەردەمی “پێکسڵی بێ سنوور” کۆتایی هات. لە ساڵی ٢٠٢٦دا ئاڵۆزترین دیزاین ئەو دیزاینەیە کە بچووکترین شوێنپێ بەجێدەهێڵێت. ئێمە چیتر تەنها دیزاینەر نین؛ ئێمە پارێزەری پاتری بەکارهێنەرین، پلانی داتاکانیان و لە کۆتاییدا، ژینگە. بانگەواز بۆ کردەوە تەحەداتان دەکەم ئەمڕۆ تەنها یەک لاپەڕەی پڕۆژەی ئێستاتان وردبینی بکەن. ئامرازێکی وەکو Website Carbon Calculator بەکاربهێنە بۆ بینینی کاریگەرییەکانی. پاشان، بەدوای “پاشماوە نەبینراوەکاندا” بگەڕێ. ئایا ئەو وێنەیە دەتوانێت SVG بێت؟ ئایا ئەو ڤیدیۆیە دەتوانێت پاڵەوانێکی ئیستاتیک بێت؟ ئایا دەتوانرێت ئەو ئەنیمەیشنە “دەنگ بەرزە” بێدەنگ بکرێت؟ بە بچووکی دەست پێ بکە. زۆرجار ڕەسەنترین چارەسەر ئەو چارەسەرەیە کە کەمترین بایتی هەیە.
