دیزاین سیستم چیست؟
به‌صورت کلی می‌توان گفت دیزاین سیستم1design system مجموعه‌ای از استانداردها و معیارهای تعریف‌شده در یک طراحی است که برای مدیریت بهتر فرآیند طراحی از آن کمک گرفته می‌شود. دیزاین سیستم یا به زبان بهتر ساختارها و سیستم‌های طراحی فرآیند طراحی سایت را روان‌تر می‌کنند. به نوعی آن را منظم کرده و به شما در برندسازی شرکت خودتان کمک می‌کنند. اگر بخواهیم با جزئیات فراوان به تئوری دیزاین سیستم وارد شویم، شاید بتوان در مورد آن حتی یک کتاب نیز نوشت. اما هدف ما در این مقاله به‌کارگیری دیزاین سیستم در ساختن وب‌سایت با وردپرس و المنتور است. در حین انجام کار و بررسی گزینه‌های موجود در المنتور، احتمالاً بهتر متوجه می‌شوید که یک سیستم طراحی از چه بخش‌هایی تشکیل می‌شود و چگونه فرآیند طراحی سایت را قاعده‌مند می‌کند. پس دیگر تئوری کافی است و بهتر است دست‌به‌کار شویم.
راه دسترسی به دیزاین سیستم چیست؟
ابزارهای گوناگون طراحی، هر یک مفهوم و ساختار خاصی برای خودشان تعریف کرده‌اند که از طریق آن شما می‌توانید به دیزاین سیستم دسترسی داشته باشید یا بهتر بگوییم می‌توانید ساختار و سیستمی برای فرآیند طراحی خود ایجاد کنید.
افزونه المنتور نیز از این قاعده مستثنی نیست. برای دسترسی به دیزاین سیستم که می‌تواند به تنظیم فونت در المنتور، ایجاد و تعریف رنگ‌بندی سایت و طراحی عمومی برخی عناصر و المان‌های سایت کمک کند، به این طریق اقدام کنید.
ابتدا به داشبورد وردپرسی خود وارد شوید. سپس به صفحه‌ای که قصد طراحی آن را دارید یا یکی از صفحات قبلی که طراحی کرده‌اید، وارد شوید و گزینه Edit with Elementor را انتخاب کنید. زیرا قرار است به ویرایشگر المنتور وارد شویم و سپس از طریق آن به دیزاین سیستم المنتور دسترسی داشته باشیم.
بعد از آنکه به ویرایشگر المنتور وارد شدید، از طریق منوی گوشه سمت چپ و بالای صفحه (البته اگر سایت شما انگلیسی‌زبان است و در غیر این صورت این منو در گوشه سمت راست و بالای صفحه وجود دارد) می‌توانید به بخش Site Settings دسترسی داشته باشید.
با کلیک بر روی این بخش به ناحیه دیزاین سیستم در المنتور رسیده‌اید. با بررسی گزینه‌های این قسمت به‌صورت اجمالی احتمالاً متوجه می‌شوید که دیزاین سیستم چیست. شما به کمک این موارد می‌توانید به تنظیم فونت در المنتور، طراحی فرم‌های سایت، ایجاد پالت رنگ‌بندی برای سایت و … بپردازید.
مواردی که در این بخش تنظیم می‌کنید، به‌صورت سراسری در کل سایت شما اعمال می‌شوند. البته ما در این مقاله به جزئیات تمامی این قسمت‌ها نمی‌پردازیم. اما با بررسی برخی از آنها نحوه کار با این قسمت، یعنی دیزاین سیستم در المنتور، برای شما مشخص می‌گردد.
تنظیم فونت در المنتور
در ادامه توضیحات قبلی در این بخش به نحوه تنظیم فونت در المنتور به‌صورت سراسری می‌پردازیم. فونت‌هایی که در این قسمت تنظیم می‌کنید، در تمامی بخش‌ها و صفحات سایت شما در دسترس خواهند بود. بر روی گزینه Global Fonts در زیرمجموعه DESIGN SYSTEM کلیک کنید.
در قسمت جدید در بخش System Fonts می‌توانید ساختار فونت‌های استفاده‌شده در سایت را تعریف کنید. برای انجام کار روی آیکون شبیه خودکار که در کنار نام هر فونت وجود دارد، کلیک کنید تا بتوانید موارد مختلف مانند نوع فونت، اندازه آن، سبک فونت و … را برای آن خانواده فونت تعریف کنید. مثلاً ما برای فونت Primary یا اصلی در سایت، نوع فونت را Telex، وزن فونت را 900 و Style آن را Normal تنظیم کرده‌ایم. تغییرات به صورت لحظه‌ای در قسمت سمت راست صفحه برای شما نمایش داده می‌شود. به همین ترتیب می‌توانید خانواده یا دسته Secondary ، Text و … را نیز به دلخواه خود تنظیم کنید تا فرآیند تنظیم فونت در المنتور تکمیل شود.
حتی می‌توانید سیستم یا دسته‌بندی جدید در ساختار فونت‌های خود ایجاد کنید. برای این کار بر روی گزینه Add Style کلیک کنید. نام دلخواهی به فونت جدید خود بدهید. باز هم به کمک گزینه Edit جزئیات مربوط به این فونت را تعریف کنید.
بعد از پایان کار خود در این بخش، فراموش نکنید که بر روی دکمه Update در ویرایشگر المنتور کلیک کنید تا تغییرات شما ذخیره شوند.
استفاده از فونت در المنتور
اکنون که متوجه شده‌اید دیزاین سیستم چیست و با تنظیم فونت در المنتور به نوعی گامی عملی در این راستا برداشته‌اید، سوال اصلی این است که چگونه باید از این سیستم طراحی‌شده استفاده کنیم؟ به عبارتی وقتی فونت‌های خود را تعریف کردیم، استفاده از فونت در المنتور چگونه است؟
برای پاسخ به این سوال ابتدا با کلیک بر روی علامت ضربدر در کنار عنوان Site Settings که در تصاویر قبلی مشخص است، از بخش تنظیمات خارج شوید.
حال به صفحه اصلی که قصد طراحی آن را دارید، بازگشته‌اید. فرض کنید می خواهید یک Heading برای این صفحه ایجاد کنید. قصد دارید که از فونت Primary برای این Heading استفاده کنید. برای این کار ابتدا ویجت Heading را به صفحه خود وارد کنید. سپس از تب Style در این ویجت در بخش Typography بر روی آیکونی که شبیه کره زمین است کلیک کنید.
با این کار لیست فونت‌های سراسری یا همان Global Fonts برای شما باز می‌شود. گزینه Primary را از میان آنها انتخاب کنید. در تصویر زیر مشاهده می‌کنید که نوع و ابعاد فونت عنوان صفحه تغییر کرده است. این تغییرات مطابق با همان مواردی است که در بخش تنظیم فونت در المنتور در قسمت Site Settings برای نوع Primary تعریف کرده بودید.
رنگ بندی در دیزاین سیستم چیست؟
به غیر از تنظیم فونت در المنتور، همان‌طور که ذکر شد، قابلیت‌های دیگری نیز در همان بخش Site Settings و قسمت‌های مختلف آن وجود دارد. یکی از این ویژگی‌ها Global Colors نام دارد که برای تعیین رنگ بندی سایت و به عبارتی پالت رنگی وب‌سایت شما استفاده می‌شود.
با مراجعه به همان منو و این بار انتخاب گزینه Global Colors به این بخش دسترسی پیدا می‌کنید. درواقع اگر می‌خواهید یکی از شاخص‌هایی را که برای پاسخ پرسش «دیزاین سیستم چیست؟» مطرح می‌شود، به خوبی بشناسید، باید این بخش یعنی رنگ‌بندی سایت را به درستی درک کرده و به شکل مناسب اعمال کنید. ساختار این بخش نیز مشابه همان قسمت تنظیم فونت در المنتور است. یعنی می‌توانید رنگ‌های Secondary ، Primary و … برای سایت خود تعریف کنید. حتی می‌توانید رنگ‌های بیشتری را نیز خودتان اضافه کنید. این کار به‌وسیله گزینه Add Color در این بخش امکان‌پذیر است.
اگر برای انتخاب پالت رنگی وب‌سایت خود مردد هستید، می‌توانید از ابزارهای آنلاین موجود در این زمینه کمک بگیرید. ابزار Coolors یک راهکار ساده و رایگان است که به شما در این زمینه کمک می‌کند.
جمع‌بندی
در این مقاله به پاسخ پرسش «دیزاین سیستم چیست؟» پرداختیم. البته ازنظر تئوری مبحث Design Systems موضوع بسیار مفصل و گسترده‌ای است. هدف ما نیز پرداختن به‌صورت تئوری به این مسئله نبوده است. صرفاً توضیح مختصری جهت آشنایی شما ارائه کردیم. در ادامه مقاله نیز به‌صورت مختصر با توضیح نحوه تنظیم فونت در المنتور و ایجاد سیستم رنگ‌بندی مناسب برای سایت، به شکل عملی موضوع دیزاین سیستم را برای یک وب‌سایت پیاده‌سازی کردیم. اگر به طراحی سایت با المنتور آشنایی ندارید، پیشنهاد می‌کنیم مقاله «ساخت صفحه اصلی سایت با المنتور» را نیز مطالعه بفرمایید.
