پرۆژەی ماڵپەڕی گرووپی پارێزەرانی مەعید

 تێکەڵکردنی هونەری دیزاین لەگەڵ تەکنەلۆژیای یاسایی - شاکاری بینراوی تیمی کارزان

ناساندنی پرۆژە:
ماڵپەڕی گرووپی پارێزەرانی مەعید بەڵگەیەکی زیندووە لەسەر ئەو بنەمایەی کە «جوانیی بینراو و کاراییی تەکنیکی دەتوانن لە هاوئاهەنگییەکی تەواودا بن». ئەم پلاتفۆرمە کە وەک سەرچاوەیەکی پسپۆڕی وتارە یاساییەکان و بانکی یاساکان دیزاین کراوە، بە ڕێبازێکی شۆڕشگێڕانە لە UI/UXدا، ستانداردەکانی دیزاینی وێبی ئێرانیی پێناسە کردووەتەوە.

تایبەتمەندییە بینراوە بێوێنەکان

١. فەلسەفەی دیزاین: «متمانە لە جوانیدا»

  • ڕووکاری skeuomorphicی یاسایی: بەکارهێنانی توخمی چەرمی، زێڕکاری و کاغەزی کە هەستی ڕەسەنایەتیی پیشەی پارێزەری دەگوازێتەوە
  • پالێتێکی ڕەنگی باڵا: تێکەڵکردنی #0A2647 (شینی شاهانە) لەگەڵ #C69749 (زێڕین) و #FDF0D1 (کرێمی) وەک ڕەنگە بنەڕەتییەکانی براند
  • تایپۆگرافیی باڵا:
    • سەردێڕەکان: Vazir FD بە کێشی Bold
    • دەقەکان: Estedad FD بە قەبارەی ١.٢٦rem و بەرزیی هێڵی ١.٨
  • سێبەری چینبەچین: قووڵیدان بە سێبەری 0 4px 30px rgba(10, 38, 71, 0.12)

٢. توخمە دیارەکانی دیزاین

  • شریتی گەشتکردنی سێ ڕەهەندی: بە کاریگەریی هەڵاوسان لە کاتی hover
  • کارتی وتارەکان: لێواری زێڕین بە سێبەری ناوەکی (inset shadow)
  • ئایکۆنی تایبەت: دیزاینکراو بە ئیلهام لە هێماکانی یاسای ڕۆمانی
  • سلایدەری پۆرترێتی پارێزەران: کاریگەریی گەلەریی مۆزەخانەیی بە backdrop-filter: blur(12px)

ئەندازیاریی تەکنیکیی پێشکەوتوو

بەش

تەکنەلۆژیاکان

سوودە بینراوەکان

دیزاینی UI

Figma + Auto-layout

گونجانی pixel-perfect

فرۆنت ئێند

Tailwind CSS 3.3 + GSAP

ئەنیمەیشنی ٦٠fps

باک ئێند

Yii2 (PHP)

ڕێندەرکردنی بێ دواکەوتنی پێکهاتەکان

بنکەدراوە

MongoDB

بەڕێوەبردنی ناوەڕۆکی ناڕێکخراو

سێرڤەر

Node.js + V8 Engine

باشترکردنی جێبەجێکردنی JavaScript

سیستەمی بەڕێوەبردنی ناوەڕۆکی بینراو (Visual CMS)

ئەندازیارییەکی نەرم بە MongoDB:

تایبەتمەندییەکانی بەڕێوەبردنی بینراو:
١. دەستکاریکەری پێشکەوتوو:

  • ڕێکخستنی سێبەر/لێوار ڕاستەوخۆ لە دەستکاریکەردا
  • پێشبینینی زیندووی ئەنیمەیشنەکان

٢. سیستەمی بەڕێوەبردنی وێنە یاساییەکان:

  • تاگکردنی زیرەکی وێنەکانی یاساکان
  • بڕینی ئۆتۆماتیکی بە ڕێژەی زێڕین (١.٦١٨)

باشترکردنە بینراو-تەکنیکییەکان

١. تەکنیکە پێشکەوتووەکانی CSS:

٢. ئەنیمەیشنی بەڵگەبنەما:

  • سکرۆڵی پارالاکس بە پارامیتەرەکانی translate3d و scale3d
  • گواستنەوەی سەر بە سکرۆڵ بە بەکارهێنانی Intersection Observer API

٣. باشترکردنی وێنەکان:

  • گۆڕینی ئۆتۆماتیکی بۆ WebP بە ڕوونی
  • بارکردنی پێشکەوتوو بە Blur-Up Technique

دەستکەوتە بینراوەکانی پرۆژە

پێوەر

ئەنجام

نمرەی Lighthouse

98 (Performance)، 100 (Accessibility)

کارلێکی بەکارهێنەر

٧٥% زیادبوونی کاتی مانەوە لە لاپەڕەدا

ڕێژەی جێهێشتن

٦٥% کەمبوونەوە بە بەراورد لەگەڵ وەشانی کۆن

فیدباکی بەکارهێنەران

٤.٩/٥ لە زیاتر لە ٣٢٠ بۆچوون

کۆتایی: گۆڕانکارییەک لە دیزاینی پلاتفۆرمە پسپۆڕییەکاندا

ماڵپەڕی گرووپی پارێزەرانی مەعید دەیسەلمێنێت کە جوانیناسی و کاراییی پسپۆڕانە دەتوانن لە پلاتفۆرمێکی یاساییدا بگەنە تەواوی. دەستکەوتە سەرەکییەکانی ئەم پرۆژەیە:

  • دروستکردنی ستانداردێکی نوێی UI: بە ئیلهام وەرگرتن لە توخمە نەریتییە یاساییەکان و گۆڕینیان بۆ توخمی دیجیتاڵی
  • سیستەمی بەڕێوەبردنی ناوەڕۆکی بینراو: یەکەم CMSی یاسایی بە توانای ڕێکخستنی پارامیتەرە جوانیناسییەکان
  • ئەزموونی بەکارهێنەری گێڕانەوەیی: ڕێنماییکردنی بەکارهێنەر لە ڕێڕەوێکی چیرۆکئاسادا لە ڕێگەی ئەنیمەیشنی ئامانجدارەوە

«لە کارزاندا باوەڕمان وایە جوانیناسی تەنها ڕیزکردنی ڕەنگەکان نییە، بەڵکو زمانێکە بۆ گفتوگۆ لەگەڵ بەکارهێنەر. پرۆژەی مەعید بەڵگەی ئەم فەلسەفەیەیە.»

بۆ زانیاریی زیاتر دەربارەی دیزاینی ماڵپەڕ و قۆناغەکانی، ئەم وتارانەی بلۆگی کارزان بخوێنەوە: