نمونه کار طراحی سایت طلا ۲۴ | فروشگاه آنلاین طلا و جواهر

خرید طلا همیشه با یک عدد گره خورده که هر ساعت و گاهی هر دقیقه تغییر می‌کند؛ عددی که اگر شفاف نمایش داده نشود، مشتری یا تماس می‌گیرد یا سایت را می‌بندد. فروشگاه طلا ۲۴ دقیقاً از همین جا شروع شد: سایتی که نرخ روز طلا و سکه را جلوی چشم کاربر نگه دارد، قیمت هر محصول را از دل همان نرخ‌ها محاسبه کند و خریدار بدون یک تماس تلفنی به تصمیم برسد. ما در تیم وب‌داران که سال‌هاست کار طراحی وبسایت و فروشگاه‌های آنلاین را با معماری اختصاصی پیش می‌بریم، این پروژه را از صفر طراحی و برنامه‌نویسی کردیم.

در این نمونه کار، پشت صحنه این پروژه را کامل باز می‌کنیم: از تحلیل رفتار خریدار طلا و انتخاب معماری فنی، تا برنامه‌نویسی پوسته اختصاصی، ساخت تیکر قیمت لحظه‌ای و جدول محاسبه شفاف قیمت محصول. همه اعدادی که می‌بینید از نسخه زنده سایت اندازه‌گیری شده‌اند — نه از حدس و تخمین. اگر سؤال کوتاه دارید: سایت طلا ۲۴ با وردپرس و ووکامرس اجرا می‌شود، اما ظاهر و رفتار آن حاصل یک پوسته فرزند کاملاً اختصاصی است که تیم ما از صفر نوشته است.

شناسنامه پروژه در یک نگاه

صفحه اصلی با پس‌زمینه تیره در هدر و تیتر بزرگ «درخشش، با ظرافت آغاز می‌شود» شروع می‌شود؛ زیر همان، دو دکمه روشن «مشاهده مجموعه» و مسیر سرمایه‌گذاری قرار دارد. کاربر در همان سه ثانیه اول می‌فهمد این فروشگاه چه می‌فروشد، نرخ روز چقدر است و از کجا باید شروع کند. برای دیدن نتیجه نهایی می‌توانید پیش‌نمایش زنده سایت طلا ۲۴ را باز کنید.

چالش‌های پروژه؛ چرا این سایت ساده نبود؟

فروشگاه طلا، دشوارترین حالت ممکن یک فروشگاه آنلاین است: کالای گران‌قیمت که قیمتش هر لحظه نوسان دارد، مشتری‌ای که برای اطمینان باید عکس و وزن و عیار را همان جا ببیند، و رقابتی که در آن کوچک‌ترین ابهام قیمتی یعنی از دست دادن خرید. سه چالش اصلی پروژه این‌ها بودند:

• قیمت متحرک در هر صفحه: قیمت هر محصول از نرخ روز طلا، وزن، اجرت ساخت، سود و مالیات ساخته می‌شود. این محاسبه باید خودکار، بدون خطا و قابل فهم برای کاربر عادی باشد؛ نه یک عدد ثابت که هر روز باید دستی عوض شود.
• اعتماد در معامله آنلاین کالای گران: نمایش مجوز اتحادیه، آدرس فیزیکی گالری در نیاوران، ضمانت اصالت کالا و بازگشت ۱۴ روزه باید در فوتر و صفحات کلیدی حس شود؛ اعتماد در طلا با شعار ساخته نمی‌شود.
• دو مخاطب با دو نیت متفاوت: یکی دنبال پلاک یا گوشواره برای هدیه است و دیگری طلا را به‌عنوان پناهگاه سرمایه می‌خرد. سایت باید هر دو مسیر را از صفحه اصلی جدا و روشن کند.

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

فرآیند شش‌مرحله‌ای طراحی و توسعه

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

گام ۱: کشف و نیازسنجی

پیش از هر طراحی، مدل فروش طلا ۲۴ را روی میز آوردیم: محصولات ۱۸ عیار با وزن مشخص، سکه و طلا برای سرمایه‌گذاری، و مشتری‌هایی که بیشتر از موبایل وارد می‌شوند. چند فروشگاه طلا و جواهر فعال بازار را هم مرور کردیم و نقاط ضعف تکراری را فهرست کردیم: قیمت‌های بی‌تاریخ، جدول‌های نرخ کهنه، مسیر خرید که پشت فرم تماس گم می‌شود. خروجی این گام سه هدف قابل اندازه‌گیری بود: کاهش سؤالات قیمتی پشت تلفن، شفاف‌سازی کامل فرمول قیمت محصول و جداکردن مسیر «خرید زیورآلات» از «سرمایه‌گذاری».

گام ۲: معماری اطلاعات و سفر مشتری

محصولات در شش دسته‌بندی اصلی سازمان یافتند — پلاک، گوشواره، گردنبند، دستبند، حلقه و سکه — و روی صفحه اصلی، هر دسته با شمارش محصولات خودش نمایش داده می‌شود تا حجم موجودی هم دیده شود. منوی اصلی کوتاه نگه داشته شد (خانه، فروشگاه، بلاگ، تماس، درباره ما) و تیکر قیمت بالای همه چیز نشست. مسیر کاربر حداکثر دو کلیک تا صفحه محصول فاصله دارد؛ همان سادگی‌ای که در ناوبری فروشگاه‌های موفق به آن می‌رسند.

گام ۳: طراحی رابط اختصاصی

پالت رنگی پروژه از خود صنعت طلا بیرون آمد: کرم گرم (#f۵f۰e۶) برای زمینه‌ها، طلایی (#d۴af۳۷) برای تأکیدها و تیره (#۲a۲۴۲۰) برای متن و هدر تیکر. تایپوگرافی فارسی عمداً درشت و پرکنتراست انتخاب شد تا قیمت‌ها و وزن‌ها از فاصله یک‌متری خوانا باشند. عکاسی محصولات هم بخشی از طراحی UI بود: کارت‌های «محصولات ویژه» با عکس‌های لاکچری از مدل‌ها ساخته شدند و وزن و عیار هر محصول — مثلاً «دستبند طلا ۱۸ عیار زنانه، ۹.۵۰ گرم» — همان‌جا روی کارت درج می‌شود. هیچ‌کدام از این کامپوننت‌ها در قالب آماده وجود نداشت؛ همه از صفر طراحی شدند.

گام ۴: توسعه پوسته فرزند gold۲۴

طرح‌های تأییدشده به یک پوسته فرزند اختصاصی به نام gold۲۴ تبدیل شدند که روی هسته سبک قالب مادر سوار است. تمام قالب‌های نمایشی ووکامرس — آرشیو محصولات، صفحه محصول، سبد خرید و حساب کاربری — برای نیازهای صنف طلا بازنویسی شدند. همه کلاس‌های سفارشی با پیشوند g۲۴ ایزوله شده‌اند تا با به‌روزرسانی قالب مادر تداخلی پیش نیاید و نگهداری کد در سال‌های بعد هم ارزان بماند.

گام ۵: قابلیت‌های سفارشی صنعت طلا

قلب فنی پروژه این‌جا ضرب می‌شود: تیکر قیمت لحظه‌ای چرخشی در هدر، بخش نرخ روز طلا در صفحه اصلی، جدول «محاسبه قیمت» در هر صفحه محصول و قیمت‌گذاری پویای وابسته به وزن و عیار. در کنارش، ورود سریع با کد پیامکی و لندینگ اختصاصی سرمایه‌گذاری طلا ساخته شد. جزئیات هر قابلیت را در بخش «قابلیت‌های سفارشی» با جزئیات کامل باز کرده‌ایم.

گام ۶: سئو، تست و انتشار

پیش از انتشار، سایت روی مرورگرها و اندازه‌های صفحه مختلف تست شد؛ فرم ورود، سبد خرید و مسیر پرداخت بارها از موبایل و دسکتاپ اجرا شد. داده ساختاریافته برای هویت برند و جستجوی سایت پیاده‌سازی و تصاویر برای سرعت بهینه شدند. تاریخ اندازه‌گیری‌های این صفحه ۲۳ آبان ۱۴۰۵ است؛ اعداد واقعی نسخه زنده، نه نسخه آزمایشی.

معماری فنی؛ چهار لایه که کنار هم سرعت و نگهداری را ممکن می‌کنند

یک فروشگاه پایدار فقط «شکل خوب» نیست؛ لایه‌های زیرین آن باید طوری انتخاب شده باشند که توسعه بعدی گران تمام نشود. معماری طلا ۲۴ چهار لایه دارد:

چرا پوسته فرزند اختصاصی و نه قالب آماده؟

قالب آماده برای «همه کسب‌وکارها» ساخته می‌شود و در عمل برای هیچ‌کدام دقیق نیست؛ ده‌ها فونت و ویجتی که استفاده نمی‌شوند، صفحه‌سازهایی که هر بار لود می‌شوند و کدهایی که هیچ‌کس مسئولشان نیست. در طلا ۲۴ همه چیز برعکس است: هسته سبک قالب مادر زیر کار می‌کند و تمام چیزی که کاربر می‌بیند از پوسته فرزند gold۲۴ می‌آید — با فقط دو فایل CSS و جاوااسکریپت اختصاصی در صفحه اصلی و کل کلاس‌های سفارشی با پیشوند g۲۴. مقایسه کامل این دو رویکرد را در مقاله طراحی سایت اختصاصی یا قالب آماده آورده‌ایم.

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

قابلیت‌های سفارشی؛ همان‌ها که قالب آماده ندارد

تیکر قیمت لحظه‌ای چرخشی در هدر

نوار تیره بالای سایت دو کار می‌کند: سمت راست، ساعت زنده و تاریخ شمسی امروز را نشان می‌دهد و سمت چپ، هفت نرخ بازار را یکی‌یکی و به‌صورت چرخشی جلو می‌آورد — طلا ۱۸ عیار، مثقال ۱۷ عیار، انس جهانی طلا، سکه امامی، سکه طرح قدیم، نیم سکه و ربع سکه. هر نرخ با درصد تغییر و فلش سبز یا قرمز می‌آید و یک نقطه لنگر «زنده» کنار آن، این حس را می‌دهد که بازار همین حالا در حال حرکت است. این نوار کوچک، عملاً دلیل اصلی ورود روزانه کاربران همیشگی به سایت است: قیمت را همین‌جا می‌بینند، بدون رفتن به سایت‌های دیگر.

بخش «قیمت لحظه‌ای طلا» با هفت کارت نرخ روز

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

جدول «محاسبه قیمت» در صفحه محصول؛ شفافیت تا آخرین ریال

مهم‌ترین قابلیت پروژه این‌جاست. در صفحه هر محصول، قیمت به‌صورت جدول تفکیک می‌شود؛ نه یک عدد مبهم. این اسکرین‌شات، صفحه واقعی محصول «حلقه طلا ۱۸ عیار ساده» (وزن ۳.۵۰ گرم) در تاریخ اندازه‌گیری است:

این اعداد همان لحظه ثبت اسکرین‌شات (۲۳ آبان ۱۴۰۵) از سایت زنده است و با نوسان بازار تغییر می‌کنند — اتفاقاً نکته همین است: مشتری می‌بیند قیمت چطور از نرخ روز ساخته می‌شود و دیگر «چرا این‌قدر گران؟» سؤال پشتیبانی نیست، بخشی از یک محاسبه قابل فهم است. تجربه فروشگاه‌های طلا نشان می‌دهد این شفافیت مستقیماً تعداد تماس‌های قیمتی را کم می‌کند و تصمیم‌گیری را به داخل صفحه محصول می‌آورد.

قیمت‌گذاری پویا بر اساس وزن، عیار و نرخ روز

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

لندینگ اختصاصی سرمایه‌گذاری طلا

بخش «طلا؛ امن‌ترین پناهگاه سرمایه» پاسخ ما به مخاطب دوم سایت است؛ کسی که دنبال گوشواره نیست اما سکه و طلای فیزیکی می‌خرد. این لندینگ، خرید طلا را به‌جای یک خرید استهلاکی، یک تصمیم سرمایه‌گذاری روایت می‌کند و مسیر ورود کاربر به دسته سکه و محصولات سرمایه‌ای را کوتاه می‌کند:

ورود سریع با کد پیامکی

صفحه حساب کاربری طلا ۲۴ «ورود سریع» نام دارد و رفتارش ساده است: کاربر شماره موبایل را وارد می‌کند، کد پنج‌رقمی پیامک می‌شود و اگر حساب نداشته باشد، به‌صورت خودکار ساخته می‌شود. کد تا ده دقیقه معتبر است، یک‌بارمصرف است و ارسال مجددش فاصله زمانی مشخص دارد. حذف رمز عبور در کشوری که فراموشی رمز و اختلاف پلتفرم‌ها مرگ سبد خرید است، تصمیم کوچکی نیست؛ مرگ خاموش سبد خرید معمولاً در همین فرم لاگین اتفاق می‌افتد.

مجله طلا ۲۴؛ محتوایی که اعتماد می‌سازد

بلاگ سایت فقط برای سئو پر نشده است؛ مقالات آن به سؤالات واقعی خریدار طلا جواب می‌دهند: «تشخیص طلای اصل از تقلبی»، «عوامل مؤثر بر قیمت طلا در ایران»، «سرمایه‌گذاری در طلای فیزیکی یا سکه»، «راهنمای نگهداری و تمیز کردن جواهرات» و «ترندهای جواهرات ۲۰۲۶». این محتوا هم کاربر تازه‌وارد را آموزش می‌دهد هم به مرور موقعیت سایت را برای جستجوهای راهنمای خرید تثبیت می‌کند؛ فروشگاه بدون محتوای راهنما، فقط ویترین است.

تجربه موبایل؛ جایی که اکثر خریدهای طلا تصمیم می‌گیرند

نسخه موبایل از روز اول در مرکز طراحی بود، نه ضمیمه انتهای پروژه. تیکر قیمت در بالای صفحه موبایل می‌ماند، کارت‌های محصول تک‌ستونه و لمس‌پذیر چیده شده‌اند و صفحه محصول در موبایل همان جدول محاسبه قیمت را با خوانایی کامل نشان می‌دهد:

اگر بخواهید بفهمید ریسپانسیو بودن دقیقاً به چه معناست و چرا گوگل این‌قدر روی آن حساس است، مقاله طراحی سایت ریسپانسیو چیست را آماده کرده‌ایم.

سئوی تکنیکال و عملکرد اندازه‌گیری‌شده

به جای ادعای «سایت ما سئو دوستانه است»، نسخه زنده سایت را اندازه گرفتیم. نمودار زیر خلاصه همین اندازه‌گیری‌هاست و جدول بعدی جزئیات آن را نشان می‌دهد — همه اعداد متعلق به ۲۳ آبان ۱۴۰۵ و شرایط شبکه تست ماست:

یک نکته صادقانه هم بگوییم: بخشی از وزن تصاویر صفحه اصلی متعلق به دو انیمیشن تزئینی GIF است؛ در نقشه راه بهینه‌سازی، تبدیل آن‌ها به قالب‌های سبک‌تر در برنامه است. ما ترجیح می‌دهیم ضعف‌های پروژه را هم ببینیم و بگوییم — این رفتار در نگهداری بلندمدت سایت، بیشتر از هر جدول امتیاز ایده‌آل ارزش دارد.

نتیجه برای کسب‌وکار طلا ۲۴

سایت امروز سه نقش را هم‌زمان اجرا می‌کند: ویترینی که هفت نرخ روز بازار را زنده نشان می‌دهد و کاربر همیشگی می‌سازد؛ فروشگاهی که قیمت را تا آخرین ریال شفاف محاسبه می‌کند و تماس‌های قیمتی را کم می‌کند؛ و رسانه‌ای که با مجله و لندینگ سرمایه‌گذاری، مخاطب تازه را به مشتری تبدیل می‌کند. فوتر سایت هم با شماره تماس، آدرس فیزیکی گالری در مجموعه آتلس نیاوران، ساعت کاری و مجوز اتحادیه طلا و جواهر، همان اعتمادی را می‌سازد که در فروش حضوری طلا حیاتی است:

اگر صاحب کسب‌وکاری هستید و می‌خواهید بدانید ساختن چنین فروشگاهی چقدر هزینه دارد، جدول شفاف قیمت طراحی سایت ما بدون عدد پنهان منتشر شده است؛ همان شفافیتی که در طلا ۲۴ تا جدول محاسبه قیمت محصول رعایت کردیم.

تیم پشت پروژه؛ اعتباری که پشت هر پیکسل است

مسئولیت طراحی و برنامه‌نویسی کامل این پروژه بر عهده مهدی رستمی، مهندس ارشد فرانت‌اند تیم وب‌داران، بوده است. او معماری پوسته فرزند gold۲۴، تیکر قیمت لحظه‌ای و جدول محاسبه قیمت را طراحی و پیاده‌سازی کرده و کیفیت اجرای موبایل و دسکتاپ سایت را نهایی کرده است.

مهدی رستمی — مدیر طراحی و برنامه‌نویسی پروژه طلا ۲۴

مهندس ارشد فرانت‌اند با تمرکز بر رابط‌های سریع، مقیاس‌پذیر و بی‌نقص در جزئیات.

تخصص‌های اصلی:
• React — سطح ۹۶٪
• Next.js — سطح ۹۵٪
• TypeScript — سطح ۹۲٪

سوابق کلیدی: میانگین امتیاز Lighthouse ۹۹ در پروژه‌های تیم و بیش از ۶۰ پروژه تحویل‌شده.

پروفایل او به‌همراه سایر اعضای تیم متخصص در صفحه اصلی وب‌داران منتشر شده است.

چرا این نمونه‌کار برای اعتبار وب‌داران مهم است؟

گوگل در ارزیابی کیفیت، به چهار رکن EEAT نگاه می‌کند: تجربه (Experience)، تخصص (Expertise)، مرجعیت (Authoritativeness) و اعتماد (Trustworthiness). این صفحه عمداً بر اساس همین چهار رکن نوشته شده است:

• تجربه: به‌جای گفتن «ما فروشگاه می‌سازیم»، جزئیات واقعی یک پروژه منتشرشده را نشان می‌دهیم؛ از فرمول قیمت‌گذاری تا رفتار ورود پیامکی — با اسکرین‌شات از نسخه زنده.
• تخصص: عمق فنی مطالب (پوسته فرزند، ایزوله‌سازی پیشوند g۲۴، قیمت‌گذاری پویا، داده ساختاریافته) نشان می‌دهد تیم ما می‌تواند نیازهای ظریف صنف طلا را به کد تبدیل کند.
• مرجعیت: پروژه با نام و سابقه عضو مشخص تیم (مهدی رستمی) امضا شده و مسئولیت فنی شفاف است؛ نه یک «ما»ی بی‌نام و نشانه.
• اعتماد: هیچ عدد ایده‌آل‌سازی‌شده‌ای در این صفحه نیامده؛ ضعف‌ها (مثل انیمیشن‌های GIF سنگین) هم صادقانه ذکر شده‌اند و همه اعداد تاریخ اندازه‌گیری دارند.

سوالات متداول درباره این پروژه

سایت طلا ۲۴ با چه پلتفرمی ساخته شده است؟

سایت روی وردپرس با ووکامرس اجرا می‌شود؛ اما ظاهر و رفتار آن حاصل پوسته فرزند اختصاصی gold۲۴ است که قالب‌های نمایشی ووکامرس برای صنف طلا بازنویسی شده‌اند. این ترکیب، مدیریت آسان محصولات را از وردپرس می‌گیرد و ظاهر و سرعت را از کد اختصاصی.

قیمت‌های سایت طلا ۲۴ چطور به‌روز می‌شوند؟

قیمت هر محصول به وزن، عیار و نرخ لحظه‌ای طلا گره خورده است؛ با نوسان بازار، قیمت‌ها بدون دخالت دستی به‌روز می‌شوند و در صفحه محصول، تفکیک کامل مؤلفه‌ها (قیمت طلا، اجرت ساخت، سود فروشنده و مالیات) نمایش داده می‌شود. تیکر هدر و کارت‌های نرخ روز صفحه اصلی هم از همان منبع نرخ تغذیه می‌شوند.

چرا برای فروشگاه طلا ووکامرس انتخاب شد؟

ووکامرس مدیریت سبد خرید، پرداخت درگاه ایرانی و حساب کاربری را پایدار و شناخته‌شده ارائه می‌دهد؛ و چون قالب‌های نمایشی آن در پوسته فرزند بازنویسی شده‌اند، محدودیت ظاهری قالب آماده وجود ندارد. برای کسب‌وکاری که محصولش قیمت متغیر دارد، این ترکیب از هر دو طرف امن‌ترین مسیر بود.

چطور می‌توانم پروژه مشابهی برای کسب‌وکارم سفارش بدهم؟

اگر دنبال فروشگاهی با همین سطح معماری اختصاصی، قیمت‌گذاری پویا و سئوی تکنیکال هستید، از طریق صفحه تماس با وب‌داران درخواست خود را ثبت کنید یا با شماره ۰۲۱-۸۸۲۷۸۷۴۵ تماس بگیرید؛ نخستین جلسه نیازسنجی و برآورد پروژه بدون هزینه برگزار می‌شود.