موکاپ چیست؟

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

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

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

کاربرد موکاپ ها و علت استفاده از آن‌ها

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

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

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

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

انواع موکاپ ها

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

                         
• Wireframe اولین نوع از تصاویر پیکرنما است. این نوع از mockup، تصویری از ارائه نهایی است که صرفا نماینده چهارچوب کلی طرح نهایی است. به بیان ساده‌تر، wireframe تصویری است که جز برچسب‌های خالی چیزی در آن دیده نمی‌شود. این برچسب‌ها به منظور نمایاندن شماتیک کلی کار و تناسب سایز‌ها به صاحب سفارش تحویل داده می‌شود. بسیاری بر این عقیده هستند که wireframe، در حقیقت mockup محسوب نمی‌شود. اما چرا؟ دلیلش ساده است، چون براساس تعاریف، mockup به نمونه‌ای گفته می‌شود که تصویر دقیقی از طرح نهایی ارائه دهد، این در حالی است که تصویر ارائه شده توسط wireframe به هیچ عنوان دقیق نیست.
                            
• نوع دیگر پیکرنماها در دسته picture قرار می‌گیرند. دسته picture شامل تصاویری دو بعدی است که ممکن است به صورت دستی یا دیجیتال طراحی شده باشند.
• دسته دیگر موکاپ‌ها، شامل نمونه‌های hardcoded هستند. نمونه‌های پیکرنمای موجود در این دسته، تقریبا هیچ فرقی با نمونه‌های نهایی ندارند. تنها تفاوت این دسته از مدل‌های پیکرنما با نمونه‌های نهایی، در hardcoded بودن آن‌ها است.
                            
• دیگر دسته mockupها، مدل‌های prototype هستند. این مدل‌ها قالبا روی کاغذ پیاده می‌شوند و حالت ماکت دارند. این ماکت‌ها می‌توانند دو بعدی یا سه بعدی باشند.
• دوقلوهای دیجیتالی، دیگر اشکال مدل‌های پیکرنما هستند. این مدل‌ها، شامل تصاویری کاملا سه بعدی هستند که می‌توان آن‌ها را به صورت کلی زیر و رو کرد. گاهی می‌توان دسترسی افراد به این مدل از پیکرنماها را به وسیله جایگیزین نمودن آن‌ها با طرح‌های انیمیشنی کاهش داد. این طرح‌ها به جای فراهم کردن امکان جست‌وجو برای سوم شخص، به صورت خود به خودی زیر و بم یک پروژه را به نمایش درمی‌آورند. حواستان باشد که در ارائه طرح انیمیشنی صداقت به خرج داده و هر آن چه در پروژه نهایی حاصل می‌شود را به تصویر بکشید. در غیر این صورت طراحی mockup برایتان بی‌فایده خواهد بود و حتی ممکن است به شکل یک اضافه کاری بیهوده دربیاید.

اهمیت استفاده از موکاپ ها

زمانی که وقت طراحی وبسایت می‌رسد، هیچ چیز نمی‌تواند اذیت کننده‌تر از توضیح دیدگاهتان به مخاطب، بدون کمک گرفتن از راهنمای تصویری باشد. اهمیت وجود MOCKUP، در همان ابتدای فرایند طراحی خودش را نشان می‌دهد؛ درست وقتی که مشغول هم‌فکری با سفارش دهندگان هستید و می‌خواهید به یک دیدگاه مشترک پیرامون طرح نهایی برسید. حتی اگر خودتان هم صاحب کار باشید و پای شخص ثالثی در میان نباشد، طراحی پیکرنما می‌تواند چراغ راهتان باشد. اگر مشغول طراحی وبسایت باشید، طراحی موکاپ بیشتر از همیشه اهمیت پیدا می‌کند. با این حال، انواع نمونه موکاپ نه فقط برای طراحی وب سایت ها، بلکه برای ارائه طرح نهایی برندها و همچنین طراحی بسته بندی محصولات نیز کاربرد دارند.

فرمت فایل های موکاپ

همانطور که بالاتر توضیح دادیم، فایل‌های پیکرنما را می‌توان در دو فرمت وکتور و فتوشاپ مورد استفاده قرار داد.

اگر پیکرنمای انتخابی شما از جنس وکتور باشد، می‌توانید آن را به کمک نرم‌افزاری مانند Adobe Illustrator ویرایش کنید. برای شناسایی فایل‌های وکتور، کافی است به پسوند آن‌ها دقت کنید. اگر فایلی که در دست دارید پسوندهایی مانند wmf، ai و EPS داشته باشد، فایل مد‌نظر از جنس وکتور است. با باز کردن این فایل‌ها در نرم‌افزارهای ویرایش مربوطه، می‌توانید فایل لایه باز آن‌ها را مشاهده کنید. لایه باز بودن فایل، امکان تغییر رنگ، حذف المان‌ها، جابه‌جایی طرح و البته قرار دادن طرح خودتان در دل mockup را برایتان فراهم می‌کند. در صورت ادیت فایل‌های وکتور در نرم‌افزارهای برداری، می‌توانید آن‌ها را بدون هرگونه افتی در کیفیتشان مشاهده کنید.

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

فایل‌های موکاپ با چه ابزارهایی طراحی و ویرایش می شوند؟

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

چگونه می‌توان به صورت آنلاین موکاپ طراحی کرد؟

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

نحوه ی کار با موکاپ در محیط فوتوشاپ

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

با دسترسی به لایه مد‌نظر، می‌توانید هر تغییری که دوست دارید در لایه مد‌نظرتان ایجاد کنید. حواستان باشد که پس از ایجاد تغییرات مد‌نظرتان، با فشردن دکمه کنترل+s، تغییراتی که ایجاد کرده‌اید را ذخیره کنید.

مزایای استفاده از موکاپ

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

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

معایب استفاده از موکاپ

بیایید نگاهی به مجموعه معایب استفاده از طرح‌های پیکرنما داشته باشیم:

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

چند نمونه موکاپ

در ادامه چند نمونه موکاپ را مشاهده خواهید کرد.

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

این نمونه نماینده فایلی است که بر روی بیلبورد پیاده می‌شود.

این نمونه برخلاف انواع رایج mockup، به کلاژ شباهت دارد. این نمونه از فایل‌های پیکرنما را prototype می‌نامند.

آن چه در این تصویر مشاهده می‌کنید، نمونه‌ای پیاده سازی طرح یک کمپانی بر روی قوطی‌های نوشابه است.

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

سخن پایانی

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

منبع:

www.justinmind.com/blog/website-mockup