در روند طراحی و توسعه محصول، نمی‌توان مستقیماً به محصول نهایی رسید بلکه باید به‌صورت مرحله به مرحله، "نمونه"هایی آزمایشی از محصول مورد نظر تهیه شده و توسعه یابند. نمونه‌سازی برای محصول، چند فایده دارد:
سه مرحله عمده نمونه‌سازی، به‌خصوص در حوزه طراحی UI و UX، عبارت است از:
۱. وایر فریم
۲. ماک‌آپ
۳. پروتوتایپ
وایر فریم (Wireframe) در لغت به معنای قاب سیمی است و ریشه کاربرد آن به نمونه‌سازی فرم‌های سه‌بعدی با مفتول فلزی و پس از آن به استفاده از این اصطلاح در نرم‌افزارهای طراحی سه‌بعدی می‌رسد. در طراحی UX و UI، وایر فریم به نمونه‌ای از محصول گفته می‌شود که با خطوطی ساده و معمولا مشکی و خاکستری ترسیم می‌شود تا ساختار کلی ایده را بدون توجه به جزییات و بدون عملکرد نشان دهد: مثلا نحوه چیدمان و ترکیب‌بندی عناصر در صفحات اصلی، محل تصاویر و متن. وایر فریم، یک نمونه‌سازی Low-fidelity است یعنی لازم نیست شباهت کامل به محصول نهایی داشته باشد. طراحی وایر فریم سریع و آسان است و بنابراین ایجاد تغییرات در آن، به زمان و انرژی زیاد نیاز ندارد. وایر فریم را می‌توان به آسانی با مداد و کاغذ ترسیم کرد و یا از نرم‌افزارهای ویژه استفاده نمود. هدف اصلی از تهیه وایر فریم، به توافق رسیدن ذی‌نفعان محصول درباره نحوه توسعه و کارکرد کلی محصول است. زمان و هزینه صرف شده برای تهیه وایر فریم باید اندک باشد.
ماک‌آپ یا موکاپ (Mockup) به معنای مدل و نمونه‌ای هم‌اندازه با اصل است و جالب آنکه به ترتیب از زبان‌های فرانسوی (Maquette)، ایتالیایی (Macchietta) و لاتین (macula) به زبان انگلیسی امروز رسیده است. در طراحی UX و UI، ماک‌آپ یعنی نمونه‌ای گرافیکی و رنگی ولی استاتیک و بدون عملکرد از محصول یا اپلیکیشن، که از لحاظ ظاهری، بسیار شبیه به محصول نهایی است و فیچرهای ظاهری آن را دارد ولی کار نمی‌کند و عملکردی را انجام نمی‌دهد، یعنی مثلا صفحات اپلیکیشن هنوز اینتر‌اکتیو نیست یا نمی‌توان بر روی دکمه‌ها کلیک کرد. ماک‌آپ، یک نمونه‌سازی MtoH-fidelity است یعنی باید شباهت زیادی به محصول نهایی داشته باشد. با توجه به آنکه هدف اصلی از تهیه ماک‌آپ، نظرسنجی درباره ظاهر بصری محصول است بنابراین باید رنگ‌ها، آیکون‌ها و فونت‌ها با دقت زیاد، جای‌گذاری شوند. زمان و هزینه صرف شده برای تهیه ماک‌آپ باید متوسط باشد.
پروتوتایپ (Prototype) از دو بخش proto (اولیه) و type (نوع) تشکیل شده و در لغت به معنای نمونه اولیه است ولی در نمونه‌سازی، معنای پروتایپ یعنی نمونه عملکردی. در واقع، پروتوتایپ، نمونه‌ای داینامیک از محصول است که کار می‌کند، یعنی مثلا صفحات اپلیکیشن اینتر‌اکتیو هستند یا می‌توان بر روی دکمه‌ها کلیک کرد. شکل ظاهری پروتوتایپ، کاملا شبیه به محصول نهایی است و دارای عملکرد است. پروتوتایپ، یک نمونه‌سازی High-fidelity است یعنی باید بیشترین شباهت ممکن به محصول نهایی را داشته باشد. هدف اصلی از تهیه پروتوتایپ، نظرسنجی درباره کاربرد پذیری محصول است. زمان و هزینه صرف شده برای تهیه پروتوتایپ زیاد است.
