وقتی یک اثر جذاب در طراحی خلق میکنیم بهتر است برای شنیدن نظرات مختلف آن را در معرض دید کاربران مختلفی قرار دهیم. پس از طراحی در فیگما بهتر است خروجی نهایی خود را در قالب موکاپ تهیه کنیم تا بتوانیم طرح را با افراد بسیاری به اشتراک بگذاریم. در این قسمت از دوره آموزش طراحی رابط کاربری از آژانس نوآوری رسام قصد داریم به مبحث موکاپ در فیگما و انتشار آن در برخی از پلتفرم‌ها مانند دریبل و اینستاگرام بپردازیم. البته اگر پروژه شما کارفرما دارد باید تحویل پروژه و هنداف را نیز انجام بدهید که در جلسات پیش رو به آن می‌پردازیم. از شما دعوت میکنیم تا پایان این جلسه ما را همراهی کنید.
موکاپ یا Mockup چیست و چرا باید آن را بسازیم؟
فرض کنید یک غذای خوشمزه درست کردید. بدیهی است برای وقتی که گذاشتید ارزش قائل هستید. آنرا در ظرف خوبی قرار می‌دهید و قطعا آنرا تزئین نیز خواهید کرد. پروژه شما نیز چنین خصوصیتی دارد. برای آن وقت و انرژی صرف کردید و قطعا با موکاپ کردن پروژه، فرصت دیده شدن، گفتگو با کارفرمایان و همکاری‌های بیشتر، محیا خواهد شد. موکاپ همان خروجی پروژه شماست اما گاهی با تزئین و اعمال یک سری کارهای ساده گرافیکی، می‌توان آنرا موکاپ و در پلتفرم‌های مرتبط، درج کرد.
برای موکاپ‌کردن، می‌توان از پلاگین و فایل‌های داخل کامیونیتی فیگما، ابزارهای آنلاین و یا حتی طراحی توسط خود طراح، استفاده کرد. پلتفرم‌های دریبل، بیهنس، اینستاگرام، لینکدین و پینترست، برای درج پروژه و نمونه‌کارهای موکاپ شده شما، مناسب هستند.
دریبل یا Dribbble چیست و چه کمکی به ما می‌کند؟
دریبل یک پلتفرم قدرتمند برای نمایش پروژه‌های طراحی شماست. این پروژه‌ها در موضوعات مختلفی بوده و صرفا شامل طراحی ui نمی‌شود. کافی است در دریبل اکانت بسازید و نمونه‌کارهای خود را به اشتراک بگذارید. این برای شما یک فرصت برای کسب پروژه و دیدن شدن خواهد بود. البته به شرطی که روی پروژه خود، از نظر کمی و کیفی، وقت گذاشته باشیم. طراحان معمولا لینک پروفایل دریبل را در رزومه، لینکدین و اینستاگرام درج می‌کنند تا افراد دسترسی به نمونه‌کارهای آنها داشته باشند.
معرفی ابزار و پلاگین برای موکاپ پروژه
با استفاده از سایت‌هایی مثل unsplash.com و pexels.com و جستجوی واژه موکاپ در آنها، می‌توانید تصاویر آماده موکاپ پیدا کنید. وب‌سایت‌های freemockupworld.com و free-mockup.com و mockupworld.co و smartmockups.com نیز ابزارهای آنلاینی هستند که با آنها می‌توانید موکاپ‌های خوبی بسازید. افزون بر این، با جستجوی واژه‌هایی همچون mockup و clay mockup در کامیونیتی فیگما، به موکاپ‌های رایگان و غیر رایگان بسیاری دست خواهید یافت.
همچنین پکیج animocks نیز یک پکیج قدرتمند برای ساخت موکاپ است که در کامیونیتی فیگما وجود دارد. در پلاگین‌های فیگما نیز همان دو عبارت Mockup و Clay Mockup را جستجو کنید. قطعا به موارد بسیاری دست خواهید یافت. با جستجوی واژه‌هایی همچون iphone 14 و حتی ورژن‌های کمتر آن، به موکاپ‌های خوبی در کامیونیتی فیگما، اعم از فایل و پلاگین، دست خواهید یافت.
Clay Mockup چیست و چرا انتخاب خوبی است؟
پلاگینی با نام Clay Mockup در نرم افزار رایگان فیگما وجود دارد. پلاگین خوبی است اما منظور ما اینجا از واژه Clay Mockup صرفا این پلاگین نیست. بلکه منظور، استفاده از موکاپ‌های بسیار ساده و مینیمال است. این نوع از موکاپ، جدید و محبوب است و امروزه بیشتر مورد استفاده طراحان قرار می‌گیرد. در مقابل، موکاپ‌های دیگری وجود دارند که اصطلاحاً realistic بوده و از تصاویر واقعی برای موکاپ استفاده می‌کنند.
هر دو آنها خوب هستند و قصد نداریم بگوئیم که صرفاً از Clay Mockup استفاده کنید. اما امروزه Clay Mockup محبوب‌تر است و بیشتر توسط طراحان مورد استفاده قرار می‌گیرد.
موکاپ و انتشار پروژه در اینستاگرام
ما در جلسه آینده در خصوص طراحی پست و استوری و محتوای اینستاگرامی در فیگما توضیح خواهیم داد. اما در این جلسه، تمرکز ما روی موکاپ پروژه است. چه در اینستاگرام و چه در سایر پلتفرم‌ها. در اینستاگرام تصاویر یا به صورت مربعی یعنی 1080 در 1080 پیکسل و یا به صورت مستطیلی یعنی 1080 در 1350 درج می‌شود. یعنی ارتفاع 25 درصد بیشتر از عرض است. هر دو مرسوم است و استفاده می‌شود.
برای موکاپ کردن پروژه در اینستاگرام، می‌توانیم یک فریم بکشیم و عرض آن را به اندازه تعداد اسلایدهای تصویری بگذاریم. ارتفاع آن را نیز یکی از دو سایز 1080 و یا 1350 که انتخاب آن بستگی به شما دارد که بخواهید پست را مربعی بگذارید یا مستطیلی. وقتی طراحی تکمیل شد، آن را با استفاده از ابزار Slice فیگما (زدن کلیک K)، می‌توانیم قیمه قیمه کنیم و خروجی بگیریم. در تصویر بالا 5 اسلاید وجود دارد که ابتدا یک تکه طراحی و سپس اسلایس می‌شوند و خروجی گرفته می‌شود (در ویدئو آموزشی کامل انجام شده است).
خروجی موکاپ در فیگما و درج در پلتفرم‌های مختلف
پس از تکمیل نهایی طرح خود با استفاده از قابلیت موکاپ در فیگما می‌توانید طرح را در پلتفرم های مختلفی مانند اینستاگرام، دریبل و پینترست بارگذاری کنید. در این صورت می‌توانید از نظرات کاربران نیز مطلع شوید. در این قسمت از دوره طراحی رابط و تجربه کاربری ui ux آموزش موکاپ پروژه در دریبل و اینستاگرام و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید. موفق باشید 😍
معرفی منابع و تمرین برای این جلسه
پلتفرم‌هایی مانند Dribbble و Behance به شما کمک می‌کنند پروژه‌های ui/ux خود را منتشر کنید و به کارفرمایان حساس نشان بدهید و بهترین پروژه‌ها را به امید خدا و با تلاش خودتان بگیرید. پس ویدئو را کامل دیده و مطابق محتوای آن تمرین کنید. پروژه خود را موکاپ و در دریبل منتشر کنید. سه مقاله خواندنی مرتبط هم برای مطالعه بیشتر برای شما درج خواهیم کرد.
https://ruul.io/blog/what-is-dribbble-what-is-the-use-of-dribbble
https://www.nobledesktop.com/classes-near-me/blog/what-is-behance
https://giantcreates.com/design/dribbble-vs-behance-for-designers-in-2024
34 پاسخ
سلام و عرض ادب،
استاد اکانت دریبل رو چطور میشه از ورژن لیمیتد خارج کرد؟
ممنون از شما
درود بر شما دوست گرامی، وقت شما بخیر
می‌توانید از افرادی که اکانت دارند بخواهید براتون دعوتنامه ارسال کنند و در حالت دیگر هم، همین که نمونه‌کارهای خودتان را در آن درج کنید هم در گذر زمان درست میشه.
موفق باشید.
سلام. وقت بخیر.
وقتی میخوایم خروجی بگیریم بعضی از قسمت‌های طرح داخل خروجی نمی‌آید مثل فوتر و آکاردون و… باید چه کار کنیم که بیاد.
درود بر شما دوست گرامی، وقت شما بخیر
برخی کامپوننت‌ها و فریم‌ها ممکن است توی فریم اصلی پروژه قرار نگرفته باشند (مثلا لایه آنها روی فریم افتاده باشد صرفاً). یا از لیست لایه‌ها درستش کنید یا آنها را بیرون بکشید و دوباره داخل فریم بیاورید تا درست بشود.
موفق باشید.
سلام و عرض ادب، استاد پروژه شرکتی از دوره قبل در دسترس هست تو این دوره؟ اگه نه امکانش هست برای این آموزش و وردپرس پروژه شرکتی رو در دسترس قرار بدید؟ خیلی به این مدل طرح ها برای تمرین و یادگیری نیاز داریم
درود بر شما دوست گرامی، وقت شما بخیر
هم پروژه جدید (گلدونی) و هم پروژه قبلی (آژانس خلاقیت پویا) در فیگما هست فایل کاملش. figma.com/@hamdollahi. از این لینک بردارید. ویدئوهای دوره قبلی هم اگر مدنظر داشتید در یوتیوب هست.
موفق باشید.
سلام. تشکر میکنم بابت آموزش‌های فوق‌العادتون امیدوارم همیشه سلامت و موفق باشید.
سوالی داشتم در رابطه با پلتفرم دریبل، می‌خواستم بدونم جریان داشتن دعوت نامه برای فعالیت توی دریبل چی هست دقیقا؟
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم از لطف و همراهی شما. خوشحالم که مفید بوده است. شاد و سلامت باشید همیشه. از کسی که در دریبل اکانت تائید شده دارد می‌توانید درخواست کنید برای شما دعوتنامه بفرستد چون در حالت پیشفرض، وقتی در دریبل نمونه‌کار اول رو درج بفرمائید ممکن است عمومی نشود. البته اگر فعالیت شما بیشتر بشود خودش تائید می‌کند. بنابراین اگر دعوتنامه هم نیافتید نگرانش نباشید. فعالیت خود را ادامه بدهید و نمونه‌کار را درج کنید. آن موضوع درست خواهد شد.
موفق باشید.
سلام استاد وقتتون بخیر
یه سوالی برام پیش اومد این که در واقع ما توی این بخش، عکس سایتمون رو با روش‌های مختلف در سایز مورد نظر پلت‌فرمی که میخوایم طراحی میکنیم تا به اشتراک گذاشته بشه، حالا سوال این که با برنامه‌های دیگه که داخل موبایلم زیاد هستند یا حتی با فتوشاپ، اینشات و… هم میشه این کار رو انجام داد؟
درود بر شما. وقت بخیر
من کمتر با آن دسته از نرم‌افزارها کار کردم. ولی فکر کنم آنها هم تنظیماتی داشته باشند برای انتخاب اندازه. در فتوشاپ که داریم و هست و می‌توان آرت‌بُرد را با اندازه مدنظر بسازیم. در اینشات هم به‌نظرم وجود دارد.
موفق باشید.
سلام و خسته نباشید. من وقتی فریم دریبل که 1600 پیکسل هست رو خروحی میگیرم از فیگما سایز عکس خروجی کوچیکتر میشه یعنی حدقل 500 پیکسل! چطور باید این مشکل رو حل کرد؟
درود بر شما. وقت بخیر
برای شات دریبل اصلا فریم رو خودتون هم می‌توانید رسم کنید و نیازی نیست الزاماً از لیست فریم‌ها بردارید. عرض: 1600 و ارتفاع: 1200 هستش. برای خروجی فیگما هم میشه با نسبت‌های کیفیت بالاتری مانند 2x هم خروجی بگیرید که عکس رو انداختید در شات دریبل، خیلی کوچک نشه. اگر پروژه شما وب باشه که قطعا 500 نیست عرضش. دست کم 1440 هست در دسکتاپ. در موبایل هم که مابین 360 تا 460 اغلب طراحی می‌شود که گاهی در شات دریبل و موکاپ، هر دو را هم می‌گذارند.
موفق باشید.
فکر میکنم درست منظورم رو نرسوندم. سایز خروجی فیگما حتی در 2x و بالاتر کوچیکتر از اندازه‌ی فریم میشه. مثلا وقتی فریم 1600 در 4000 پیکسلی رو خروجی میگیرم عکسی که بهم میده سایز کوچک تریه
درود بر شما. وقت بخیر
به طور کل اگر اون اندازه 1x و 2x و… رو تغییر نداده باشیم، هر فریمی را که انتخاب کنیم و خروجی بگیریم، در همان اندازه خروجی را به ما می‌دهد. مگر اینکه مثلا فریمی روی فریم مدنظر افتاده باشد و یا مواردی از این دست.
موفق باشید.
سلام استاد باورم نمیشه کم کم داره تموم میشه خیلی خوش گذشت این مدتی که بین کارام کاراموزیای بیمارستان و دانشگاه دوره شمارو میدیدم و لحن و لفظ مودبانه شمارو الگوی خودم قرار دادم
یه سوال از این جلسه داشتم وقتی موکاپ از سایتای دیگه دانلود میکنیم باید توی فوتوشاپ نمونه کار رو تنظیم کنیم روش؟
درود بر شما. وقت بخیر
سپاس از لطف و همراهی شما. امیدوارم مفید واقع بشود. عالی هست که حتی در شرایط سخت تحصیل و کار هم، موفق شدید باز هم موضوع دیگری را هم بیاموزید و جلو ببرید.
برخی موکاپ‌ها ممکن است فرمت psd داشته باشند. در این شرایط بله. برخی از موکاپ‌ها هم که در کامیونیتی فیگما هستند و یا پلاگین فیگما هستند. این موارد هم که به راحتی قابل استفاده در فیگما است. فرمت‌های ai و eps هم اگر بودند که بایستی با استفاده از نرم‌افزار ایلاستریتور آنها را ویرایش کنیم و خروجی مدنظر را بگیریم.
موفق باشید.
سلام و خسته نباشید
چطور انیمیشن ها و پروتوتایپ رو به صورت ویدیو یا گیف خیره کنیم برای انتشار در سوشال مدیا؟
درود بر شما. وقت بخیر
هم یک سری پلاگین وجود داره که به شما خروجی این مواردی که فرمودید رو میده. هم ابزارهای آنلاینی وجود داره مختص این کارها. مثلا سرچ کنید آموزش Jitter. ویدئو فارسی هم ازش هست. دیگه فراتر از اینها می‌توان از افترافکت و… نیز استفاده کرد.
موفق باشید.
ممنون ولی jitter انگار خودش انیمیشن میسازه. منظورم اینه ما پروتوتایپی ساختیم که انیمیت داره توش مثلا همون چیزایی که در قسمتای قبلی یاد دادین برای اینتراکتیو کامپوننت ها. حرکت اینارو میخوایم مثلا در قالب یه پست اینستاگرام نشون بدیم. میدونم میشه اسکرین ریکورد کرد ولی راه دیگه ای نداره؟
درود بر شما. وقت بخیر
برای همین موضوعی که فرمودید هم یک سری پلاگین فیگمایی هست. البته خب به هر حال گاهی آن طور که می‌خواهیم ممکن است پروژه دلچسب نشود.
موفق باشید.
با سلام و وقت به خیر
تشکر و سپاس فراوان بابت تدریس و نکات بی نظیرتون
درود بر شما. وقت بخیر
سپاسگزارم از لطف و مهربانی شما. امیدوارم کمک‌کننده باشد.
موفق باشید.
درورد بر شما محبت میکنید استاد اسم پلاگین ها یی که خروجی ویدیو میدهند رو بفرمایید؟
درود بر شما. وقت بخیر
موارد متفاوتی هست. مثلا این پلاگین را بررسی بفرمائید: Export Video Frames
این لینک را هم ببینید. پلاگین های مرتبط با ویدئو در فیگما هستن. مثلا Jitter هم مناسب هست بررسی کنید.
figma.com/community/tag/video/plugins
موفق باشید.
سلام استاد ممنون از آموزش خوبتون. میشه راهنمایی بفرمایید از پروتوتایپ هایی که در فیگما میسازیم چطور میتونیم خروجی بگیریم؟ و در سایت واقعی از آن ها استفاده کاربردی داشته باشیم؟
درود بر شما. وقت بخیر
یک سری پلاگین فیگما هست برخی خروجی ویدئو هم به شما میدهند. البته این راهکار برای زمانی هست که می‌خواهید آن خروجی را مثلا در سایت یا رسانه‌های اجتماعی مدنظر خودتان منتشر کنید. قاعدتا خروجی front نمی‌دهد. البته فکر کنم منظور شما نیز همان مورد اول بود اگر درست درک کرده باشم فرمایش شما رو.
موفق باشید.
مرسی استاد ممنون برای راهنمایی و معرفی ساخت موکاپ
درود بر شما. وقت بخیر
سپاس از همراهی شما.
موفق باشید.
خیلی ممنون از تدریس بینظیرتون
درود و سپاس از لطف شما خانم حسینی
موفق باشید.
با سلام و احترام
تشکر بی نهایت از آموزش عالی و بیان روان ، ساده و نکات مفید و کاربردی، لطفا در مورد کیس استادی توضیحات و ویدیو قرار دهید .
باتشکر فراوان
درود بر شما. وقت شما بخیر
سپاس از شما.
چشم. در بروزرسانی های دوره که در آینده اضافه خواهم کرد، حتما بخشی را به این موضوع اختصاص می‌دهم.
موفق باشید.
سلام خسته نباشین.
ممنون از دوره خوبتون
ببخشین ، ما اگه بخواهیم این موکاپ ها رو به صورت ویدیو درست کنیم ابزاری هست؟
درود بر شما، وقت بخیر
می توان از افترافکت استفاده کرد. اما خب پلاگین‌هایی هم وجود دارد. عبارت export video را در پلاگین‌های فیگما جستجو بفرمایید. البته قابلیت‌های آنها متفاوت است. ممکن است برخی از آنها چیزی که می‌خواهیم نباشد. بنابراین اگر بخواهیم خیلی خاص و حرفه‌ای ادیت ویدئویی بزنیم و افکت و موکاپ ویدئویی اضافه کنیم، بدیهی است که افترافکت کمک بیشتری می‌کند.
موفق باشید.