آموزش اجرای طرح UI در المنتور

در این جلسه قصد داریم طرح ui صفحه اصلی پروژه را کاملا در برگه‌ساز المنتور اجرا کنیم. این جلسه 4 ویدئو دارد.

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

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

مقدمات پیاده‌سازی طرح UI صفحه اصلی در فیگما

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

دانلود طرح پروژه آژانس خلاقیت پویا در فیگما

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

ساخت صفحه اصلی با المنتور، شروع طراحی نمونه‌کار

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

5/5 - (1 امتیاز)

16 پاسخ

  1. سلام و وقت بخیر
    چحوری میتونم برای کاروسل محصول فیلتر بزارم. میخوام بالای کاروسل دوتا دکمه باشه که روی یکی نوشته باشه زنانه و اون یکی مردانه.
    یه ویجت پیدا کردم ولی توی کوئری ها چون محصولات با هم دسته مشترک دارن با شرط گزاشتن هیچ کودوم نشون داده نمیشه

    1. درود بر شما، وقت بخیر
      یک ویجت جدید در المنتور به اسم taxonomy filter اومده که در جلسه 34 آموزشش دادیم. البته برای کروسل نیست و عمدتا لوپ گرید گزینه بهتری برای آن هست. در واقع کروسل و عناصر اسلایدشو را بهتر است زیاد فیلتر نسازیم ازش.

      موفق باشید.

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

    لطفا راهنمایی کنید

    1. درود بر شما. وقت بخیر
      موقع درج تصاویر در المنتور (در رسانه وردپرس) فایل چندین کیفیت مختلف دارد. آنجا می‌توان کیفیت را روی اندازه کامل گذاشت. ویجت‌های مربوط به تصاویر در المنتور هم چنین تنظیمی را دارند. همچنین اگر افزونه‌ای مختص بهینه‌ساز تصاویر در سایت نصب باشد (مانند اسماش و…) ممکن است تاثیراتی روی تصاویر سایت بگذارند که باید تنظیمات آنها را نیز بررسی کرد.

      موفق باشید.

  3. استاد خسته نباشید چرا طرح های آژانس با ویدئو مطابقت نداره؟ اگه میشه طرح های قبلی بزارید الان همش جدیده

    1. درود بر شما. وقت بخیر
      همان طرح رو اجرا کردیم مهندس. در واقع طرح UI که در دوره UI/UX اجرا کرده بودیم را اینجا پیاده سازی کردیم. نهایتا یک سری تغییرات بسیار جزئی دارد. متوجه نشدم که منظور از طرح قبلی کدام طرح است. البته بعدا بنده بازم طرح می‌زنم و آموزش به هر دو دوره تهیه شده خودم اضافه خواهم کرد.

      موفق باشید.

    1. درود بر شما. وقت بخیر
      بخشی را که می‌خواهید ازش خروجی بگیرید ممکن است چندین لایه داشته باشد. مثلا اگر یک لایه روی یک فریم افتاده باشد در خروجی دیده نمی‌شود (باید آنرا داخل فریم بیاندازیم).

      موفق باشید.

  4. سلام آقای حمداللهی خداقوت. یه سایت فروشگاهی دارم میزنم ایده ندارم نمونه طرح های ui جایی هست من بتونم ببینم و پیاده کنم در سایتم. سایت dribbble رفتم ولی چیزی پیدا نکردم

    1. درود بر شما. وقت بخیر
      توی سایت‌هایی مثل ui8 و behance و pinterest و instagram و حتی تصاویر گوگل هم می‌توان نمونه‌های زیادی را مشاهده کرد.

      موفق باشید.

    1. درود بر شما. وقت شما بخیر.
      خروجی گرفتن webp منظور هست؟ شما با پلاگین webp exporter می‌توانید از هر چیزی داخل فیگما خروجی webp بگیرید.

      موفق باشید.

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

  6. سلام استاد وقت بخیر عکس تیم طراحی رو وقتی میخوام اپلود کنم میزنه این فایل به دلایل امنیتی مجاز نیست

    1. درود بر شما. وقت شما بخیر
      احتمالا فرمت عکس svg هست. البته که فرمت بسیار خوبی هم هست و اتفاقا باید تلاش کنیم اگر فایل وکتوری هست آنرا به png و jpg تبدیل نکنیم. اگر هم وکتوری نیست که از فرمت webp استفاده کنیم. اما موقع آپلود فایل svg یک پیغام از طرف المنتور به شما می‌دهد و بعد از زدن گزینه فعال‌سازی، اجازه آپلود فایل را می‌دهد. اگر به هردلیل به آپلود فایل svg گیر می‌دهد، افزونه safe svg را نصب بفرمایید و بعدش فایل svg خودتون رو آپلود کنید. نصب این افزونه تنظیم خاصی ندارد و صرفا باید نصب و فعال شود.

      موفق باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

متخصصین آژانس نوآوری رسام
فرم درخواست پروژه و مشاوره
تماس با کارشناسان رسام: 09351436045