Mockup موکاپ چیه و چطوری می‌تونه زندگی طراح سایت رو ساده‌تر کنه؟

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

یعنی با کمترین تلاش ممکن می‌تونین چیزی که قراره بسازین رو مشاهده کنین و خیلی راحت تغییرش بدین و یا اصلاحش کنین!

ما تو دنیایی زندگی میکنیم که باید سریع حرکت کنیم و ایده‌های خودمون رو تا حد امکان انعطاف‌پذیر کنیم و ساختن Mockup ها باعث میشه نتیجه نهایی به بهترین شکل و زودتر از زمان موعد به مشتری نشون داده بشه.

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

موکاپ Mockup چیست؟

موکاپ لغتیه که طراحان وب و گرافیک برای پیش نمایش فایل‌شون استفاده میکنن، موکاپ ها فایل‌های آماده گرافیکی با پسوند PSD هستن که تو موضوعات مختلفی مثل لوگو، کارت ویزیت، پوستر، قالب سایت و غیره استفاده میشن!

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

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

در کل موکاپ بهتون امکان میده تا بهتر بتونین روی طرح، رنگ، سبک، سایز و غیره تصمیم بگیرین.

Fidelity

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

در واقع این عنصریه که مقدار نزدیکی موکاپ با محصول نهایی رو میسنجه! و هرچی Fidelity کمتر باشه یعنی طرحی که شما ارائه میدین هم ساده‌تره، مثلاً تصویر زیر رو ببینین:

و موکاپ با Fidelity های سطح بالا اون دسته از طرح‌هایی هستند که توسط فتوشاپ و با پیکسل عالی، محصول نهایی رو نشون میدن:

البته ما همیشه دنبال روشی میگردیم که به سرعت و به راحتی تصویری از محصول نهایی رو ارائه بده ولی در عین حال دقیق هم باشه!

Wireframe , Design و Prototype در مقایسه با Mockup

خب تو این پارگراف باید یکم سردرگمی‌ها رو از بین ببریم! مثلاً خیلی از افراد از Prototype و Wireframe به جای Mockup استفاده میکنن در حالی که هر کدوم از اون‌ها به چیزهای مختلفی اشاره دارن.

Wireframe به معنای واقعی یعنی ارائه ساختار یه سایت و موکاپ به ویژگی‌های استاتیک سایت شما اشاره داره و این در حالیه که پروتوتایپ نشون دهنده نحوه برخورد کاربر با طراحی سایت است.

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

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

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

رابط کاربری و Mockup

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

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

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

موکاپ و رضایت مشتری

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

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

مزایای موکاپ

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

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

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

چیزی که موکاپ رو دوست داشتنی کرده!

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

نحوه استفاده از Mockup

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

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

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

وقتی از مرحله خلاقیت وارد مرحله تولید شدین، Mockup شما نشون دهنده هدف شماست! این که شما یه رفرنسی داشته باشین و گاهی اوقات بهش برگردین تا چیزهایی رو که یادتون رفته به خاطر بیارین و بدونین در حال تولید چه محصولی بودین، خیلی کمک کننده و مفیده!

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

برای طراحی سایت توسط موکاپ باید موارد زیر رو در نظر بگیرین:

• شناختن کاربر و اهداف او
• موکاپ کردن سایتی که با اهداف کاربر منطبق باشه و نیازهای اون رو رفع کنه
• موکاپ رو به قسمت‌های گسسته‌ای برای کار، تقسیم کنین

برای هر قسمتی باید برین سراغ Mockup همون قسمت و تولید زیر ساخت داده ها، بک اند و فرانت اون قسمت رو شروع کنین.

آموزش استفاده از موکاپ

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

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

اول از همه فایل موکاپ که پسوندش یا PSD یا Tiff هست رو وارد فتوشاپ کنین و بعدش لایه اسمارت رو پیدا کنین (لایه اسمارت همونیه که کنارش یه ایکون کوچولو از یه ورقه تا خورده داره) البته گاهی اوقات هم خود طراح موکاپ روی لایه اسمارت یه نوشته میذاره که خیلی واضح میشه دیگه!

حالا باید روی لایه اسمارت یه کلیک راست کنین تا محتوای اون لایه رو تغییر بدین و با محتوای دلخواهتون پرش کنین، برای این کار بعد از کلیک راست گزینه Edit Content رو انتخاب کنین و بعدش هم روی Thumbnail دوبار کلیک کنین.

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

بعد از این که کار ذخیره شد میتونین نتیجه رو ببینین.

و در آخر…

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

Mockup فقط برای طراحان سایت نیست و هر کسی برای طراحی لوگو، بنر یا هرچیز دیگه‌ای میتونه از این فایل‌ها به راحتی استفاده کنه.

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