0 تا 100 موکاپُ یاد بگیر

0

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

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

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

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

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

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

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

موکاپ چیست؟

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

موکاپ چیست؟

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

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

حالا که به خوبی درک کردیم موکاپ چیست ، می توانیم خیلی عمیقتر به کارهایی که امکان انجام آن در ماکاپ وجود دارد بپردازیم.

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

مرحله نهایی طراحی: همانطور که در ابتدای مقاله اشاره کردیم، طراحی یک محصول بخشی از چرخه توسعه آن است که معمولاً در مرحله طراحی اتفاق می افتد. یک 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  را انتخاب کنید.

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

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

نشانی ایمیل شما منتشر نخواهد شد.

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

شاید علاقه‌مند باشید

فهرست

دانلود

لطفا برای دریافت لینک دانلود رایگان دوره اطلاعات خواسته شده را وارد نمایید