ریسپانسیو کردن کامل طراحی فیگما و تبدیل آن به وب‌سایت

مرور کلی پروژه: شما مسئول تبدیل یک طراحی وب‌سایت که در فیگما انجام شده است به یک وب‌سایت کاملاً ریسپانسیو برای دستگاه‌های موبایل و تبلت خواهید بود. طراحی برای نسخه دسکتاپ به پایان رسیده است و وظیفه شما این است که این طرح‌ها را هم برای صفحه‌نمایش‌های مختلف تطبیق دهید و هم آن‌ها را به یک وب‌سایت قابل اجرا تبدیل کنید. وضعیت فعلی: طراحی نسخه دسکتاپ وب‌سایت در فیگما کامل شده است. طراحی شامل صفحه اصلی، چندین صفحه داخلی، ناوبری و اجزای خاص (مانند فرم‌ها، دکمه‌ها و...) می‌باشد. برای ارزیابی توانایی شما در این پروژه، یک فایل فیگما شامل یک صفحه لندینگ کوتاه ضمیمه خواهد شد که باید آن را به صورت ریسپانسیو پیاده‌سازی کرده و نتیجه کار خود را برای ما ارسال کنید. اهداف: تبدیل طراحی دسکتاپ فیگما به یک وب‌سایت کامل و بهینه که بر روی موبایل و تبلت به درستی کار کند. تطبیق طراحی برای استفاده بهینه و خوانایی در دستگاه‌های موبایل و تبلت. اطمینان از اینکه پیاده‌سازی نهایی با بهترین شیوه‌های طراحی وب ریسپانسیو مطابقت دارد و انسجام طراحی در همه اندازه‌های صفحه‌نمایش حفظ می‌شود. تحویل‌ها: تبدیل طراحی به وب‌سایت ریسپانسیو برای موبایل و تبلت: تبدیل طراحی دسکتاپ فیگما به کدهای HTML/CSS و ایجاد یک وب‌سایت ریسپانسیو که بر روی موبایل و تبلت به درستی نمایش داده شود. همه اجزا (ناوبری، دکمه‌ها، تصاویر، فرم‌ها و...) باید در موبایل و تبلت ریسپانسیو و کاربرپسند باشند. سلسله مراتب بصری و هویت برند در تمام نقاط شکست (breakpoints) حفظ شود. پیاده‌سازی CSS و HTML: ایجاد CSS تمیز، کارآمد و قابل استفاده مجدد که از طراحی ریسپانسیو پشتیبانی کند. در صورت استفاده از Tailwind CSS (ترجیحاً)، از قابلیت‌های ریسپانسیو این فریم‌ورک استفاده شود. اطمینان از اینکه تمام عناصر HTML به‌درستی و بهینه برای SEO استفاده می‌شوند. سازگاری بین مرورگرها: اطمینان از اینکه وب‌سایت به‌طور یکپارچه در تمام مرورگرهای مدرن (کروم، سافاری، فایرفاکس، اج) و سیستم‌عامل‌های مختلف موبایل (iOS، اندروید) کار می‌کند. تست و تضمین کیفیت (QA): وب‌سایت را در دستگاه‌ها و اندازه‌های مختلف صفحه‌نمایش تست کنید (تست ریسپانسیو) تا اطمینان حاصل کنید که طراحی به‌درستی تطبیق می‌یابد. اسکرین‌شات‌ها یا ویدیوهایی از عملکرد وب‌سایت در دستگاه‌های موبایل و تبلت ارائه دهید. مستندات: یک سند کوتاه ارائه دهید که توضیح می‌دهد طراحی ریسپانسیو چگونه پیاده‌سازی شده است، شامل کلاس‌های مهم، پرس‌وجوهای مدیا (media queries) یا نقاط شکست CSS استفاده‌شده. تست عملی: برای ارزیابی توانایی‌های شما، یک فایل فیگما شامل یک صفحه لندینگ کوتاه در اختیار شما قرار خواهد گرفت. شما باید این صفحه لندینگ را به صورت ریسپانسیو پیاده‌سازی کرده و نتیجه کار خود را برای ما ارسال کنید. محدوده پروژه: پرس‌وجوهای مدیا (media queries): از پرس‌وجوهای مدیا مناسب برای اندازه صفحه‌نمایش موبایل (معمولاً 320px–768px) و تبلت (معمولاً 768px–1024px) استفاده کنید. ناوبری: ناوبری دسکتاپ را به نسخه کاربرپسند برای موبایل تبدیل کنید (به عنوان مثال، منوی همبرگری) در حالی که انسجام با طراحی کلی حفظ شود. تصاویر و رسانه‌ها: اطمینان حاصل کنید که همه تصاویر و رسانه‌ها به درستی مقیاس‌بندی شده و کیفیت بالایی در همه اندازه‌های صفحه‌نمایش حفظ شود. تایپوگرافی: اطمینان از اینکه اندازه فونت‌ها، فاصله خطوط و سایر ویژگی‌های متن برای خوانایی در صفحه‌نمایش‌های کوچکتر ریسپانسیو باشند. فرم‌ها و تعاملات: اطمینان حاصل کنید که همه فرم‌ها، دکمه‌ها و عناصر تعاملی به‌راحتی قابل دسترسی و کاربردی در دستگاه‌های موبایل و تبلت باشند. بهینه‌سازی عملکرد: اطمینان از اینکه وب‌سایت ریسپانسیو عملکرد بهینه‌ای در همه دستگاه‌ها داشته باشد و زمان بارگذاری در موبایل و تبلت با بهینه‌سازی منابع مانند تصاویر و اسکریپت‌ها به حداقل برسد. مهارت‌های مورد نیاز: تخصص در CSS، HTML5 و طراحی وب ریسپانسیو. تجربه کار با فیگما و توانایی ترجمه فایل‌های طراحی به کد. آشنایی با Tailwind CSS (در صورت استفاده در پروژه). تجربه تست متقابل مرورگرها و دستگاه‌ها. زمان‌بندی پروژه: لطفاً یک زمان‌بندی تخمینی برای تکمیل پروژه ارائه دهید. ما انتظار داریم که این پروژه در بازه زمانی [2 هفته] انجام شود. نکات اضافی: دسترسی به فایل فیگما که شامل طراحی دسکتاپ است در اختیار شما قرار خواهد گرفت. طراحی باید تا حد امکان به نسخه اصلی دسکتاپ نزدیک باشد، با تنظیمات مناسب برای کاربردی بودن در موبایل و تبلت. یک فایل فیگما شامل صفحه لندینگ کوتاه ضمیمه می‌شود تا توانایی‌های شما ارزیابی شود. نتیجه پیاده‌سازی ریسپانسیو خود را برای ما ارسال کنید. فایل: https://www.figma.com/design/l1yweQxY3UBfntHGP8VaIb/Test?node-id=0-1&t=Cj496AXTtuvDf09v-1