سایت شرکتی آرین‌سازه

نمونه‌ی مفهومی. این پروژه را استودیو لوزی برای نمایش روش کارش طراحی کرده است؛ نام‌ها و داده‌ها واقعی نیستند و بخش «اثر» فقط هدف و برنامه‌ی سنجش را نشان می‌دهد.

خلاصه

صنعت	ساخت‌وساز مسکونی و تجاری
نقش لوزی	استراتژی، معماری اطلاعات، UX/UI، توسعه
پلتفرم	وردپرس + المنتور پرو + JetEngine
دامنه	۴ قالب صفحه‌ی اصلی (خانه، آرشیو پروژه، تک‌پروژه، درباره و تماس) + نسخه‌ی موبایل
زمان‌بندی	۸ هفته

چالش

کارفرمایی که قرار است سرمایه‌ی سنگینی را به یک پیمانکار بسپارد، قبل از تماس دنبال مدرک است: پروژه‌ی واقعی، فرایند روشن و راه سریع برای گرفتن برآورد. سایت قبلی فقط یک کاتالوگ بود؛ پروژه‌ها در یک PDF پنهان بودند و فرم تماس در عمق منو بود.

هدف‌ها و معیار موفقیت

1. اعتماد در نگاه اول: آمار، پروژه‌ی شاخص و دکمه‌ی استعلام در اولین اسکرول. معیار پس از راه‌اندازی: نرخ ریزش صفحه‌ی اول.
2. برآورد در یک قدم: دکمه‌ی «استعلام قیمت» در هدر همه‌ی صفحه‌ها و فرم ۳ فیلدی. معیار: تعداد درخواست برآورد در ماه.
3. دیده‌شدن محلی: صفحه‌ی مستقل برای هر پروژه و هر خدمت. معیار: رتبه برای عبارت‌های «پیمانکار ساختمان + منطقه».

کاربر و مسیر اصلی

کارفرمای ملکی یا سرمایه‌گذار: «می‌خواهم ببینم قبلاً چه ساخته‌اند و چقدر طول می‌کشد.» مسیر بهینه‌شده: خانه ← آرشیو پروژه ← تک‌پروژه ← استعلام قیمت، حداکثر دو کلیک تا فرم.

معماری اطلاعات

پنج شاخه (پروژه‌ها، خدمات، درباره ما، وبلاگ، تماس)؛ پروژه‌ها مهم‌ترین شاخه‌اند و هر تک‌پروژه دکمه‌ی «درخواست پروژه‌ی مشابه» دارد. صفحه‌های کم‌بازدید قبلی (گالری عمومی، اخبار شرکت) در آرشیو پروژه ادغام شدند.

سیستم طراحی

• رنگ: پالت Warning نقش برند را گرفت: کهربایی گرم که حس مصالح و آفتاب کارگاه را دارد. bg-brand-solid = Warning 700 (#B54708) برای دکمه‌ها، 500 برای تأکیدهای گرافیکی، 25/50 برای سطوح روشن. هیرو روی پس‌زمینه‌ی تیره (#0A0D12) با متن سفید و برچسب Warning 300.
• دسترس‌پذیری: سفید روی Warning 600 فقط 3.49:1 است؛ برای همین دکمه‌ها روی 700 با 5.43:1 طراحی می‌شوند. متن بدنه (text-tertiary #535862) روی سفید 7.14:1.
• تایپوگرافی: Display xl (60/72) برای تیتر هیرو، Display md (36/44) برای تیتر بخش‌ها، Text xl (20/30) برای متن‌های معرفی.
• چیدمان: کانتینر ۱۲۸۰، فاصله‌ی عمودی بخش‌ها ۹۶، گرید کارت‌های پروژه ۳ ستونه با gap ۳۲؛ همه Auto Layout.
• حالت تیره: هیرو و فوتر از قبل روی سطح تیره طراحی شده‌اند و رنگ‌ها معنایی‌اند، اما نسخه‌ی کامل حالت تیره طراحی نشده است.

معماری کامپوننت

• سلسله‌مراتب دکمه: Primary «استعلام قیمت»؛ Secondary «مشاهده‌ی پروژه‌ها»؛ لینک متنی «جزئیات ←» روی کارت‌ها.
• کامپوننت‌های کلیدی: کارت پروژه (تصویر ۴۰۵×۲۶۰، بج نوع، موقعیت با آیکن، مشخصات)، نوار آمار، فیلتر چیپ‌ها (فعال/غیرفعال)، فرم استعلام.
• حالت‌ها: هاور کارت (سایه‌ی Shadow lg)، فوکوس فیلدها با حلقه‌ی ۴px برند، حالت خطای فرم با border-error و پیام زیر فیلد.

صفحه‌های کلیدی

1. آرشیو پروژه: فیلتر نوع (مسکونی/تجاری/بازسازی) + جست‌وجو؛ کارت‌ها متراژ، طبقات و موقعیت را بدون کلیک نشان می‌دهند. چرا: کارفرما پروژه‌ها را مقایسه می‌کند، نه می‌خواند.
2. تک‌پروژه: گالری، جدول مشخصات فنی، امکانات و زمان‌بندی اجرا؛ در انتها «درخواست پروژه‌ی مشابه». چرا: هر پروژه یک دلیل اعتماد است و باید مستقیم به فرم برسد.
3. درباره و تماس: ارزش‌ها، گواهی‌ها، نقشه و فرم کوتاه.

موبایل

دکمه‌ی تماس و استعلام در نوار پایین ثابت (منطقه‌ی شست)، کارت‌های پروژه تمام‌عرض برای اسکرول سریع، فیلترها به چیپ افقی قابل اسکرول تبدیل شدند.

تحویل و پیاده‌سازی

متغیرهای فیگما (رنگ معنایی، فونت، فاصله) به Global Colors / Global Fonts المنتور و متغیرهای CSS منتقل می‌شوند؛ پروژه‌ها یک پست‌تایپ JetEngine با فیلدهای نوع، موقعیت، طبقات، متراژ و گالری‌اند، پس کارفرما بدون طراح پروژه اضافه می‌کند. تصاویر WebP با lazy-load.

اثر

تحویل‌شده: ۴ قالب صفحه‌ی دسکتاپ، نسخه‌ی موبایل، ۱۴ قالب صفحه در دامنه‌ی کامل، مدل محتوای پروژه‌ها.

برنامه‌ی اندازه‌گیری: ریزش صفحه‌ی اول، کلیک روی «استعلام قیمت»، فرم‌های تکمیل‌شده، رتبه‌ی عبارت‌های محلی. [جای نتایج واقعی پس از راه‌اندازی]