خب همانطور که از عنوان مقاله مشخص است، امروز قصد داریم که به صورت کامل و جامع به مبحث Mockup یا Mock-up بپردازیم. باید خاطر نشان کنیم که تهیه و تولید این مقاله به دلیل درخواست کاربران و همراهان همشگی ما در اینستاگرام sundaylearning می‌باشد.

در این مقاله قرار است که به مباحث ذیل بپردازیم:

1. موکاپ چیست؟
2. چرا باید از موکاپ استفاده کنیم؟
3. اموزش استفاده از فایل موکاپ در فتوشاپ
4. انواع موکاپ
5. تفاوت موکاپ با wireframe
6. نحوه استفاده از mockup

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

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

موکاپ چیست؟

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

 

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

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

 

ویدیو از سایت renderforest

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

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

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

بطور کلی می توان دلیل نیاز به استفاده از موکاپ ها را در موارد ذیل خلاصه کرد:

• به تجسم یک هدف نهایی کمک می کند.
• یک تیم متحد ایجاد می کند.
• باعث جذب سرمایه گذارن می شود.
• به مشتریان در تصمیم گیری برای خرید کمک می کنید.

انواع موکاپ در فتوشاپ و کاربرد آنها:

اکنون می دانیم موکاپ ها برای چه اهدافی استفاده می شوند، حال در این قسمت می خواهیم به انواع مختلفی از محصولات که می توانند از mock-upها استفاده کنند اشاره کنیم:

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

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

 

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

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

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

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

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

ساخت موکاپ با چه نرم افزارها و ابزارهایی ممکن است؟

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

1. Adobe Photoshop: فتوشاپ یک ابزار قدرتمند برای طراحی است و به شما این امکان را می دهد که هر پیکسل از یک تصویر را دستکاری کنید. در مورد ساخت موکاپ، فتوشاپ ابزار قدرتمندی است که می توان با استفاده از آن جهت تولید یک تصویر واحد از رنگ ها و سایه ها و تصاویر مختلف استفاده کرد.
2. Adobe Illustrator: از آنجایی که ایلاستریتور از وکتورها استفاده می کند، می توانید طرح خود را بدون نگرانی در مورد تراکم پیکسل و یا وضوح ضعیف بزرگ کنید. این یک ویژگی عالی برای طراحی لوگو، فونت و … است.
3. Figma : از فیگما برای طراحی اپلیکیشن ، بازی و… استفاده می شود. از آنجا که Figma یک برنامه آنلاین است، نمایش پروژه ها و فایل ها در نمای اختصاصی انجام می شود و همانند اسکچ  از چندین صفحه در هرفایل پشتیبانی می کند. به عبارتی دیگر این ابزار برای تولید یک UI اپلیکیشن و یا طرح بازی موبایل و …  می باشد.
4. Sketch : یک برنامه طراحی دیجیتال است که هر فردی در حرفه ی UI به آن نیازمند است. این ابزار طراحی مبتنی بر بردار و یا وکتور است که با استفاده از این ابزار بدون از دست دادن وضوح تصویر به راحتی می توانید سایز هر آن چیزی ‌که ترسیم کرده اید را تغییر دهید، در واقع این ابزار کاربردی طراحان، جایگزین فتوشاپ شده است. در sketch سایز و حجم فایل ها و تصاویر به دلیل وکتوری بودن آن کم است.
5. Adobe xd : این نرم افزار هم از سری نرم افزار های شرکت Adobe می باشد، و کار با این نرم افزار همانند سایر نرم افزار های ادوبی راحت است. Adobe xd ابزار های وکتور، را برای ایجاد نمونه های اولیه رابط کاربری ارائه می دهد. این نوع طرح ها به راحتی توسط توسعه دهندگان و برنامه نویس ها کاربرد دارد.

تفاوت بین Mockup و wireframe چیست؟

wireframe چیست؟

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

و اما به برخی از تفاوت های این دو مورد می پردازیم:

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

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

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

4 – وایرفریم ها اغلب به عنوان طرح اسکلتی وب شناخته می شوند که نمایانگر طرح اولیه هر صفحه بدون تمام عناصر تکمیل شده است. Microsoft Visio و OmniGraffle عمومی ترین ابزارهایی هستند که به طور خاص برای تولید وایرفریم استفاده می شوند، در حالی که برخی از طراحان غیر حرفه ای از PowerPoint یا Keynote برای تهیه آن استفاده می کنند. با این حال، رایج ترین ابزارهای مورد استفاده برای تولید آن عبارتند از Balasmiq، Axure، UXPin، و غیره. ابزارهای تخصصی در وایرفریم موبایل عبارتند از Marvel و Flinto. برای ساخت ماکاپ از ابزارهایی مانند Mockplus، Mockflow، و غیره  استفاده می شود.

نحوه استفاده از موکاپ در فتوشاپ:

حال پس از دانلود یک موکاپ؛ چگونه می توانیم طرح خود را بر روی آن نمایش بدهیم؟؟

بعد از اینکه Mock-up دانلودی خود را در فتوشاپ اجرا کردید، در پنل Layer  ،یکسری لایه هایی را مشاهده خواهید کرد. برای نمایش طرح خود بر روی ماکاپ باید به سراغ لایه هایی که اسمارت آبجکت هستند برویم. برای درک هر چه بیشتر شما عزیزان در ادامه نحوه استفاده از موکاپ را بصورت تصویری آموزش داده ایم:

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

همانطور که در پاراگرف قبل گفتیم باید همیشه به یاد داشته باشید که در موکاپ ها فقط لایه هایی که اسمارت آبجکت هستند را باید تغییر داد.

 

داخل پنل Layer  دو لایه اسمارت آبجکت وجود دارد که در عکس ذیل با علامت ضربدر قرمز مشخص شده است:

خب حالا روی لایه box right artwork دابل کلیک می کنیم تا لایه اسمارت آبجکت ما در یک پنجره جدید باز شود :

 

 

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

• از منوی file  گزینه place embed  را انتخاب کنید تا بتوانید عکس طرح مورد نظر خود را وارد کنید.
• سپس بعد از جایگذاری عکس ، کلیدهای ترکیبی  ctrl + s  را از روی کیبورد انتخاب کنید.
• حال به پنجره اصلی که طرح موکاپ قرار دارد بروید تا مشاهده کنید که عکس شما جایگزین عکس قبلی شده است.

 

 

برای جایگذاری عکس طرح خودمان در قسمت ساید کناری پک بسته بندی ، باید همانند مراحل قبل عمل کنیم:

• بر روی لایه SPINE ARTWORK دابل کلیک کنید.
• از منوی file  گزینه place embed  را انتخاب کنید تا بتوانید عکس طرح مورد نظر خود را وارد کنید.
• سپس بعد از جایگذاری عکس ، کلیدهای ترکیبی  ctrl + sرا از روی کیبورد انتخاب کنید.
• حال به پنجره اصلی که طرح موکاپ قرار دارد بروید تا مشاهده کنید که عکس شما جایگزین عکس قبلی شده است.
• سپس برای گرفتن یک خروجی جهت ارائه به کارفرما ، کافیست به به منوی File رفته و گزینه save  و انتخاب پسوند .jpg  را انتخاب کنید.

جمع‌بندی:

مقاله موکاپ در اینجا به پایان رسید و امیدواریم که برای شما عزیزان مفید بوده باشد. نظرات ، سوالات و اگر درخواست ساخت آموزش یا مقاله ای را دارید، در کامنت حتما برای ما بنویسید و همچنین اگر به دنبال مجموعه ای کامل از موکاپ های عنوان شده در مقاله (موکاپ بیلبورد ، موکاپ پوستر و … ) هستید ، باید بگوییم که گروه کمپرس این مجموعه جامع و کامل را جمع آوری و در اختیار شما عزیزان قرار داده است.

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

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

سوالات متداول:

آیا امکان خرید اقساطی دوره جامع فتوشاپ وجود دارد؟

بله، گروه کمپرس کو برای اشخاصی که توان پرداخت کامل هزینه دوره فتوشاپ را ندارند؛ خرید اقساطی از  1 تا 7 ماه بدون چک و سفته در نظر گرفته است.

آیا  دوره جامع فتوشاپ پشتیبانی دارد؟

بله، گروه کمپرس کو 24 ساعته در خدمت شما عزیزان میباشد.

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

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

آیا دوره گام به گام فتوشاپ همانند نامش کامل و جامع است؟

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