چگونه یک تم جوملا با الهام از هنر ایرنی (تذهیب، نگارگری، معماری اسلامی) طراحی کنیم؟

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

گام ۱: درک اصول هنر ایرانی-اسلامی در طراحی رابط کاربری

هنر ایرانی-اسلامی بر پایه‌ی سه اصل استوار است:

• نظم هندسی: استفاده از تناسب‌های ریاضی (مثل نسبت طلایی) در چینش عناصر.
• تکرار و تقارن: الگوهای اسلیم و ختایی که بی‌نهایت تکرار می‌شوند و نماد جاودانگی هستند.
• زیبایی در جزئیات: هیچ فضای خالی بدون معنا یا زیبایی وجود ندارد؛ هر نقطه‌ای بخشی از یک کل هماهنگ است.

در طراحی تم جوملا، این اصول را به این شکل پیاده‌سازی می‌کنیم:

• استفاده از شبکه‌های طلایی در طرح‌بندی صفحه
• افزودن الگوهای تکراری به‌عنوان بک‌گراند در بخش‌های خاص (مثل هدر یا فوتر)
• طراحی نوارهای منو با الگوهای اسلیم ساده‌شده

گام ۲: استخراج پالت رنگ از آثار تاریخی

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

• کاشی‌های مسجد شیخ لطف‌الله (اصفهان): فیروزه‌ای، طلایی، سفید، نیلی
• تابوت‌های میناکاری سیرجان: قرمز ارغوانی، نقره‌ای، سبز زمردی
• نگارگری‌های تیموری و صفوی: طلایی مات، قهوه‌ای خاکی، آبی کدر

این رنگ‌ها را در فایل custom.css تم خود تعریف کنید:

:root {
  --iran-blue: #1E5F8C;
  --iran-turquoise: #2A9D8F;
  --iran-gold: #D4AF37;
  --iran-terracotta: #A65F4C;
}

گام ۳: استفاده از الگوهای اسلیم و ختایی در پس‌زمینه

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

• تبدیل الگوها به SVG (کوچک، مقیاس‌پذیر و با کیفیت بالا)
• استفاده از آن‌ها فقط در بخش‌هایی مانند هدر یا فوتر
• کاهش پیچیدگی الگو برای نمایش بهتر در موبایل

مثال CSS برای بک‌گراند اسلیم:

.header {
  background-image: url('images/eslim-pattern.svg');
  background-size: 200px;
  background-repeat: repeat;
  opacity: 0.08;
}

گام ۴: فونت‌های سفارشی با سبک خط ثلث و نسخ

خط ثلث و نسخ تنها برای خوشنویسی نیست؛ می‌توان آن را در فونت‌های مدرن دیجیتالی گنجاند. من برای پروژه‌هایم دو راه را پیشنهاد می‌کنم:

1. فونت‌های فارسی دیجیتالی با الهام از خط: مانند Vazirmatn یا IRANSans که ساده ولی ایرانی هستند.
2. فونت‌های سفارشی بر اساس آثار خودتان: اگر — مانند من — خوشنویس هستید، یک فونت متن‌باز از خط ثلث خود ایجاد کنید و آن را در تم جوملا بارگذاری نمایید.

کد CSS برای لود فونت محلی:

@font-face {
  font-family: 'Balvardi-Thuluth';
  src: url('fonts/Balvardi-Thuluth.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1, h2, .title-ornament {
  font-family: 'Balvardi-Thuluth', 'Vazirmatn', serif;
}

گام ۵: طراحی منو با الهام از معماری اسلامی

منو فقط یک لیست نیست؛ می‌تواند بخشی از هنر شما باشد:

• به‌جای خطوط صاف، از خطوط منحنی (C-shaped) در hover استفاده کنید
• آیکون‌ها را با نمادهای ایرانی جایگزین کنید: جایگزینی آیکون “خانه” با نماد “چشمه”، “کاربر” با “عکس نگارگری” و غیره
• برای منوهای عمودی، از نوارهای گچ‌بری‌شده‌ی دیجیتالی به‌عنوان جداکننده استفاده کنید

گام ۶: ادغام هوشمند هنر بدون افت عملکرد

زیبایی نباید به قیمت سرعت تمام شود. برای حفظ بهینه‌بودن:

• تمام تصاویر SVG را با ابزارهایی مثل SVGOMG فشرده کنید
• فونت‌ها فقط برای عناصر خاص (نه تمام صفحه) لود شوند
• از lazy loading برای تصاویر دکوراتیو استفاده کنید
• کدهای CSS را به‌صورت خردشده و با media query مناسب برای موبایل بنویسید

تجربه‌ی شخصی: تم “چهارباغ” برای یک پروژه فرهنگی

در یکی از پروژه‌های اخیر، تمی طراحی کردم که الهام‌گرفته از باغ‌های ایرانی بود: آب‌نماها به‌عنوان خطوط راهنما، درختان سرو در تصاویر پس‌زمینه، و منویی که هنگام اسکرول، گل سرخ از حاشیه بیرون می‌آمد. این تم نه‌تنها زیبا بود، بلکه بار فرهنگی سنگینی را به سایت اضافه کرد — بدون اینکه عملکرد آن کمتر از ۹۰ امتیاز در Google PageSpeed شود.

جمع‌بندی

تم جوملا شما می‌تواند فراتر از یک پوسته باشد؛ می‌تواند نگارگری دیجیتالی باشد، تذهیبی مدرن باشد، یا حتی یک باغ ایرانی در فضای مجازی. کلید موفقیت، ترکیب دانش فنی جوملا با دیدگاه هنری ایرانی است. وقتی این دو دست در دست هم دهند، نه‌تنها یک وب‌سایت می‌سازیم، بلکه فناوری را بومی می‌کنیم.

امیدوارم این راهنمای عملی، الهام‌بخش شما برای ساخت تم‌هایی با روح ایرانی باشد — همان‌گونه که من سال‌هاست در مسیر آن گام برمی‌دارم.