در بین مشتریان طراحی وب‌سایت یا اپلیکیشن و حتی برخی از طراحان وب، هنوز کسانی هستند که با اصطلاحات wireframe و prototype و mockup آشنایی کافی ندارند و اغلب به‌اشتباه به‌جای هم استفاده می‌کنند. آن‌ها فرض می‌کنند که تمام این کلمات به یک‌چیز اشاره می‌کنند: یک تصویر خاکستری و دارای چند جعبه که یک ایده خلاقانه را به‌صورت، طرح اولیه یا Sketch نمایش می‌دهند. متأسفانه عدم آشنایی با این مفاهیم باعث می‌شود تا کارفرمایان و طراحان سایت (خصوصاً طراحان تجربه کاربری) یک زبان مشترک نداشته باشند و از هم انتظارات نا به‌جایی داشته باشند.

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

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

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

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

,ووایر فریم یا Wireframe ، تصویری است با وفاداری کم (حداقل جزئیات) از سایت، اپلیکیشن و یا هر محصولی دیگر، است که باید به‌وضوح موارد زیر را نشان دهد:

• گروه اصلی محتوا (چرا؟)
• ساختار اطلاعات (کجا؟)
• توضیح و تجسم عمومی تعاملات کاربر

هرچند که ممکن است در ظاهر به نظر برسد که Wireframe مجموعه‌ای از جعبه‌های خاکستری بی‌معنی است، اما در حقیقت وایر فریم، ستون فقرات طراحی شماست و فراموش نکنید که در آن تمامی قسمت‌های بااهمیت محصول نهایی، نشان داده می‌شود.
در طراحی وایر فریم جزئیات نشان داده نمی‌شود و فقط به کلیات و تفکیک بخش‌های اصلی خلاصه می‌شود. اگر یک نقشه شهر را در نظر بگیرید، می‌بینید که در آن کوچه‌های به ساده‌ترین شکل نمایش داده‌شده‌اند و خبری از تفکیک خانه‌ها و جزئیات داخل کوچه‌ها نیست.
وایر فریم باید به‌سرعت طراحی شود و بیشتر زمان باید صرف ارتباط با اعضای تیم و فکر کردن شود.
درست است که توجه به زیبایی‌شناسی امری مهم در طراحی است، اما در وایر فریم با یک سادگی گسترده سروکار داریم. رنگ‌های سیاه، خاکستری و سفید، رنگ‌هایی است که عموماً در طرح‌های خطی استفاده می‌شود (برای لینک‌ها می‌توان از رنگ آبی هم استفاده کرد)
اگر آماده‌سازی برخی از عناصر، زمان زیادی از پروژه را می‌گیرد (مثل انتخاب آیکون‌ها و تصاویر) باید آن‌ها را به ساده‌ترین شکل ممکن نشان دهید (مثلاً استفاده از placeholders – یک مستطیل که قطرهای آن رسم شده و بجای تصاویر قرار می‌گیرد- و درج توضیحات مناسب) همان‌طور که قبل اشاره شد، وایر فریم یک با وفاداری کم است، پس نگران چیزی نباشید.

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

پروتوتایپ چیست؟

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

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

طراحی و پیاده سازی Prototype نسبت به Wireframe زمان و هزینه بیشتری طلب می‎کند. توصیه می‎شود پروتوتایپ‎ها تغییر پذیر و قابل استفاده در چند پروژه باشند ( آشنایی با Html و CSS و کمی JS می‎تواند به شما شما را در طراحی یک پروتوتایپ یاری رساند)

موکاپ چیست؟

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

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