دیزاین سیستم چیست؟ آموزش استفاده در طراحی سایت

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

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

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

در ادامه مفهوم Design System را از پایه توضیح می‌دهیم، اجزا و توکن‌های طراحی را می‌شناسیم، با مطالعه موردی shadcn/ui ایده‌ها را روی یک نمونه واقعی می‌بینیم و در نهایت قدم‌به‌قدم یک دیزاین سیستم در المنتور می‌سازیم.

در پایان مقاله باید بتوانید برای پروژه بعدی‌تان یک سیستم طراحی متناسب بسازید.

دیزاین سیستم چیست؟

دیزاین سیستم (Design System) مجموعه‌ای منسجم از اصول طراحی، قواعد، اجزای قابل استفاده مجدد و مستندات است که به همه افراد درگیر در یک پروژه می‌گوید چیزها چه شکلی باشند، چطور رفتار کنند و چرا.

چرا در طراحی رابط کاربری به یک سیستم مشخص نیاز داریم؟

بدون سیستم، هر صفحه جدید با چند سؤال شروع می‌شود:

• فاصله بین این دو بخش چقدر باشد؟
• دکمه اصلی چه رنگی است؟
• تیتر کارت‌ها ۲۰ پیکسل باشد یا ۲۲؟

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

دیزاین سیستم چه مشکلی را در فرایند طراحی و توسعه حل می‌کند؟

سه مشکل تکرارشونده را هدف می‌گیرد:

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

دو صفحه با استایل ناهماهنگ در مقایسه با دو صفحه هماهنگ

فرض کنید سایت یک شرکت خدماتی دو صفحه دارد: «خدمات» و «درباره ما».

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

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

مقایسه دو صفحه بدون دیزاین سیستم و با دیزاین سیستم

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

آیا دیزاین سیستم فقط برای پروژه‌های بزرگ و تیم‌های حرفه‌ای است؟

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

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

دیزاین سیستم چه کاربردی در طراحی سایت دارد؟

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

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

مزایا و معایب استفاده از دیزاین سیستم

هر ابزار هزینه‌ای دارد و دیزاین سیستم هم استثنا نیست. نگاه صادقانه به هر دو طرف کمک می‌کند اندازه سیستم را درست انتخاب کنید.

مزایای دیزاین سیستم

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

معایب و چالش‌های دیزاین سیستم

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

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

چه زمانی استفاده از دیزاین سیستم ارزشمند است؟

هرچه تعداد تصمیم‌های تکراری در یک پروژه بیشتر باشد، سیستم طراحی سودمندتر است. نشانه‌های رایج:

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

تفاوت دیزاین سیستم با UI Kit و Style Guide چیست؟

این سه اصطلاح اغلب جابه‌جا استفاده می‌شوند و همین باعث سردرگمی است. برای روشن شدن تفاوت، هر کدام را جداگانه تعریف می‌کنیم و بعد کنار هم می‌گذاریم.

UI Kit چیست؟

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

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

Style Guide چیست؟

Style Guide مجموعه‌ای از دستورالعمل‌های مربوط به ظاهر و هویت بصری است: رنگ‌های برند، فونت‌ها، اندازه متن‌ها، قواعد استفاده از لوگو و سبک تصاویر. وظیفه‌اش حفظ هماهنگی ظاهری است؛ مثلاً اینکه رنگ تیترها چیست و فاصله‌ها چقدر باشد.

تفاوت آن با یک سیستم کامل در دامنه است. استایل گاید معمولاً به «ظاهر» می‌پردازد، اما مدیریت اجزا، رفتار تعاملی آن‌ها و ارتباطشان با کد را پوشش نمی‌دهد.

Design System چیست؟

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

اگر بخواهیم با یک تشبیه جمع‌بندی کنیم: UI Kit جعبه قطعه‌هاست، Style Guide دفترچه هویت ظاهری است و دیزاین سیستم کل کارگاه، شامل قطعه‌ها، دفترچه، قواعد کار و روش نگهداری.

مقایسه دیزاین سیستم، UI Kit و Style Guide

معیار	UI Kit	Style Guide	Design System
تمرکز اصلی	اجزای آماده	قواعد ظاهری	کل سیستم طراحی
رنگ و تایپوگرافی	معمولاً دارد	دارد	دارد
کامپوننت‌ها	مجموعه‌ای از اجزا	ممکن است معرفی شوند	همراه با قواعد و مشخصات
توکن‌های طراحی	ممکن است داشته باشد	ممکن است داشته باشد	معمولاً بخش مهمی از سیستم است
مستندات و قواعد استفاده	محدود یا متغیر	قواعد ظاهری	قواعد گسترده‌تر طراحی و استفاده
توسعه و نگهداری	وابسته به ابزار	وابسته به مستندات	با هدف حفظ انسجام در طول زمان

مرز این سه مفهوم کاملاً ثابت نیست. بسته به ابزار و پروژه، ممکن است با هم هم‌پوشانی داشته باشند و برخی تیم‌ها فایل فیگمایی خود را که شامل رنگ، کامپوننت و توضیحات است، هم UI Kit بنامند و هم دیزاین سیستم. مهم‌تر از برچسب، این است که بدانید پروژه‌تان به چه سطحی از انسجام نیاز دارد.

دیزاین سیستم از چه اجزایی تشکیل شده است؟

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

۱. اصول طراحی (Design Principles)

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

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

۲. رنگ‌ها (Color System)

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

• رنگ اصلی و رنگ‌های ثانویه برند
• رنگ متن، پس‌زمینه و مرزها
• رنگ‌های وضعیت: موفقیت، هشدار و خطا

نکته کلیدی این است که رنگ‌ها را بر اساس نقش تعریف کنید، نه فقط کد رنگ. «آبی ۲۵۶۳EB» اطلاعاتی درباره کاربردش نمی‌دهد، ولی «رنگ اصلی» یا «رنگ لینک» دقیقاً می‌گوید کجا استفاده می‌شود. وقتی برند عوض شود، نقش‌ها همان می‌مانند و فقط مقدارشان تغییر می‌کند.

اشتباه رایج: تعریف ده سایه مختلف خاکستری که تفاوتشان با چشم قابل تشخیص نیست. برای شروع، سه یا چهار خاکستری (متن اصلی، متن کم‌رنگ، مرز، پس‌زمینه) کافی است. به کنتراست هم توجه کنید؛ طبق دستورالعمل‌های دسترس‌پذیری WCAG، نسبت کنتراست متن معمولی با پس‌زمینه حداقل ۴.۵ به ۱ باید باشد.

۳. تایپوگرافی (Typography)

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

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

فونت‌هایی مثل وزیرمتن (Vazirmatn) که با مجوز آزاد منتشر شده و چند وزن دارد، برای شروع انتخاب‌های متداولی‌اند؛ هر فونتی را که انتخاب می‌کنید، مجوز استفاده از آن را برای سایت تجاری بررسی کنید.

نمونه مقیاس تایپوگرافی برای یک سایت فارسی (اعداد آموزشی‌اند)

نقش متن	دسکتاپ	موبایل	ارتفاع خط پیشنهادی
تیتر اصلی صفحه	۴۰ پیکسل	۳۰ پیکسل	۱.۴
تیتر سکشن	۳۲ پیکسل	۲۴ پیکسل	۱.۵
تیتر کارت	۲۰ پیکسل	۱۸ پیکسل	۱.۶
متن بدنه	۱۷ پیکسل	۱۶ پیکسل	۱.۸
توضیح و متن کمکی	۱۴ پیکسل	۱۳ پیکسل	۱.۷

این اعداد را می‌توانید با نیاز پروژه تغییر دهید؛ مهم این است که بعد از انتخاب، در همه صفحات ثابت بمانند.

۴. فاصله‌گذاری و اندازه‌ها (Spacing & Sizing)

فاصله داخلی (Padding) و خارجی (Margin)، فاصله بین سکشن‌ها و المان‌ها، عرض محتوا و محدودیت اندازه‌ها، همگی به یک مقیاس مشخص نیاز دارند. رایج‌ترین روش، مقیاسی بر پایه ۴ یا ۸ پیکسل است؛ مثلاً ۴، ۸، ۱۶، ۲۴، ۳۲، ۴۸، ۶۴ و ۹۶.

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

۵. گرید و چیدمان (Grid & Layout)

گرید ساختار ستون‌ها و ردیف‌ها، عرض کانتینر و فاصله بین ستون‌هاست. معمولاً سایت‌ها از یک ساختار ۱۲ ستونی یا ساده‌تر (یک، دو و سه ستون) استفاده می‌کنند و قواعد آن در موبایل، تبلت و دسکتاپ فرق می‌کند؛ مثلاً سه کارت کنار هم در دسکتاپ، دو کارت در تبلت و یک کارت در موبایل.

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

۶. کامپوننت‌ها (Components)

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

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

۷. آیکون‌ها و عناصر گرافیکی (Icons & Graphics)

یک سبک یکپارچه برای آیکون‌ها انتخاب کنید: همه توپر یا همه خطی، با ضخامت خط و اندازه ثابت (مثلاً ۲۴ پیکسل).

تصاویر و عناصر گرافیکی هم باید با زبان بصری سایت هماهنگ باشند: سبک عکس‌ها (طبیعی یا استودیویی)، گوشه‌های گرد یا تیز و نحوه استفاده از رنگ برند روی تصاویر.

۸. حالت‌ها و رفتارهای تعاملی (States & Interactions)

طراحی فقط ظاهر ثابت نیست؛ رفتار هم بخشی از آن است. این موارد را از قبل تعریف کنید:

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

هدف، رفتار قابل پیش‌بینی است. کاربری که یک بار دیده دکمه‌ای با کلیک تغییر رنگ می‌دهد، انتظار دارد همه دکمه‌های سایت همین‌طور رفتار کنند. استثنا بدون دلیل، یعنی سردرگمی.

۹. قواعد واکنش‌گرایی و دسترس‌پذیری

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

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

۱۰. مستندات و قواعد استفاده (Documentation)

مستندات چیزی است که سیستم را از «چند فایل پراکنده» به «یک سیستم» تبدیل می‌کند. شامل:

• ثبت مشخصات اجزای طراحی
• توضیح کاربرد هر کامپوننت
• مشخص کردن موارد استفاده درست و نادرست
• ثبت تغییرات و نسخه‌های سیستم
• ایجاد مرجع مشترک برای اعضای تیم

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

Design Token چیست و چه نقشی در دیزاین سیستم دارد؟

توکن طراحی (Design Token) یک نام استاندارد برای یک مقدار طراحی است. به‌جای اینکه در ده جا کد رنگ ۲۵۶۳EB را تایپ کنید، یک بار آن را با نامی مثل «رنگ اصلی» تعریف می‌کنید و همه‌جا از همان نام استفاده می‌کنید.

چرا نام؟ چون اسم معنا دارد و مقدار ندارد. وقتی در یک فایل CSS می‌بینید ‎#2563EB، نمی‌دانید این رنگ لینک است، دکمه است یا یک رنگ تصادفی؛ اما ‎–color-primary نقش خودش را می‌گوید. تفاوت توکن با مقدار مستقیم همین است: مقدار مستقیم فقط «چه چیزی» را می‌گوید، توکن «برای چه» را هم می‌گوید.

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

انواع توکن‌های طراحی

• توکن‌های رنگ
• توکن‌های تایپوگرافی
• توکن‌های فاصله‌گذاری
• توکن‌های شعاع گوشه‌ها
• توکن‌های سایه
• توکن‌های اندازه و عرض
• توکن‌های لایه‌بندی (z-index) و نقاط شکست، در صورتی که پروژه به آن‌ها نیاز دارد

تفاوت توکن خام، معنایی و مخصوص کامپوننت

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

جدول: سه سطح توکن با مثال

نوع توکن	مثال	مفهوم
توکن پایه (Primitive)	blue-600	یک مقدار مشخص در پالت رنگ
توکن معنایی (Semantic)	color-primary	نقش رنگ در سیستم
توکن کامپوننتی (Component)	button-background	رنگ پس‌زمینه دکمه

این نام‌ها نمونه‌های آموزشی‌اند و استاندارد نام‌گذاری بین پروژه‌ها و ابزارها می‌تواند متفاوت باشد. مهم، منطق سه‌سطحی و ثابت بودن نام‌گذاری در داخل یک پروژه است.

یک مثال ساده از کاربرد توکن‌ها در طراحی سایت

فرض کنید رنگ برند شما آبی است. مسیر کار این‌طور می‌شود:

1. یک رنگ تعریف می‌کنید: blue-600 برابر با ۲۵۶۳EB.
2. آن را به نقش «رنگ اصلی برند» وصل می‌کنید: color-primary.
3. در دکمه‌ها و لینک‌ها از color-primary استفاده می‌کنید.

:root {
  --blue-600: #2563eb;               /* توکن پایه */
  --color-primary: var(--blue-600);  /* توکن معنایی */
  --button-background: var(--color-primary); /* توکن کامپوننتی */
}

.btn-primary { background: var(--button-background); }
a { color: var(--color-primary); }

حالا اگر کارفرما بگوید رنگ برند «کمی تیره‌تر» باشد، فقط مقدار blue-600 را عوض می‌کنید و دکمه‌ها و لینک‌ها هر دو به‌روز می‌شوند. اگر بخواهید فقط رنگ دکمه عوض شود و لینک‌ها دست نخورند، همان توکن کامپوننتی است که کمک می‌کند.

آیا برای استفاده از دیزاین سیستم باید حتماً توکن داشته باشیم؟

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

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

دیزاین سیستم shadcn/ui چگونه کار می‌کند؟

تا اینجا با مفاهیم کار کردیم؛ حالا ببینیم این مفاهیم در یک پروژه واقعی چه شکلی دارند. shadcn/ui یکی از شناخته‌شده‌ترین نمونه‌هاست و برای مطالعه موردی مناسب است، چون ارتباط بین تصمیم‌های طراحی، توکن‌ها و کامپوننت‌ها را بسیار شفاف نشان می‌دهد. توجه کنید که shadcn/ui را نباید با یک UI Kit ساده یکی دانست؛ رویکرد آن کاملاً متفاوت است.

مسئله‌ای که حل می‌کند. کتابخانه‌های کامپوننت سنتی را معمولاً به‌صورت یک وابستگی نصب می‌کنید و بعد در چارچوب API آن‌ها کار می‌کنید. وقتی ظاهر یا رفتار یک کامپوننت از چیزی که کتابخانه اجازه می‌دهد فراتر برود، دست‌وپا بسته می‌شوید. shadcn/ui برای این مشکل طراحی شده است.

بررسی یک مثال از shadcn/ui

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

1. رنگ‌ها و مقادیر پایه تعریف می‌شوند. یک مقدار رنگ مشخص انتخاب می‌شود، مثلاً یک آبی.
2. مقادیر به نام‌های معنادار مرتبط می‌شوند. این مقدار به نقش --primary اختصاص پیدا می‌کند و رنگ متن روی آن به --primary-foreground.
3. کامپوننت از این مقادیر استفاده می‌کند. دکمه به‌جای کد رنگ، از نقش استفاده می‌کند.
4. با تغییر متغیرها، بخش‌های وابسته تغییر می‌کنند. اگر --primary عوض شود، دکمه و هر کامپوننت دیگری که از آن استفاده می‌کند، بدون دست زدن به خودشان تغییر می‌کنند.

:root {
  --primary: oklch(0.55 0.2 260);          /* مقدار پایه، نمونه آموزشی */
  --primary-foreground: oklch(0.98 0 0);   /* رنگ متن روی primary */
  --radius: 0.625rem;
}

<!-- دکمه، به‌صورت ساده‌شده -->
<button class="bg-primary text-primary-foreground rounded-md px-4 py-2">
  ثبت سفارش
</button>

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

چه چیزی از shadcn/ui برای طراحی سایت یاد می‌گیریم؟

• از نام‌های معنادار برای مقادیر طراحی استفاده کنید: primary یا border، نه «آبی ۲» یا «خاکستری روشن».
• قواعد مشترک برای کامپوننت‌ها تعریف کنید: همه دکمه‌ها از یک ساختار مشترک می‌آیند و فقط واریانت‌شان فرق دارد (اصلی، ثانویه، خطی، خطرناک).
• اجزا را قابل شخصی‌سازی نگه دارید: سیستم نباید مانع نیاز خاص یک پروژه شود.
• تصمیم‌های طراحی را از استفاده تکراری در صفحات جدا کنید: رنگ‌ها یک‌جا تعریف می‌شوند و صفحات فقط از آن‌ها استفاده می‌کنند.
• مستندسازی را جدی بگیرید و سیستم را قابل توسعه نگه دارید: مثال زنده کنار قاعده، بهترین نوع راهنماست.

آیا می‌توان shadcn/ui را مستقیماً در وردپرس و المنتور استفاده کرد؟

پاسخ کوتاه: مستقیماً نه. shadcn/ui مجموعه‌ای از کامپوننت‌های React است که برای اجرا به یک پروژه جاوااسکریپتی با ابزار ساخت و Tailwind نیاز دارند. المنتور یک صفحه‌ساز بصری است که با معماری ویجت‌های خودش (PHP و جاوااسکریپت) کار می‌کند و ویژگی‌هایش را از داخل ویرایشگر تنظیم می‌کنید. به همین دلیل نمی‌شود یک کامپوننت React را مثل یک ویجت المنتور وارد کرد. (برای استفاده از React در وردپرس باید سراغ مسیرهای دیگری مثل ساخت بلوک سفارشی یا معماری هدلس رفت که پروژه جداگانه‌ای است.)

خبر خوب این است که ارزش اصلی shadcn/ui کد آن نیست؛ الگوی فکری آن است و این الگو در المنتور قابل پیاده‌سازی است: رنگ‌های سراسری، متغیرهای CSS، کلاس‌های مشترک و قالب‌های قابل استفاده مجدد.

جدول: معادل مفاهیم shadcn/ui در المنتور

مفهوم در shadcn/ui	معادل عملی در المنتور
متغیر معنایی مثل --primary	رنگ سراسری (Global Color) با نقش مشخص
متغیر --radius و فاصله‌ها	متغیرهای CSS سفارشی
کامپوننت دکمه با واریانت‌ها	دکمه ذخیره‌شده با استایل ثابت و کلاس‌های CSS مشترک
مستندات و نمونه زنده	یک صفحه داخلی «راهنمای استایل» در خود سایت

آموزش استفاده از دیزاین سیستم در المنتور

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

یک نکته درباره نسخه: المنتور در نسخه‌های اخیر مفاهیمی مثل متغیرها (Variables) و کلاس‌های سراسری (Global Classes) را در ویرایشگر جدید خود معرفی کرده است. دسترسی به این قابلیت‌ها به نسخه، پلن و تنظیمات سایت شما بستگی دارد؛ پیش از اجرای مراحل زیر، منوی Site Settings و مستندات رسمی نسخه نصب‌شده را بررسی کنید. مراحل زیر بر پایه امکانات پایه‌ای است که در اغلب نسخه‌ها وجود دارد.

مرحله اول؛ تعریف رنگ‌های سراسری

وارد Site Settings شوید (از منوی همبرگری بالای ویرایشگر) و بخش Global Colors را باز کنید. المنتور چهار رنگ سیستمی دارد: Primary، Secondary، Text و Accent، و امکان افزودن رنگ‌های سفارشی.

• رنگ‌های اصلی و معنایی را مشخص کنید: رنگ اصلی برند، رنگ ثانویه، رنگ متن، پس‌زمینه، مرز و رنگ‌های وضعیت (موفقیت، هشدار، خطا).
• نام‌های قابل فهم انتخاب کنید: رنگ‌های سفارشی را با نقششان نام‌گذاری کنید، مثل «پس‌زمینه کارت» یا «مرز»، نه «آبی ۳».
• از تکرار جلوگیری کنید: قبل از افزودن رنگ جدید، ببینید رنگ مشابهی وجود دارد یا نه. دو آبی که فقط کمی با هم فرق دارند، مشکل‌ساز می‌شوند.

از این پس در هر ویجت، رنگ را از بخش رنگ‌های سراسری انتخاب کنید، نه با وارد کردن مستقیم کد.

مرحله دوم؛ تعریف تایپوگرافی سراسری

در همان Site Settings، بخش Global Fonts را باز کنید.

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

بهتر است هر ویجت متنی فقط از این استایل‌های سراسری استفاده کند.

مرحله سوم؛ استانداردسازی فاصله‌ها و ابعاد

• مقیاس فاصله‌گذاری را تعریف کنید: مثلاً ۸، ۱۶، ۲۴، ۳۲، ۴۸ و ۶۴ پیکسل، و فقط از همین مقادیر استفاده کنید.
• عرض محتوا و کانتینرها را مشخص کنید: در Site Settings بخش Layout، عرض پیش‌فرض محتوا و فاصله پیش‌فرض بین ویجت‌ها را تنظیم کنید.
• از واحدهای مناسب استفاده کنید: برای فاصله‌ها و عرض‌ها، واحدهای نسبی مثل rem و درصد را به پیکسل ثابت ترجیح دهید، مگر اینکه دلیل مشخصی داشته باشید. در صورت نیاز می‌توانید از متغیرهای CSS هم استفاده کنید.
• فاصله‌ها را در موبایل و دسکتاپ بررسی کنید: یک فاصله ۹۶ پیکسلی بین سکشن‌ها در دسکتاپ زیباست، اما در موبایل معمولاً زیادی بزرگ است.

مرحله چهارم؛ ساخت کامپوننت‌های قابل استفاده مجدد

المنتور رسماً کلمه «کامپوننت» را به همان معنای دیزاین سیستم ندارد، اما با ذخیره قالب‌ها و ویجت‌ها می‌توانید همان نتیجه را بگیرید.

• دکمه‌های اصلی و ثانویه را طراحی کنید: رنگ، تایپوگرافی، گوشه‌ها و حالت‌های هاور و فوکوس را یک بار تنظیم کنید.
• کارت خدمات و کارت محصول بسازید: با ساختار ثابت (تصویر، تیتر، توضیح، دکمه).
• فرم‌ها را استانداردسازی کنید: ظاهر فیلدها، حالت خطا و فاصله بین فیلدها باید در همه فرم‌ها یکسان باشد.
• از امکانات ذخیره و استفاده مجدد استفاده کنید: قالب‌های ذخیره‌شده (Saved Templates) و، بسته به نسخه، ویجت‌های سراسری یا امکانات جدیدتر.
• قواعد هر کامپوننت را مشخص کنید: کجا استفاده می‌شود و چه چیزی را نباید تغییر داد.

یک نام‌گذاری ساده کمک می‌کند بعداً قالب‌ها را پیدا کنید؛ مثلاً «DS – دکمه اصلی» و «DS – کارت خدمات». البته این نامگذاری ها اصولی نیست و باید مخفف انگلیسی را درنظر بگیرید مثلا دکمه اصلی میشود primary button که مخفف آن pr-btn میباشد.

مرحله پنجم؛ ساخت قالب‌های مشترک سایت

در نسخه Pro، Theme Builder اجازه می‌دهد بخش‌های تکرارشونده سایت را به‌صورت قالب بسازید:

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

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

مرحله ششم؛ پیاده‌سازی توکن‌ها و متغیرهای CSS

CSS Custom Properties همان متغیرهای CSS هستند که قبلاً در مثال توکن‌ها دیدید. نکته مفید این است که المنتور برای رنگ‌ها و فونت‌های سراسری خودش هم متغیر CSS تولید می‌کند؛ مثلاً --e-global-color-primary. یعنی می‌توانید رنگ‌های سراسری را در CSS سفارشی هم استفاده کنید و چیزی دوباره تعریف نکنید.

تفاوت متغیر CSS با تنظیمات سراسری المنتور. تنظیمات سراسری از داخل ویرایشگر و بدون کد قابل تغییر است، اما فقط چیزهایی را پوشش می‌دهد که المنتور برایشان رابط دارد (رنگ و فونت). برای مقادیری مثل شعاع گوشه، سایه و مقیاس فاصله، متغیر CSS سفارشی کار را ساده‌تر می‌کند.

:root {
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-md: 10px;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.ds-card {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.ds-btn-primary {
  background: var(--e-global-color-primary);
  border-radius: var(--radius-md);
}

این کد را می‌توانید در بخش CSS سفارشی سایت (در Site Settings، در نسخه‌هایی که این امکان را دارند) یا در Additional CSS قالب وردپرس قرار دهید و سپس کلاس‌ها را از بخش CSS Classes (در تب Advanced ویجت‌ها) به ویجت‌ها بدهید.

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

مرحله هفتم؛ مستندسازی و نگهداری دیزاین سیستم

• یک مرجع ساده بسازید: یک صفحه خصوصی در سایت (یا یک سند جداگانه) که رنگ‌ها، فونت‌ها، فاصله‌ها و کامپوننت‌ها را نشان می‌دهد.
• نام و کاربرد کامپوننت‌ها را ثبت کنید: هر قالب ذخیره‌شده چه چیزی است، کجا استفاده می‌شود و چه چیزی را نباید تغییر داد.
• هماهنگی صفحات را بررسی کنید: گاهی صفحات را کنار هم باز کنید و ببینید جایی از سیستم بیرون زده است یا نه.
• سیستم را با نیاز پروژه به‌روز کنید: هر کامپوننت جدیدی که سه بار ساخته شد، به سیستم اضافه شود.

چک‌لیست ساخت دیزاین سیستم برای یک پروژه المنتوری

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

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

آیا همه سایت‌ها به دیزاین سیستم نیاز دارند؟

پاسخ صادقانه این است: همه سایت‌ها به یک سطح از انسجام نیاز دارند، ولی همه به یک دیزاین سیستم کامل نیاز ندارند. سؤال درست «دیزاین سیستم بسازم یا نه» نیست؛ این است که چه اندازه از آن برای این پروژه ارزش دارد.

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

چه زمانی یک Style Guide ساده کافی است؟

در این موارد معمولاً همین کافی است:

• سایت معرفی یک کافه، آتلیه یا مطب با دو الی سه صفحه
• صفحه فرود (Landing Page) تک‌صفحه‌ای برای یک کمپین
• سایت شخصی ساده با چند صفحه ثابت

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

چه زمانی بهتر است یک دیزاین سیستم کامل‌تر بسازیم؟

در این موارد ارزش سرمایه‌گذاری روی سیستم بالاتر است:

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

دیزاین سیستم برای سایت‌های شرکتی، فروشگاهی، شخصی و داشبورد چه تفاوتی دارد؟

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

دیزاین سیستم سایت شرکتی

در سایت شرکتی، مهم‌ترین کار اعتمادسازی و انتقال هویت برند است.

• رنگ‌ها و تایپوگرافی هماهنگ و محتاط
• کامپوننت‌هایی مانند کارت خدمات، معرفی تیم، نظرات مشتریان و فراخوان به اقدام (CTA)
• قالب‌های مشترک برای صفحات خدمات و صفحات معرفی

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

دیزاین سیستم سایت فروشگاهی

در فروشگاه، هر ناهماهنگی می‌تواند به معنای از دست رفتن یک خرید باشد. اجزای مهم:

• کارت محصول و نمایش قیمت
• وضعیت موجودی و تخفیف
• دکمه افزودن به سبد خرید
• فیلترها، فرم‌ها و اجزای فرایند خرید
• حالت‌های تعاملی و خطاهای فرم

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

دیزاین سیستم سایت شخصی و نمونه‌کار

اینجا هدف نمایش هویت و آثار است، پس سیستم باید سبک و انعطاف‌پذیر باشد.

• نمایش یکپارچه پروژه‌ها
• ساختار ثابت برای کارت‌های نمونه‌کار
• تایپوگرافی و هویت بصری شخصی
• اجزای مربوط به رزومه، معرفی و تماس
• انعطاف برای نمایش پروژه‌های متفاوت

نمونه‌کارهای شما ممکن است ظاهر متفاوتی داشته باشند، اما قاب نمایش‌شان باید ثابت بماند تا پروژه‌ها کنار هم دیده شوند، نه در رقابت با هم.

دیزاین سیستم داشبورد و پنل مدیریت

در داشبورد، کاربر ساعت‌ها در سایت می‌ماند و کارایی از زیبایی مهم‌تر است.

• جداول و فهرست‌ها
• فرم‌های پیچیده
• فیلترها و کنترل‌های ورودی
• وضعیت‌های موفقیت، خطا، بارگذاری و هشدار
• ناوبری و سلسله‌مراتب اطلاعات
• توجه ویژه به دسترس‌پذیری و خوانایی در استفاده طولانی‌مدت

در چنین پروژه‌هایی معمولاً ابزارهای سفارشی‌تر از یک صفحه‌ساز بصری لازم است، ولی همان اصول توکن‌ها و کامپوننت‌ها صادق است.

مقایسه اجزای دیزاین سیستم در انواع سایت‌ها

اجزای مهم و اولویت اصلی در انواع سایت

نوع سایت	اجزای مهم	اولویت اصلی
شرکتی	هدر، کارت خدمات، CTA، نظرات مشتریان	هویت برند و اعتماد
فروشگاهی	کارت محصول، فیلتر، قیمت، فرم خرید	وضوح و سهولت خرید
شخصی	کارت نمونه‌کار، معرفی، رزومه، تماس	نمایش هویت و آثار
داشبورد	جدول، فرم، فیلتر، وضعیت‌ها، منو	خوانایی و کارایی

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

سؤالات متداول

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

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

تفاوت دیزاین سیستم با UI Kit چیست؟

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

تفاوت دیزاین سیستم با Style Guide چیست؟

Style Guide بیشتر به قواعد ظاهری و هویت بصری می‌پردازد؛ رنگ، فونت و اندازه‌ها. دیزاین سیستم علاوه بر این‌ها، کامپوننت‌ها، رفتار آن‌ها و قواعد استفاده را هم شامل می‌شود.

آیا دیزاین سیستم فقط برای طراحان UI/UX است؟

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

آیا برای طراحی سایت با وردپرس و المنتور به دیزاین سیستم نیاز داریم؟

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

آیا می‌توان بدون کدنویسی دیزاین سیستم ساخت؟

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

توکن طراحی چیست و آیا استفاده از آن ضروری است؟

توکن یک نام استاندارد برای یک مقدار طراحی است، مثل رنگ اصلی یا فاصله متوسط. ضروری نیست، اما سطح آن را باید با پیچیدگی پروژه تنظیم کرد: در پروژه کوچک، چند توکن ساده کافی است.

آیا shadcn/ui یک دیزاین سیستم است؟

دقیق‌تر این است که بگوییم یک پایه و رویکرد برای ساختن سیستم طراحی خودتان است، نه یک سیستم سازمانی کامل و مستقل با هویت بصری ثابت. کامپوننت‌ها، روش تم‌بندی با متغیرهای CSS و مستندات را در اختیار می‌گذارد، و شما ظاهر و قواعد نهایی را بر اساس نیاز پروژه شکل می‌دهید.

برای ساخت اولین دیزاین سیستم از کجا شروع کنیم؟

از چهار چیز شروع کنید: رنگ‌ها، تایپوگرافی، فاصله‌ها و چند کامپوننت پرتکرار مثل دکمه و کارت. بقیه را وقتی لازم شد اضافه کنید.

آیا می‌توان از یک دیزاین سیستم برای چند سایت استفاده کرد؟

بله، اصول و اجزای پایه قابل استفاده مجدد هستند. فقط لازم است رنگ‌ها، فونت‌ها و جزئیات را با هویت برند و نیاز هر پروژه تطبیق دهید؛ در غیر این صورت همه سایت‌ها شبیه هم می‌شوند.

چطور اولین دیزاین سیستم خودمان را بسازیم؟

نکات اصلی این مقاله را می‌توان در پنج جمله جمع‌بندی کرد:

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

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