با المنتور، ایدهٔ صفحه‌ات رو قدم‌به‌قدم بساز؛ از چیدن متن و تصویر تا تنظیم فاصله‌ها و نمایش موبایل. اینجا سراغ آموزش‌های کاربردی می‌ریم تا هم ابزارها رو بشناسی و هم صفحه‌هایی طراحی کنی که مرتب، خوانا و راحت برای استفاده باشن.
برای یاد گرفتن المنتور، یک صفحهٔ واقعی انتخاب کن؛ مثلاً معرفی یک خدمت با عنوان، توضیح، تصویر و دکمهٔ تماس. همین ترکیب ساده، فرصت خوبی برای تمرین چیدمان، اندازه‌ها، فاصله‌ها و نمایش موبایله. وقتی این بخش رو درست ساختی، اضافه کردن بخش‌های بعدی هم قابل‌فهم‌تر می‌شه.
قبل از شروع، متن و تصویر اولیه رو آماده کن. طراحی با محتوایی نزدیک به نسخهٔ نهایی کمک می‌کنه زودتر متوجه بشی عنوان کجا می‌شکنه، توضیح چقدر فضا می‌گیره و دکمه در چه جایی بهتر دیده می‌شه.
هر بخش باید یک کار روشن انجام بده؛ معرفی، توضیح مزیت، نمایش نمونه‌کار یا دعوت به اقدام. ترتیب این بخش‌ها رو قبل از درگیر شدن با رنگ و سایه مشخص کن.
بعد، عناصر مرتبط رو کنار هم قرار بده. مثلاً عنوان، توضیح و دکمهٔ یک معرفی، یک گروه هستن و تصویر می‌تونه کنار اون‌ها قرار بگیره. برای ساختار صفحه هم اسم‌های قابل‌فهم انتخاب کن تا بعداً بین چند کانتینر بی‌نام دنبال یک دکمه نگردی.
اگر دو عنصر به هم مربوط هستن، فاصله‌شون معمولاً باید از فاصلهٔ دو بخش مستقل کمتر باشه. این رابطه کمک می‌کنه کاربر بدون فکر کردن، گروه‌های محتوا رو تشخیص بده.
برای جابه‌جا کردن هر عنصر، بلافاصله سراغ فاصله‌های منفی و موقعیت‌دهی دستی نرو. اول عرض، جهت چیدمان و تراز گروه رو بررسی کن. ممکنه مشکل با اصلاح ساختار اصلی حل بشه و نیازی به چند تنظیم جداگانه نباشه.
برای عنوان‌ها، متن‌ها و دکمه‌ها چند انتخاب مشخص داشته باش. وقتی هر دکمه اندازه و رنگ متفاوتی داره، تشخیص اقدام اصلی صفحه سخت‌تر می‌شه.
یک بخش نمونه رو کامل کن و بعد از همون قواعد در بخش‌های بعدی استفاده کن. اگر برای اصلاح ظاهر از CSS کمک می‌گیری، برای بخش موردنظر کلاس مشخص بذار و محدودهٔ تغییر رو روشن نگه دار تا نتیجه در قسمت‌های دیگر سایت قابل پیش‌بینی باشه.
بعد از ساخت هر بخش، نمایش تبلت و موبایل رو هم ببین. عنوان هنوز خواناست؟ تصویر جای زیادی گرفته؟ ترتیب متن و تصویر مناسبه؟ دکمه از عرض صفحه بیرون نزده؟
المنتور برای بسیاری از تنظیمات، کنترل جداگانهٔ دستگاه‌ها دارد؛ این گزینه‌ها با آیکون دستگاه مشخص می‌شن. جزئیات این کار در راهنمای رسمی ویرایش ریسپانسیو المنتور توضیح داده شده.
پیش‌نمایش ویرایشگر رو با بررسی صفحهٔ واقعی روی گوشی تکمیل کن. منو رو باز کن، روی دکمه‌ها بزن و اگر فرم داری، یک بار مسیر تکمیل اون رو امتحان کن.
برای هر اسلایدر، انیمیشن یا ابزار اضافه، بپرس چه کمکی به بازدیدکننده می‌کنه. اگر پاسخ روشنی نداری، فعلاً حذفش کن و روی متن، چیدمان و مسیر استفاده تمرکز کن.
برای تمرین بعدی، یک لندینگ پیج کوچک بساز. ابتدا هدف و محتوای اون رو مشخص کن، بعد نسخهٔ دسکتاپ و موبایل رو طراحی کن. اگر در مدیریت صفحه‌ها و تنظیمات پایه مشکل داشتی، آموزش‌های وردپرس نقطهٔ برگشت مناسبی هستن؛ برای بهتر شدن تصمیم‌های طراحی هم سراغ مطالب UI UX برو.
بین خدمات، مقاله‌ها و آموزش‌های سبک‌تر جست‌وجو کن.
