Mohammad

X

بازگشت
Screenshot 1
2026Front-end / UI گالری • 1/4

طراحی سایت اقیانوس وب

وب‌سایت شرکتی با UI شیشه‌ای و تجربه کاربری روان

در یک نگاه

Case Summary

در این پروژه تمرکز روی طراحی مدرن، سرعت بارگذاری، و ساخت کامپوننت‌های قابل استفاده مجدد بود. صفحه‌ها شامل Home، Services و Blog هستند و نسخه موبایل با دقت بالا پیاده‌سازی شد.

Performance+35%
Components24+
Pages7

خلاصه

01

هدف پروژه ساخت یک وب‌سایت شرکتی سریع، مدرن و قابل توسعه با UI شیشه‌ای و پشتیبانی کامل RTL/LTR بود.

استایل
Glass UI در دارک مود با خوانایی بالا روی تصاویر
پرفورمنس
بهینه‌سازی تصاویر + lazy loading و کاهش رندرهای اضافه
ساختار
کامپوننت‌های قابل استفاده مجدد و قابل توسعه برای صفحات آینده
i18n
آماده برای سه‌زبانه شدن (RTL/LTR-safe)

نقش من در پروژه

02

تمرکز اصلی روی فرانت‌اند، طراحی UI و استانداردسازی کامپوننت‌ها بود.

پیاده‌سازی صفحات
Home / Services / Blog
کامپوننت‌سازی
کارت‌ها، اسلایدر، دکمه‌ها و الگوهای تکرارشونده
استاندارد RTL/LTR
استفاده از start/end و کنترل direction
بهینه‌سازی UI
کنترل ارتفاع کارت‌ها + line-clamp + spacing ثابت

چالش‌ها و راه‌حل‌ها

03

دو چالش اصلی: خوانایی متن روی عکس و کنترل ارتفاع کارت‌ها.

خوانایی روی تصویر
گرادینت + پنل شیشه‌ای با opacity مناسب
ارتفاع کم کارت‌ها
line-clamp + تایپوگرافی دقیق + padding ثابت
هماهنگی تم
یکسان‌سازی border/blur/hover با کل پروژه
تحرکات ظریف
انیمیشن‌های کوتاه برای حس premium بدون سنگین شدن
نکته
نتیجه: تجربه کاربری یکدست‌تر و ظاهر حرفه‌ای‌تر بدون افزایش وزن UI.

خروجی نهایی

04

یک رابط کاربری یکپارچه، سریع و آماده اتصال به CMS یا API.

مقیاس‌پذیری
اضافه شدن صفحات/بخش‌های جدید بدون به‌هم ریختگی
قابلیت اتصال
ساختار داده‌محور برای اتصال مستقیم به بک‌اند
تجربه کاربری
کاهش اصطکاک و افزایش خوانایی در دارک مود