طراحی موکاپ و تفاوت آن با وایر فریم

طراحی موکاپ

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

طراحی موکاپ وب سایت چیست؟

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

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

در حالی که شما میتوانید فایل های موکاپ خودتان را ایجاد کنید، گزینه های زیادی برای دانلود وجود دارد. اکثر این قالب ها به عنوان فایل های PSD با استفاده از لایه ها و اشیاء هوشمند برای ایجاد طرح نهایی ایجاد می شوند، در حالی که خواص بصری فایل را حفظ می کنند. این کار مفید است هنگام استفاده از یک قالب با استفاده از یک جهت جالب مانند ۳D یا نمای پرسپکتیو باشد.اکثر قالب های موکاپ وب شامل ترکیبی از تصاویر برداری و رستِر می باشند، بنابراین با توجه اکسپورت کنید. شما می خواهید مطمئن شوید که تصویر وبسایتتان به همان اندازه خوب است که قبل از نمایش آن بود.

نحوه تنظیم یک قالب موکاپ

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

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

?فایل زیپ دانلود را باز کنید و تأیید کنید که تمام قطعات لازم را دارید: یک فایل PSD با قالب قابل ویرایش، یک JPG که به شما نشان می دهد که چه طراحی باید صورت گیرد (اختیاری) و یک فایل اطلاعاتی یا readme همراه با هر اطلاعات لایسنس و راهنما.

?فایل PSD را در فتوشاپ باز کنید و لایه ها را نگاه کنید. برای لایه ای که می گوید “طرح خود را در اینجا بکشید” یا مشابه (به دنبال یک لایه ای است که همیشه با این دستورالعمل تفاوت دارد!)

?آن لایه را دو بار کلیک کنید تا آن باز شود.

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

?کپی و چسباندن و یا کشیدن و رها کردن تصاویر یا محتوا خود درلایه مناسب، تغییر اندازه در صورت نیاز برای پر کردن فضا.

?بزنید Ctrl-S یا Cmd-S برای ذخیره لایه هوشمند، سپس به تصویر اصلی بازگردید.شما باید تصویرصفحه جدید خود را در قالب موکاپ ببینید.

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

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

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

• پیشنمایش طرح ها برای مشتریان
• آماده سازی بازاریابی و تبلیغات پس از راه اندازی
• قراردادن در کاغذهای چاپی
• هنگامی که شما قصد دارید تا طرح نهایی را نشان دهید، یک مسابقه ثبت قراردهید

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

وایر فریم چیست؟

وایرفریم یک مرحله مهم در هر فرایند طراحی وب سایت است. در طرح‌های پیچیده و بزرگ از این روش برای تعیین بخش‌های مختلف استفاده می‌شود تا معلوم شود صفحات و عناصر در کجا و با چه هدفی در طراحی به کار روند. وایر فریم یا طرح اولیه وبسایت طرح‌بندی (layout) صفحه وب است که نشان می‌دهد چه عناصر رابطی بر روی صفحه اصلی و سایر صفحات وب سایت وجود خواهند داشت. هدف وایرفریم ارائه ساختار بصری پایه است که قرارگیری عناصر مختلف یک صفحه وب را نشان می‌دهد. به عبارت دیگر یک طرح کلی از طرح بندی صفحه وب است که به فرایند طراحی و توسعه وبسایت کمک می‌کند. وایرفریم می‌تواند با استفاده از ابزارهای/نرم‌افزارهای در دسترس موجود ایجاد شود و هدف آنها این است که منجر به ایجاد یک وبسایت مؤثر شود.

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

طراحی موکاپ یک روش بصری در نمایش محصول است. در حالی که وایرفریم عمدتا ساختار محصول را نشان می دهد، یک موکاپ نشان دهنده ظاهر محصول است. با این حال، موکاپ ویژگی های عملکردی محصول را ندارد (درست مانند وایرفریم) مثلا کاربر نمی تواند روی دکمه ها کلیک کند و تنها ظاهر آن ها را خواهد دید. بر خلاف وایرفریم، موکاپ یک نمایش با کیفیتhigh-fidelity یا با کیفیت متوسط و واقعی تر از طراحی است. مثلا یک دکمه در وایرفریم صرفا با یک چهارچوب و یک نوشته نشان داده می شود اما در طراحی موکاپ جزئیات آن مانند رنگ، سایه، گردی گوشه ها و… نمایش داده می شوند.وایر فریم ویژه طراحی سایت است و دید کلی تری از طراحی UI به دست می دهد. همچنین این موارد UX را نیز شامل می شود. در حالیکه mockup بیشتر شامل جزئیات بصری مثل رنگ، اندازه، تایپوگرافی و… می باشد.  بهتر است ابتدا وایرفریم را طراحی کنیم و بعد از تایید نهایی سراغ طراحی موکاپ برویم تا به طرح دقیق‌تری از سایت برسیم.